Looping through objects in JSON array

Question

I have a JSON object like so:

{
  "workouts":
  [
    {
      "title": "Full Body",
      "exercises":
      [
        {
          "name": "Push Ups",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Squats",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Running in Place",
          "duration": 3,
          "break": 3
        }
      ]
    },
    {
      "title": "God Legs",
      "exercises":
      [
        {
          "name": "Running in Place (High Knees)",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Squats",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Clams",
          "duration": 3,
          "break": 3
        }
      ]
    },
    {
      "title": "Morning Stretch",
      "exercises":
      [
        {
          "name": "Downward Dog",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Face Plant",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Warrior",
          "duration": 3,
          "break": 3
        }
      ]
    }
  ]
}

I can loop through the titles and append them to the body, now I would like to loop through each object contained in the "exercises" array and print out each value: name, duration and break, per object. I am not having much success and I wonder if I should change my JSON structure or if I am making some silly mistake in my loops. I am using Firebase by the way, no AJAX calls or such like.

JavaScript:

// Initialize firebase.
firebase.initializeApp(config);

var dbRef = firebase.database().ref().child("workouts");

// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
  var workouts = snap.val();

  // HAVE A LOOP FOR EVERY ARRAY INJSON.
  for (var i = 0;  i < workouts.length; i++)
  {
    window.alert(i + workouts[i].title); // Works fine.

    var obj = workouts[i].exercises;
    for (obj in workouts)
    {
      alert(obj.name); // Returns undefined for each object.
    }
  }
});

Remove var obj = workouts[i].exercises; and replace for (obj in workouts) with for (obj in workouts[i].exercises). You're overwriting the obj variable and looping over the wrong array unless I'm misstaken. — powerbuoy
– powerbuoy, Commented Oct 26, 2017 at 14:13
Doing UI based on JSON objects is so nice with something like Aurelia btw. Just an aside. — powerbuoy
– powerbuoy, Commented Oct 26, 2017 at 14:14

steliosbl · Accepted Answer · 2017-10-26 14:15:19Z

2

Using for..in to iterate through arrays generally isn't a great idea in JS. Try using Array.forEach to go through all items in the array instead:

var obj = workouts[i].exercises;
obj.forEach(function(exercise) {
    alert(exercise.name);
});

answered Oct 26, 2017 at 14:15

steliosbl

8,9275 gold badges33 silver badges57 bronze badges

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

1 Comment

Brian Over a year ago

That is great! Thank you! I was looking through forEach docs online, but being a n00b was kinda lost in how to use them correctly.

shelune · Accepted Answer · 2017-10-26 14:21:17Z

2

Try this

var obj = workouts[i].exercises;
for (index in obj) {
    console.log(obj[index].name);
}

It's a bit of logical fault here. You want to get the exercise name, not the workout name.

answered Oct 26, 2017 at 14:21

shelune

1064 bronze badges

Comments

D Lowther · Accepted Answer · 2017-10-26 14:36:36Z

As long as more modern JS is ok, I would probably suggest you use array.prototype.forEach with a callback in both of your loops.

const data = {"workouts":[{"title":"Full Body","exercises":[{"name":"Push Ups","duration":3,"break":3},{"name":"Squats","duration":3,"break":3},{"name":"Running in Place","duration":3,"break":3}]},{"title":"God Legs","exercises":[{"name":"Running in Place (High Knees)","duration":3,"break":3},{"name":"Squats","duration":3,"break":3},{"name":"Clams","duration":3,"break":3}]},{"title":"Morning Stretch","exercises":[{"name":"Downward Dog","duration":3,"break":3},{"name":"Face Plant","duration":3,"break":3},{"name":"Warrior","duration":3,"break":3}]}]}

data.workouts.forEach(workout => {
  workout.exercises.forEach(exercise => console.log(workout.title, '---', exercise.name));
});

For more backwards compatibility you could do nested loops like so:

const data = {"workouts":[{"title":"Full Body","exercises":[{"name":"Push Ups","duration":3,"break":3},{"name":"Squats","duration":3,"break":3},{"name":"Running in Place","duration":3,"break":3}]},{"title":"God Legs","exercises":[{"name":"Running in Place (High Knees)","duration":3,"break":3},{"name":"Squats","duration":3,"break":3},{"name":"Clams","duration":3,"break":3}]},{"title":"Morning Stretch","exercises":[{"name":"Downward Dog","duration":3,"break":3},{"name":"Face Plant","duration":3,"break":3},{"name":"Warrior","duration":3,"break":3}]}]};

for (let i = 0, len = data.workouts.length; i < len; i++) {
  let exercises = data.workouts[i].exercises;
  for (let x = 0, l = exercises.length; x < l; x++) {
    console.log(data.workouts[i].title, '---', data.workouts[i].exercises[x].name);
  }
}

user8530789 · Accepted Answer · 2017-10-26 19:08:22Z

1

Tried to write solution with just map() operator

var mainObj = {
  "workouts":
  [
{
  "title": "Full Body",
  "exercises":
  [
    {
      "name": "Push Ups",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Squats",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Running in Place",
      "duration": 3,
      "break": 3
    }
  ]
},
{
  "title": "God Legs",
  "exercises":
  [
    {
      "name": "Running in Place (High Knees)",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Squats",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Clams",
      "duration": 3,
      "break": 3
    }
  ]
},
{
  "title": "Morning Stretch",
  "exercises":
  [
    {
      "name": "Downward Dog",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Face Plant",
      "duration": 3,
      "break": 3
    },
    {
      "name": "Warrior",
      "duration": 3,
      "break": 3
    }
  ]
}
  ]
}

mainObj["workouts"].map(obj => obj["exercises"].map(exercises => console.log(obj["title"]+"-->"+exercises["name"])))

answered Oct 26, 2017 at 19:08

user8530789

2 Comments

Brian Over a year ago

That is quite awesome!

Tena Over a year ago

You can also use "dot notation" so you can use autocompletion properties: mainObj.workouts.map(obj => obj.exercises.map(exercises => console.log(obj.title+"-->"+exercises.name)))

Collectives™ on Stack Overflow

Looping through objects in JSON array

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related