Trying to append my fetched JSON data to a field but this doesn't work

Question

I am trying to loop through my JSON and then append each word to col-md-9 with the id eenwoordlol[ + ID123 +] , but this doesn't work.

var ID123 = 0;

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

var exer = ($('<div/>', {
    'class': 'row'
}));

var mainCol3 = ($('<div/>', {
    'class' : 'col-md-3'
})).append($('<div/>', {
    'class': 'row'
})).append($('<div/>', {
    'class': 'col-md-3'
})).append($('<div/>', {
    'class': 'col-md-9',
    'id' : 'eenwoordlol[' + ID123 + ']'
}));

var mainCol9 = ($('<div/>', {
    'class': 'col-md-9'
}));

$('#eenwoordlol').val(exercise.word);

exer.append(mainCol3);
exer.append(mainCol9);
exer.append('<br/>');
$("#exerciseField").append(exer);
 });
}

The HTML code:

<div class="exerciseField" id="exerciseField">

</div> <!-- end of exerciseField-->

The console.log() does show that I have a word in my JSON file (I know the looping works and it does fetch, but I can't seem to display it), but it doesn't show any given error. So what am I missing out on?

Answer 1

$('#eenwoordlol') will not find anything because the actual id is #eenwoordlol[0] . If you want to select this in a css selector you need to escape the brackets.

Also val is used for inputs, use text() to set text content:

$('#eenwoordlol\[0\]').text(exercise.word);

However, this will not work because the element is not even in the DOM, yet. I suggest adding a variable, instead of appending immediately and performing a second lookup later:

var content = $('<div/>', {
    'class': 'col-md-9',
    'id' : 'eenwoordlol[' + ID123 + ']'
});
content.text(exercise.word);

var mainCol3 = ($('<div/>', {
    'class' : 'col-md-3'
})).append($('<div/>', {
    'class': 'row'
})).append($('<div/>', {
    'class': 'col-md-3'
})).append(content);

var mainCol9 = ($('<div/>', {
    'class': 'col-md-9'
}));

Answer 2

Four problems:

• .val() is for input fields and textareas; to insert text into a regular dom node use .text() or .html() .
• You were trying to set val() on a nonexistent DOM node '#eenwordlol'.
• You never increment the ID variable, resulting in duplicate IDs.
• Something isn't right in how you're constructing those DOM nodes. EDIT: I've updated this to match your described intended structure:

Create a main row with col 3 and col 9, within the col 3 I create another row with col 3 and col 9 (on the col 9 the word would be append and the col 3 an audio button) and then I have a col 9 left and within that I wanted to create 4 times a col 3

 var ID123 = 0; // You probably don't want to use a global variable for this, but let that slide for now var fakejson = { // extrapolating this based on the code main_object: { main_object: { exercises: [{ word: "one" }, { word: "two" }, { word: "three" } ] } } } function createExercise(json) { const exercises = json.main_object.main_object.exercises; exercises.forEach(function(exercise) { var exer = $('<div/>', { 'class': 'row' }) .append( $('<div/>', { 'class': 'col-md-3' }) .append( $('<div/>', { 'class': 'row' }) .append($('<div>', { class: 'col-md-3', text: "(button here)" })) .append($('<div>', { class: 'col-md-9', 'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries text: exercise.word })) ) ).append( $('<div>', { class: 'col-md-9', text: "(4 x col-3 here)" }) ); $("#exerciseField").append(exer); ID123++; }); } createExercise(fakejson); 

 div { /* Just to make structure visible */ border: 1px solid; padding: 2px; } 

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

To be honest, that's a complicated enough structure that instead of carefully nesting all those .append() rules you might be better off just writing out the html string directly:

var exer = $('<div class="row"><div class="col-md-3">' + exercise.word + '</div>...etc...</div>');

If the eenwoordlol[...] IDs are only used for the text insertion in this function, you can safely remove them, since the text can instead just be inserted when the node is constructed.