JSON assistance

Question

So I am looking for a little bit of guidance, tips and knowledge transfer. Currently I am practicing fetching JSON data, but I am having some issues.

My current problem I a running into is that my 3 variable (brand, desc and price) give me this error: Uncaught TypeError: Cannot read property 'Brand' of undefined

Can someone help me with this, also tips on better coding would be nice.

var url = 'https://raw.githack.com/gromstone/jsonFiles/master/products.json';

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: url,
    success: function(data){
        console.log(data);

        $.each(data, function(i, products){

            var content = "<div class=\"item grid_4\">"; 

            $.each(products, function(i, mainProd){

                var brand = mainProd.ProductInfo.Brand,
                    desc = mainProd.ProductInfo.p_product_description,
                    price = mainProd.ProductInfo.p_product_price;

                //content += '<img class="scale-with-grid" src="' + src + '"/>';
                content += '<p>' + brand + desc + '</p>';
                content += '<p>' + price + '</p>';
                content += '<a>View More</a>';


            });

            content += "</div><!-- product -->";
            $('.load').append(parent);

        })
    },

    error: function(){
        alert('Data did not load, or no connection')
    }

});

You can see working code here: http://jsfiddle.net/gromstone/j1etxuw0/1/

Also if anyone can provide additional help, I want to make a hover effect for each one of the 'div.items' where some additional data is shown on a separate div (ex 'div.placeHolder')

Thanks!

Set a breakpoint and inspect the structure of the value. Not being able to debug your code is like driving a car blindfolded. https://developer.chrome.com/devtools/docs/javascript-debugging — Felix Kling, Jan 30 '15 at 06:44

score 1 · Answer 1 · answered Feb 05 '15 at 22:03

The problem seems to be that you're looping over all properties of the object that your receive in the outer loop

$.each(data, function(i, products){

and in the inner loops you're expecting these properties to be arrays, and each array member to have a ProductInfo property:

$.each(products, function(i, mainProd){
  var brand = mainProd.ProductInfo.Brand,

However, the top-level properties of your JSON document are:

[ 
  "ProductsList", 
  "RecordsCount", 
  "nValue", 
  "Pages", 
  "Refinements", 
  "Breadcrumbs", 
  "CategoryName", 
  "sortProperty" 
]

So your program will first loop over the internals of ProductsList (what I guess is what you expected it to do), but after that, it will loop over the contents of RecordsCount, which in the JSON you linked does not contain an array but the number 8. The inner loops in your program however expect it to be an array, and they will try to access a property ProductInfo of the (non-array) members, which will then fail with an error.

If you're only after iterating over the ProductsList of the JSON, removing the outer loop, and change the remaining (formerly inner) loop's each to:

$.each(data.ProductsList, function(i, mainProd){

JSON assistance

1 Answers1