how to create an each loop, but keep the data together

Question

I have an exercise block with one word and 4 syllables. In my json it looks like this:

{
"main_object": {
"id": "new",
"getExerciseTitle": "TestFrontEnd",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestFrontEnd",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "huisarts",
      "syllables": [
        "Huis",
        "arts",
        "",
        ""
      ]
    },
    {
      "word": "voetbal",
      "syllables": [
        "Voet",
        "bal",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
 }
}

I want to loop through these word and syllables, but each word has to remain with their syllables in one exercise block. Right now this is how I tried doing it and I failed big time:

$(document).ready(function () {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {


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


 var exercise = json.main_object.main_object.exercises;
    $.map(exercise, function(exercise, i) {
        $("#addOpdracht").click();
        $(".exerciseGetWordInput_" + i).val(exercise.word) 
         console.log(exercise.syllables);
          $(".sylll" + i).val(exercise.syllables)
    });

  });

});

The function that creates the syllables inputs:

function getWordPartInput(id, cValue){
cValue = cValue || '';
var wpInput = $('<input/>', {
'class': 'form-group form-control syllable sylll' + TT ++,
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'name': 'Syllablescounter['+ SyllablesID++ +']'
 });
return wpInput;
 }

to visualize it for you, it should look like this

but instead it looks like this

so what can I do to get the result I would like to have?

can you try calling a map function inside the other. first map is for `exercise` and inside that call another map with array `(exercise.syllables` ? — Aravind S, Jun 27 '18 at 14:31
See also: https://stackoverflow.com/questions/51058788/how-to-split-the-commas-in-javascript-jquery-so-the-words-each-go-into-their-res?noredirect=1#comment89109681_51058788 — freedomn-m, Jun 27 '18 at 16:00

score 0 · Answer 1 · answered Jun 27 '18 at 14:36

Here is some JavaScript solution for your problem defined in question title:

var json = {
 "main_object": {
  "id": "new",
  "getExerciseTitle": "TestFrontEnd",
  "language": "nl_NL",
  "application": "lettergrepen",
  "main_object": {
   "title": "TestFrontEnd",
   "language": "nl_NL",
   "exercises": [{
     "word": "huisarts",
     "syllables": [
      "Huis",
      "arts",
      "",
      ""
     ]
    },
    {
     "word": "voetbal",
     "syllables": [
      "Voet",
      "bal",
      "",
      ""
     ]
    }
   ]
  },
  "dataType": "json"
 }
}

var exercise = json.main_object.main_object.exercises;

exercise.forEach(function(ex) {
       console.log("For the word " + ex.word + " the syllabus are:");
    ex.syllables.forEach(function(sy, i) {
  console.log(i+1 + " " + sy);
    
  })
})

score 0 · Answer 2 · answered Jun 27 '18 at 14:37

0

update you loop function like this and see

exercise.map(a=>{
    console.log("Word is "+a.word);
    a.syllables.map(b=>{
        console.log("Syllable is"+b)
    })
}
);

this is the logic mentioned in the comment

answered Jun 27 '18 at 14:37

Aravind S

2,347
2
12
21

how to create an each loop, but keep the data together

2 Answers2

Linked