遍历JSON数组中的对象

Question

我有一个像这样的JSON对象：

{
  "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
        }
      ]
    }
  ]
}

我可以遍历标题并将其附加到正文，现在我想遍历“锻炼”数组中包含的每个对象并打印出每个值：名称，持续时间和中断，每个对象。 我没有太大的成功，我想知道是否应该更改JSON结构，或者是否在循环中犯了一些愚蠢的错误。 我正在使用Firebase，没有AJAX调用之类的东西。

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.
    }
  }
});

Answer 1

在JS中，通常使用for..in遍历数组不是一个好主意。 尝试使用Array.forEach遍历数组中的所有项目：

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

Answer 2

尝试这个

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

这里有点逻辑上的错误。 您想获取exercise名称，而不是workout名称。

Answer 3

只要更现代的JS可以，我可能会建议您在两个循环中都将array.prototype.forEach与回调一起使用。

 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)); }); 

为了获得更多的向后兼容性，您可以像这样进行嵌套循环：

 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); } } 

Answer 4

尝试使用map（）运算符编写解决方案

 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"])))