我怎么能从JSON提取标题但不能提取练习字

Question

This is how my JSON looks like

{
"main_object": {
"id": "new",
"getExerciseTitle": "TestToConfirm",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestToConfirm",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "huisarts",
      "syllables": [
        "huis",
        "arts"
      ]
    }
  ]
},
"dataType": "json"
  }
}

this is how I fetch getExerciseTitle :

var ID = getUrlParameter("id");
var MEDIAARRAY;
//console.log(ID);

$(document).ready(function () {

$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
 //console.log(json);


var exercisetitle = json.main_object.getExerciseTitle;
   $("#getExerciseTitle").html(exercisetitle);


createExercise(json);
    });

});

And this is how I am trying to fetch the words (but this doesn't work, and I am wondering how can this be?

function createExercise(json) {
var exWord = json.main_object.main_object.exercises.word;
     $.each(exWord, function(data, value) {
         console.log(exWord);
     });

}

My console.log() doesn't show any error and I have no idea what I am doing wrong since I am using the same method to fetch my exercisetitle .

Answer 1

Because json.main_object.main_object.exercises is an array , which has no word property. It has an object as its only entry, and that object has word , not the array:

var exWord = json.main_object.main_object.exercises[0].word;
// ------------------------------------------------^^^

or a loop:

json.main_object.main_object.exercises.forEach(function(exercise) {
    var exWord = exercise.word;
    // ...
});

Answer 2

exercises is an array , not an object. You'll have to access the elements of the array in order to access the object(s) with the word property.

function createExercise(json) {
  const exercises = json.main_object.main_object.exercises;
  exercises.forEach(function(exercise) {
    console.log(exercise.word);
  });
}

Answer 3

 var json = { "main_object": { "id": "new", "getExerciseTitle": "TestToConfirm", "language": "nl_NL", "application": "lettergrepen", "main_object": { "title": "TestToConfirm", "language": "nl_NL", "exercises": [ { "word": "huisarts", "syllables": [ "huis", "arts" ] } ] }, "dataType": "json" } } $(document).ready(function () { var exercisetitle = json.main_object.getExerciseTitle; $("#getExerciseTitle").html(exercisetitle); var r = json.main_object.main_object.exercises; $.each(r,function(data,value){ console.log(data,value.word) }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='getExerciseTitle'></div> 

Because you are trying to access the array element without letting the code know the index of the element.