Question

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

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

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

JavaScript的：

HttpClient.get

Answer 1

使用for..in迭代数组通常不是JS的好主意。尝试使用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回调。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

尝试使用 map（）运算符

编写解决方案

＆＃13;

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

＆＃13;

循环遍历JSON数组中的对象

4 个答案: