Question

Why I am getting typeError value is null but In my firebug I can that there is the values and not null, Whats the problem?

Here’s my ajax code:

    $.ajax({
    url: 'get-products.php',
    type: 'post',
    datatype: 'json',
    data: { category: $('.category').val().trim(), keyword: $('.keyword').val().trim() },
    success: function(data){
        var toAppend = '';
        toAppend += '<thead><th>Product Name</th><th>Image</th><th>Price</th><th>Weight</th><th>ASIN</th><th>Category</th></thead>';
        if(typeof data === "object"){
            for(var i=0;i<data.length;i++){
                toAppend += '<tr><td>'+
                data[i]['product_name'][0]+'</td><td><img src="'+
                data[i]['image'][0]+'" alt=""></td><td>'+
                data[i]['price'][0]+'</td><td>'+                            
                data[i]['weight']+'</td><td>'+                                      
                data[i]['asin'][0]+'</td><td>'+                                         
                data[i]['category'][0]+'</td></tr>';
            }
            $('.data-results').append(toAppend);
        }
    }
});

Here’s my php code I know this is working:

    foreach($xml->Items->Item as $item){
$items_from_amazon[] = array(
        'asin'=>$item->ASIN,
        'product_name'=>$item->ItemAttributes->Title, 
        'image'=>$item->SmallImage->URL,
        'price'=>$item->ItemAttributes->ListPrice->FormattedPrice, 
        'category'=>$item->ItemAttributes->ProductGroup, 
        'weight' => (string) $item->ItemAttributes->PackageDimensions->Weight.' lbs');
}
echo json_encode($items_from_amazon);
?>

Here’s the result from my firebug:

Here’s my sample ouput, can I still display the result even do there is still null result like in image if the image is null then there is no image displayed

Answer 1

In the firebug image it looks like it says image is null at the 7th index.
So if you do data.image[index] You are accessing a memory location that is invalid. The image property must point to something.

             for(var i=0;i<data.length;i++){
//You can save default image in a global variable, hidden div... it is up to you. 
                var img ;
                if(data[i]['image'] === null){
                  img = defaultImage ;
                }
                else
                { 
                    img = data[i]['image'][0];  
                }
                toAppend += '<tr><td>'+
                data[i]['product_name'][0]+'</td><td><img src="'+
                img +'" alt=""></td><td>'+ //use img here
                data[i]['price'][0]+'</td><td>'+                            
                data[i]['weight']+'</td><td>'+                                      
                data[i]['asin'][0]+'</td><td>'+                                         
                data[i]['category'][0]+'</td></tr>';
            }

You hopefully get the idea.