loop through Json structure in Javascript

Question

Question: Just wondering , what is the best way to loop items in the inner structure of a Json file. Like "showtimes" key here ?

My Json file:

var movies_list = {
    "movies":[  
   {  
      "id":"1",
      "name":"Finding Nemo",
      "audience":"UA",
      "language":"english",
      "genre":[  
         "kids",
         "adventure"
      ],
      "running_time":"120",
      "showtimes":[  
         {  
            "cinema_name":"Suncity",
            "display_showtime":"10:00 AM",
            "showtime_code":1000
         },
         {  
            "cinema_name":"PVR",
            "display_showtime":"1:00 PM",
            "showtime_code":1300
         }
      ]
   },
   {  
      "id":"2",
      "name":"Incredibles",
      "audience":"UA",
      "language":"english",
      "genre":[  
         "kids",
         "thriller"
      ],
      "running_time":"190",
      "showtimes":[  
         {  
            "cinema_name":"Suncity",
            "display_showtime":"8:00 AM",
            "showtime_code":0800
         },
         {  
            "cinema_name":"Suncity",
            "display_showtime":"2:00 PM",
            "showtime_code":1400
         }
      ]
   }
]
};

Iterating the first loop is working fine. Just want to loop through the items present in "showtimes" key.

My code:

var data = movies_list.movies;

for(var i = 0; i < data.length; i++){
   var fisrtLoopData = data[i];
   $('body').append('<p>'+ fisrtLoopData + '</p>');
}

You are already there. Just add another for loop for fisrtLoopData.showtimes — rajesh
– rajesh, Commented Feb 26, 2017 at 6:01

parsethis · Accepted Answer · 2017-02-26 06:03:44Z

1

try:

var data = movies_list.movies;

for(var i = 0; i < data.length; i++){
   var showtimes = data[i].showtimes
   for (var j=0; j<showtimes.length; j++){
        var items = showtimes[j]
       $('body').append('<p>'+ items.cinema_name + '</p>');
    }
}

answered Feb 26, 2017 at 6:03

parsethis

8,0883 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lipak Over a year ago

Thanks . It works ! Just one question: This way can i consume data from a REST API ? or there are other simple ways to do it ?

parsethis Over a year ago

that would depends on what you want to do with the data you get back from the API. please, update your question and I will update the answer.

Lipak Over a year ago

I meant, if JSON file structure is complex... then solution provided by you is fine to work with ?

parsethis Over a year ago

no, the way you access the data you want depends on the complexity of the JSON data. I suggest that you have a look at the data coming back from the API and if you need further update your question.

Siamak Ferdos · Accepted Answer · 2017-02-26 06:10:14Z

0

$(function(){
  var data = movies_list;  
  Object.keys(data).forEach(function(k){        
    for(var i = 0; i < movies_list[k].length; i++){
       var fisrtLoopData = movies_list[k][i]["name"] + " " + movies_list[k][i]["audience"];
       $('body').append('<p>'+ fisrtLoopData + '</p>');
    }
    });
});

answered Feb 26, 2017 at 6:10

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-02-26 08:14:18Z

Some observations :

Your JSON is not valid.

A leading 0 at "showtime_code": 0800 indicates an octal number in JavaScript. An octal number cannot contain an 8, therefor, that number is invalid. JSON doesn't (officially) support octal numbers, even if the number does not contain an 8.

Correction : If you have a number, don't store it with leading zero. If you have a value that needs to have a leading zero, don't treat it as a number, but as a string. Store it with quotes around it.

JSON Parsing : Use JavaScript Array.map() method to parse the JSON to get the required data.

DEMO

var movies_list = {
    "movies":[  
   {  
      "id":"1",
      "name":"Finding Nemo",
      "audience":"UA",
      "language":"english",
      "genre":[  
         "kids",
         "adventure"
      ],
      "running_time":"120",
      "showtimes":[  
         {  
            "cinema_name":"Suncity",
            "display_showtime":"10:00 AM",
            "showtime_code":1000
         },
         {  
            "cinema_name":"PVR",
            "display_showtime":"1:00 PM",
            "showtime_code":1300
         }
      ]
   },
   {  
      "id":"2",
      "name":"Incredibles",
      "audience":"UA",
      "language":"english",
      "genre":[  
         "kids",
         "thriller"
      ],
      "running_time":"190",
      "showtimes":[  
         {  
            "cinema_name":"Suncity",
            "display_showtime":"8:00 AM",
            "showtime_code":800
         },
         {  
            "cinema_name":"Suncity",
            "display_showtime":"2:00 PM",
            "showtime_code":1400
         }
      ]
   }
]
};

var arr = [];
var res = movies_list.movies.map(function(item) {
  for (var i in item.showtimes) {
    arr.push(item.showtimes[i].cinema_name);
  }
});

console.log(arr);

I don't think you need a map there, since you are not doing anything with the res array which you'll get after the map with [undefined, undefined]. You could rather use a forEach
@MuraliKrishna I am not using res array but what i am doing is i am iterating the movies array through map function.
@LipakSahil Your welcome !! If it fulfill your expectation mark it as a correct so that it will be useful for others also.
@Rohit but the map will return an array with the same length as movies, with undefined values in it since you are not returning anything inside the function. But in your case you are not expecting any return value right, only the loop for that forEach is the right thing to use. I mean you can use the map, but the purpose of the map is different

Murali Krishna · Accepted Answer · 2017-02-26 10:21:47Z

0

movies_list.movies.forEach(function(movie) { 
    movie.showtimes.forEach(function(showtime) {
       console.log(showtime.cinema_name)
    });
});

in a functional way. You actually don't need any loops.

answered Feb 26, 2017 at 10:21

Murali Krishna

6692 gold badges9 silver badges16 bronze badges

Collectives™ on Stack Overflow

loop through Json structure in Javascript

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Related