使用 Jquery 将 JSON API 请求的元素传递给数组

Question

我目前正在做一个小项目，以掌握如何使用 API 并从中解析数据。我目前遇到了一个问题，我无法从我得到的 JSONP 结果中提取特定元素。我只需要地址就可以将字符串传递给 Google Map API，然后 Google Map API 会将标记放置在我已经生成的地图上。

这是我的脚本示例。我是 JQuery 的新手，所以非常感谢任何帮助。请注意第一个函数getBByJSOn() 已经产生了我解析到页面的正确结果。它是我遇到问题的功能。

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);
                    }
                } 
            });

    }

这是我需要处理的 JSON 结果示例。

{
  "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

您的stores 需要一个内部循环。你是说：对于每个product（外循环），显示每个store（内循环）。

演示： http://jsfiddle.net/ThinkingStiff/uNW78/

脚本：

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 />' );           
    };   
};