loop through JSON with null objects

Question

I have this problem with my JSON file.

{"results" :[{
    "name" :    "name1",
    "type" :[{
        "id" : '2',
    },{
        "id" : '1',
    },{
        "id" : '4',
    },{
        "id" : '6',
    }],
}],
    "images" :[{
    "url" : "url0",
    },{
    "url" : "url1",
    },{
    "url" : "url2",
    },{
    "url" : "url3",
    },{
    "url" : "url4",
}],
},{
    "name" :    "name2",
    "type" :[{
    {
        "id" : '25',
    },{
        "id" : '123',
    },{
        "id" : '423',
    },{
        "id" : '346',
    }],
    "images" :[{
        "url" : "url0",
    },{
        "url" : "url1",
    },
    {
        "url" : "url2",
    },
    {
        "url" : "url3",
    },{
        "url" : "url4",
    }],
},  
 },{
    "name" :    "name3",
    "type" : null,
"images" :null,
},.....
]}

the JSON object looks like this When i loop through the it kicks me out when it comes to the null

for(var i = 0; i < results.length; i++){
   $('.results')append('<p class="liste">'+results[i].name+'</p><ul></ul>');
   $('.liste').prepend('<img src="'+results[i].images[1].url+'"');
   for(var j = 0; j < results[i].type.length; j++){
      $('.results ul').append('<li>'+results[i].type[j].id+'</li>');
   }
}

the result should look somewhat like this

<div class="results">
   <img src="url1"><p>name1</p>
       <ul>
         <li>2</li>
         <li>1</li>
         <li>4</li>
         <li>6</li>
       </ul>
   <img src="url1"><p>name2</p>
       <ul>
       </ul>
   <img src="url1"><p>name3</p>
       <ul>
         <li>25</li>
         <li>123</li>
         <li>423</li>
         <li>346</li>
       </ul>
</div>

i tryed

if(results[i].images != null){
   $('.liste').prepend('<img src="'+results[i].images[1].url+'">');
}else{
  $('.liste').prepend('<img src="some default image" width="170" height="170">');
}
if(results[i].type != null){
for (var j = 0; j < results[i].type.length.length; j++) {
  $('.album').append('<li>'+[i]+'-'+[j]+'-'+results[i].type.length[j].id+'</li>');
};

it gehts really messy the image comes for every [i] and the first [k] appears as it suppose to be as well as last [k] in in the pre. [i]

[i][j]
   name1
[0][0]
[0][1]
[0][2]
[0][3]
[1][0]
   name2
[1][0]    
......

I hope some one can help me with that

EDIT I forgot every "type" is listed under each name.

Test whether or not it is an array before you try to get the length. — user400654
– user400654, Commented Sep 6, 2013 at 15:39
results[i].type.length != null this seems strange. Shouldn't you check results[i].type != null ? — Halcyon
– Halcyon, Commented Sep 6, 2013 at 15:40
you are right my fault i edited it... i check for results[i].type != null in the code — Frank
– Frank, Commented Sep 6, 2013 at 15:42
I think you've got problems in the JSON file to start out with. Seems like there are mismatched } and ]. — andi
– andi, Commented Sep 6, 2013 at 15:58

dc5 · Accepted Answer · 2013-09-06 18:52:40Z

The JSON you provided is invalid, but, assuming the JSON looks like this (based on your current iteration code):

var results = [{
    "name": "name1",
    "type": [{ "id": '2'}, 
             { "id": '1'},
             { "id": '4'}, 
             { "id": '6'}],
    "images": [{ "url": "url0" },
               { "url": "url1" }, 
               { "url": "url2" }, 
               { "url": "url3" },
               { "url": "url4" }],
    }, {
    "name": "name2",
    "type": [{ "id": '25' }, 
             { "id": '123' },
             { "id": '423' }, 
             { "id": '346' }],
     "images": [{ "url": "url0" }, 
                { "url": "url1" }, 
                { "url": "url2" }, 
                { "url": "url3" }, 
                { "url": "url4" }],
    }, {
    "name": "name3",
    "type": null,
    "images": null
    }];

You have several problems with this statement:

for(var i = 0; i < results.length; i++){
   $('.results')append('<p class="liste">'+results[i].name+'</p><ul></ul>');
   $('.liste').prepend('<img src="'+results[i].images[1].url+'"');
   for(var j = 0; j < results[i].type.length; j++){
      $('.results ul').append('<li>'+results[i].type[j].id+'</li>');
   }
}

$('.liste').prepend will append the provided element to ALL elements with a class of .liste. Each time you prepend a new image, all existing <p> elements will get it.
$('.results ul').append - see above comment. Each time you append, all existing elements that match will get additional, unwanted values attached
Both the type and images values can be null and you haven't provided any guards against this in your loop.

Something like this given the assumption above will work better for you:

Demo Fiddle

Code:

// Use a document fragment to avoid DOM updates in the loop
var $fragment = $(document.createDocumentFragment());
for (var i = 0; i < results.length; i++) {
    // If there is an image, add it
    if(results[i].images) {
        $fragment.append($('<img src="' + results[i].images[1].url + '"/>'));
    }

    $fragment.append($('<p class="liste">' + results[i].name + '</p>'));

    // Keep track of the current UL so it can be appended to directly
    var $curULTag = $('<ul></ul>').appendTo($fragment);

    if(results[i].images && results[i].type) {
        for (var j = 0; j < results[i].type.length; j++) {
            // add the li to the current UL 
            $curULTag.append('<li>' + results[i].type[j].id + '</li>');
        }
    }
}

// Append the full results 
$('.results').append($fragment);

Results:

<div class="results">
    <img src="url1">
    <p class="liste">name1</p>
    <ul>
        <li>2</li>
        <li>1</li>
        <li>4</li>
        <li>6</li>
    </ul>
    <img src="url1">
    <p class="liste">name2</p>
    <ul>
        <li>25</li>
        <li>123</li>
        <li>423</li>
        <li>346</li>
    </ul>
    <p class="liste">name3</p>
    <ul></ul>
</div>

If my assumption about the JSON structure you provided isn't correct, you can adjust the above code to provide the results you need.

Upvote, as you have covered the most important point, which is adding the conditional statements to deal with the null results by checking for the existence of any value instead of comparing it to 'null'. Same thing I would do as well.
I just love the moment when i read such accurate to the point answers and all i can think of is "dammit of course"... Thank you very much that helped a lot

Chris S. · Accepted Answer · 2013-09-06 16:13:13Z

1

Start off with a more clear code structure so you don't get lost too fast...

if (jsonData.results)
{
    $.each(jsonData.results, function(obj)
    {
         // process obj.name if exists
         // process obj.type if exists
    });
}

Do you see any error messages in the console?

answered Sep 6, 2013 at 16:13

Chris S.

1,25712 silver badges25 bronze badges

Collectives™ on Stack Overflow

loop through JSON with null objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related