durch Objekte in JSON Array Looping

Question

I ein JSON Objekt wie so haben:

{ 
    "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 können die Titel Schleife durch und hängen sie an den Körper, wie ich würde nun durch jede Objekt-Schleife in der "enthaltenen Übungen "array und drucken Sie jeden Wert: Name, Dauer und Pause, pro Objekt. Ich habe nicht viel Erfolg und ich frage mich, ob ich meine JSON-Struktur ändern sollte oder ob ich in meinen Loops einen dummen Fehler mache. Ich verwende Firebase übrigens, keine AJAX-Anrufe oder ähnliches.

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

for..in Verwendung durch Arrays iterieren im Allgemeinen keine gute Idee, in JS ist. Versuchen Sie Array.forEach mit durch alle Elemente im Array zu gehen, statt:

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

Answer 2

Versuchen Sie, diese

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

Es sei hier ein bisschen logischer Fehler ist. Sie möchten den Namen exercise erhalten, nicht den Namen workout.

Answer 3

Solange modernere JS in Ordnung ist, würde ich wahrscheinlich vorschlagen, dass Sie array.prototype.forEach mit einem Rückruf in beiden Ihren Schleifen verwenden.

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

Für weitere Abwärtskompatibilität können Sie wie so verschachtelten Schleifen tun:

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

Lösung mit nur Karte zu schreiben versucht() 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"])))