Przemek Przemek -4 years ago 167
jQuery Question

Only 1 array of objects is outputted

In localStorage I have several arrays of objects, I tried to do this:

var recipes = JSON.parse(localStorage.getItem('key'));
$(recipes).each(function(index, recipe){
$('#qq').html(recipe.title);
console.log(recipe);
});


However, it only outputs last array of objects, and console.log(recipe) contains more:
enter image description here

Can anyone tell me how to fix this, please?

Sample:

[{"title":"q","ingredients":"s","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110052397224993886441":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311079670549304635711":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311016424488798697091":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"q","instructions":"a","moreingredients":[],"moreinstruction":[],"img":{"jQuery311067483883379310751":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110317360085863979571":{"display":""}},"salutation":"polish"},{"title":"qfsdf","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110046219695216345611":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"d","instructions":"f","moreingredients":[],"moreinstruction":[],"img":{"jQuery311092867615674104551":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311033441653883910961":{"display":""}},"salutation":"italian"},{"title":"f","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311072398853052545851":{"display":""}},"salutation":"italian"},{"title":"ffsf","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311023649491136232761":{"display":""}},"salutation":"french"}]

Answer Source

The line $('#qq').html(recipe.title); overwrites the content of #qq on each iteration, hence only the last entry of recipes will be visible.

Use .append()

var recipes = [{"title":"q","ingredients":"s","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110052397224993886441":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311079670549304635711":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311016424488798697091":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"q","instructions":"a","moreingredients":[],"moreinstruction":[],"img":{"jQuery311067483883379310751":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110317360085863979571":{"display":""}},"salutation":"polish"},{"title":"qfsdf","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110046219695216345611":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"d","instructions":"f","moreingredients":[],"moreinstruction":[],"img":{"jQuery311092867615674104551":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311033441653883910961":{"display":""}},"salutation":"italian"},{"title":"f","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311072398853052545851":{"display":""}},"salutation":"italian"},{"title":"ffsf","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311023649491136232761":{"display":""}},"salutation":"french"}];

$.each(recipes, function(index, recipe){
    $('#qq').append("<li>" + recipe.title + "</li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="qq"></ul>

Or add the title to the current content of #qq with .html(function(index, oldValue) { ... })

var recipes = [{"title":"q","ingredients":"s","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110052397224993886441":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311079670549304635711":{"display":""}}},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311016424488798697091":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"q","instructions":"a","moreingredients":[],"moreinstruction":[],"img":{"jQuery311067483883379310751":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110317360085863979571":{"display":""}},"salutation":"polish"},{"title":"qfsdf","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery3110046219695216345611":{"display":""}},"salutation":"italian"},{"title":"q","ingredients":"d","instructions":"f","moreingredients":[],"moreinstruction":[],"img":{"jQuery311092867615674104551":{"display":""}},"salutation":"polish"},{"title":"q","ingredients":"w","instructions":"e","moreingredients":[],"moreinstruction":[],"img":{"jQuery311033441653883910961":{"display":""}},"salutation":"italian"},{"title":"f","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311072398853052545851":{"display":""}},"salutation":"italian"},{"title":"ffsf","ingredients":"d","instructions":"d","moreingredients":[],"moreinstruction":[],"img":{"jQuery311023649491136232761":{"display":""}},"salutation":"french"}];

$.each(recipes, function(index, recipe){
    $('#qq').html(function(_, oldValue) { return oldValue + recipe.title + "<br />" });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="qq"></div>

There are many more options to manipulate the DOM:
jQuery Learning Center: Manipulating Elements

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download