Question

I’m currently working on a little project to master using APIs and parsing data from it. I currently ran into a problem where I cannot pull a specific element from the JSONP result that i am getting. I need just the addresses in order to pass the string to the Google Map API which will then place the marker on the map i already have generated.

Heres a sample of my script. I’m new to JQuery so any help would be really appreciated. Please note the first function getBByJSOn() already yields a proper result which i parse unto the page. Its the function under I am having issues with.

function getBbyJson()
    {   
        $.ajax({
            type: "GET",
            url: main_link,
            dataType: "jsonp", 
            cache: true,
            crossdomain: true,
            success: function(data){                                        

                    for (var i = 0,len = data.products.length; i<len; i++) {    
                        var name = data.products[i].name;
                        var price = data.products[i].regularPrice;
                        var sku = data.products[i].sku;
                        var desc = data.products[i].shortDescription;
                        $('<div class="name" id="item_'+i+'"></div>').html("Name:"+name).appendTo('#result-container');
                        $('<div class="sku"></div>').html("SKU:  "+sku).appendTo('#item_'+i, '#result-container');
                        $('<div class="price"></div>').html("Price:  "+price).appendTo('#item_'+i);
                        $('<div class="description"></div>').html("Desc:  "+desc).appendTo('#item_'+i);
                    }
                } 
            });
        getBbyJsonBB();
    }

    function getBbyJsonBB()
    {   
            $.ajax({
                type: "GET",
                url: link3,
                dataType: "jsonp", 
                cache: true,
                crossdomain: true,
                success: function(data){
                        for (var i = 0,len = data.products.length; i<len; i++) {    
                            var name2 = data.products[i].address;                       
                        //address[i] = data.product.stores[i].address;
                        //storeId [i]= data.stores[i].storeId;
                        $('<div class="name" id="item_'+i+'"></div>').html("Name:"+name2).appendTo('#result-container');
                        //$('<div class="sku"></div>').html("ADD: "+address[i]).appendTo('#item_'+i, '#result-container');
                        //$('<div class="price"></div>').html("Price:  "+price).appendTo('#item_'+i);
                        //$('<div class="description"></div>').html("Desc:  "+desc).appendTo('#item_'+i);
                    }
                } 
            });

    }

And here’s a sample of the JSON result I need to manipulate.

{
  "queryTime": "0.502",
  "currentPage": 1,
  "totalPages": 2,
  "warnings": "Your product criteria matches too many records.  That exceeds number of records that we allow on the product side of a product-store query.  We've automatically truncated the products down to the first 100.  These results are not complete. Avoid this by narrowing the number of products in your query.",
  "partial": false,
  "from": 1,
  "total": 15,
  "to": 10,
  "products": [
    {
      "name": "AT&T GoPhone - Samsung A107 No-Contract Mobile Phone - Silver",
      "stores": [
        {
          "address": "17301 Valley Mall Road, #538",
          "name": "Best Buy Mobile - Valley Mall",
          "storeId": 2810
        },
        {
          "address": "110 Marketplace Blvd",
          "name": "Selinsgrove",
          "storeId": 1794
        },
        {
          "address": "602 Boulton St Harford Mall Annex",
          "name": "Bel Air",
          "storeId": 296
        }
      ],
      "sku": 1450113
    },
    {
      "name": "AT&T GoPhone - Samsung A157 No-Contract Mobile Phone - Black",
      "stores": [
        {
          "address": "6416 Carlisle Pike",
          "name": "Mechanicsburg",
          "storeId": 1478
        },
        {
          "address": "3537 Capital City Mall Drive, #632",
          "name": "Best Buy Mobile - Capital City Mall",
          "storeId": 2809
        },
        {
          "address": "5000 Jonestown Rd",
          "name": "Harrisburg East",
          "storeId": 547
        },
        {
          "address": "2865 Concord Rd",
          "name": "York",
          "storeId": 1087
        },
        {
          "address": "18053 Garland Groh Blvd",
          "name": "Hagerstown",
          "storeId": 1445
        },
        {
          "address": "17301 Valley Mall Road, #538",
          "name": "Best Buy Mobile - Valley Mall",
          "storeId": 2810
        },
        {
          "address": "110 Marketplace Blvd",
          "name": "Selinsgrove",
          "storeId": 1794
        },
        {
          "address": "2901 East College Ave., #603",
          "name": "Best Buy Mobile - Nittany Mall",
          "storeId": 2811
        },
        {
          "address": "1650 N Atherton St",
          "name": "State College",
          "storeId": 369
        },
        {
          "address": "276 Retail Commons Parkway",
          "name": "Martinsburg",
          "storeId": 1528
        }],
      "sku": 123456
    }]
}

Answer 1

You need an inner loop for your stores. You’re saying: For each product (outer loop), show me each store (inner loop).

Demo: http://jsfiddle.net/ThinkingStiff/uNW78/

Script:

for ( var productIndex = 0, product; productIndex < data.products.length; productIndex++ ) {   
    product = data.products[productIndex];    
    for( var storeIndex = 0, store; storeIndex < product.stores.length; storeIndex++ ) {
        store = product.stores[storeIndex];
        $( '#result-container' ).append( '<div class="name" id="item_' + productIndex + '"></div>' )
            .append( 'name: ' + store.name + '<br />' )
            .append( 'storeId: ' + store.storeId + '<br />' )
            .append( 'address: ' + store.address + '<br />' );           
    };   
};