How to add an object values in html elements with jQuery?

Question

I've been trying to add an object values in multiple div elements but Im struggling to get the expected behaviour.

Here is my code:

 obj = { valeur1: "text1", valeur2: "text2", valeur3: "text3", valeur4: "text4" } $('div').each(function(i) { $.each(obj, function(index, value) { if (value in $('div')) { return } else { $('div').text(value); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div>

I dont understand why I always get:

text4
text4
text4
text4

Please, can you explain me what is the problem with my algorithm?

Thank you so much for your help !

Answer 1

You don't need nested loops. Use the index in the main loop to get the corresponding element of the property.

And you should be setting $(this).text() , not $('div').text() , since the latter sets the text of all DIVs, not the current element of the loop.

 obj = { valeur1: "text1", valeur2: "text2", valeur3: "text3", valeur4: "text4" } $('div').each(function(i) { $(this).text(obj['valeur' + (i+1)]) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div>

Answer 2

You're looping inside a loop. So whatever values you enter are being overwritten until the last loop.

One method to fix, like so:

 $(function() { var obj = { valeur1: "text1", valeur2: "text2", valeur3: "text3", valeur4: "text4" } var i = 0; $.each(obj, function(key, value) { $("div").eq(i++).html(value); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div>

In this example, iterating the Object itself. Since $.each() will give us the key and value pair, we can set a index variable to use in the loop. We can target the <div> element using .eq() .

Another like so:

 $(function() { var obj = { valeur1: "text1", valeur2: "text2", valeur3: "text3", valeur4: "text4" } $("div").each(function(i, el) { var k = Object.keys(obj); $(el).html(obj[k[i]]); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div>

This one, we iterate the Elements. We get an index and element pair this time. Since we want to get specific matching elements from the Object, we can make an array of the Keys and use each in the loop.

Your pick.

Answer 3

 var obj = [ "text1", "text2", "text3", "text4" ] console.log(obj.length); $('div').each(function(i) { this.innerHTML = obj[i]; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div>

Is the above model what you're using? You can easily just declare a string array, and iterate it as I've demonstrated.