Question

我是Angularjs的新手。我试图使用Angularjs在嵌套的JSON中获取值。我需要product_image_urls中的密钥200x200的值。它能够显示产品名称。

HTML代码 -

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Sample Text Here</h1>
                </div>
                <ul>
                    <li ng-repeat-start="x in products">
                        {{x.product_name}}
                    </li>
                    <li ng-repeat-end ng-repeat="img in x.product_image_urls">{{img["200x200"]}}</li>
                </ul>
                <br>
            </div>
        </div>

JSON -

[  
   {  
      "product_id":"1",
      "site_product_id":"{\"flipkart \": \"MOBDSYJZXH6EXMPH\"}",
      "product_name":"Videocon V1436(Blue)",
      "product_brand":"Videocon",
      "product_category":"mobile",
      "product_price":"{\"flipkart \": \"0.0\"}",
      "product_rating":null,
      "product_specification":"{\"keySpecs\": [\"Expandable Upto 4 GB\", \"1.8 inch QVGA Display\", \"0.3MP Primary Camera\", \"1200 mAh Li-Ion Battery\"], \"booksInfo\": {\"year\": 0, \"pages\": null, \"authors\": [], \"binding\": null, \"language\": null, \"publisher\": null}, \"detailedSpecs\": [\"Expandable Upto 4 GB\", \"1.8 inch QVGA Display\", \"0.3MP Primary Camera\", \"1200 mAh Li-Ion Battery\"], \"lifeStyleInfo\": {\"neck\": null, \"sleeve\": null, \"idealFor\": null}, \"specificationList\": [{\"key\": \"General\", \"values\": [{\"key\": \"Sales Package\", \"value\": [\"Mobile\"]}, {\"key\": \"Model Name\", \"value\": [\"V1436\"]}, {\"key\": \"Color\", \"value\": [\"Blue\"]}, {\"key\": \"Browse Type\", \"value\": [\"Feature Phones\"]}, {\"key\": \"SIM Type\", \"value\": [\"Dual Sim\"]}]}, {\"key\": \"Display Features\", \"values\": [{\"key\": \"Display Size\", \"value\": [\"1.8 inch\"]}, {\"key\": \"Resolution\", \"value\": [\"240 x 320 Pixels\"]}, {\"key\": \"Resolution Type\", \"value\": [\"QVGA\"]}]}, {\"key\": \"Memory & Storage Features\", \"values\": [{\"key\": \"Expandable Storage\", \"value\": [\"4 GB\"]}, {\"key\": \"Memory Card Slot Type\", \"value\": [\"NA\"]}]}, {\"key\": \"Camera Features\", \"values\": [{\"key\": \"Primary Camera Available\", \"value\": [\"Yes\"]}, {\"key\": \"Primary Camera\", \"value\": [\"0.3 megapixel\"]}]}, {\"key\": \"Connectivity Features\", \"values\": [{\"key\": \"Supported Networks\", \"value\": [\"GSM, GSM\"]}, {\"key\": \"Audio Jack\", \"value\": [\"3.5 mm\"]}]}, {\"key\": \"Other Details\", \"values\": [{\"key\": \"SIM Size\", \"value\": [\"Micro SIM\"]}]}, {\"key\": \"Battery & Power Features\", \"values\": [{\"key\": \"Battery Capacity\", \"value\": [\"1200 mAh\"]}]}]}",
      "product_description":"",
      "product_image_urls":"{\"200x200\": \"http:\/\/img.fkcdn.com\/image\/mobile\/m\/p\/h\/videocon-v1436-200x200-imadtfnyvmb3sdxh.jpeg\", \"400x400\": \"http:\/\/img.fkcdn.com\/image\/mobile\/m\/p\/h\/videocon-v1436-400x400-imadtfnyvmb3sdxh.jpeg\", \"800x800\": \"http:\/\/img.fkcdn.com\/image\/mobile\/m\/p\/h\/videocon-v1436-800x800-imadtfnyvmb3sdxh.jpeg\", \"unknown\": \"http:\/\/img.fkcdn.com\/image\/mobile\/m\/p\/h\/videocon-v1436-original-imadtfnyvmb3sdxh.jpeg\"}",
      "product_site_urls":"{\"flipkart \": \"http:\/\/dl.flipkart.com\/dl\/videocon-v1436\/p\/itmezgyfdhrszhkf?pid=MOBDSYJZXH6EXMPH&affid=shubhz123\"}"
   }
]

控制器 -

app.controller('ProductController', function($scope, $http) {
        $http.get("allprods.php").success(function(data) {
            $scope.products = data;
            };
        });
    });

输出 -

但它无法在product_image_urls中获取值。任何解决方案？

Answer 1

product_image_urls 不是数组，您无法使用 ng-repeat 对其进行循环。您只需访问每个产品的属性：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1>Sample Text Here</h1>
        </div>
        <ul>
            <li ng-repeat-start="x in products">
                {{x.product_name}}
            </li>
            <li ng-repeat-end>{{x.product_image_urls["200x200"]}}</li>
        </ul>
        <br>
    </div>
</div>

更新

此答案假定提供的JSON格式正确。 E.g：

{
    product_id: "1",
    site_product_id: {
        "flipkart ": "MOBDSYJZXH6EXMPH"
    },
    product_name: "Videocon V1436(Blue)",
    product_brand: "Videocon",
    product_category: "mobile",
    product_price: {
        "flipkart ": "0.0"
    },
    product_rating: null,
    product_image_urls: {
        "200x200": "http://img.fkcdn.com/image/mobile/m/p/h/videocon-v1436-200x200-imadtfnyvmb3sdxh.jpeg",
        "400x400": "http://img.fkcdn.com/image/mobile/m/p/h/videocon-v1436-400x400-imadtfnyvmb3sdxh.jpeg",
        "800x800": "http://img.fkcdn.com/image/mobile/m/p/h/videocon-v1436-800x800-imadtfnyvmb3sdxh.jpeg",
        "unknown": "http://img.fkcdn.com/image/mobile/m/p/h/videocon-v1436-original-imadtfnyvmb3sdxh.jpeg"
    }
}

更新2：

似乎未正确解析返回的JSON，如果您只需要访问图像URL，则需要至少解析所述属性：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1>Sample Text Here</h1>
        </div>
        <ul>
            <li ng-repeat-start="x in products">
                {{x.product_name}}
            </li>
            <li ng-repeat-end>{{parseJson(x.product_image_urls)["200x200"]}}</li>
        </ul>
        <br>
    </div>
</div>

控制器：

app.controller('ProductController', function($scope, $http) {
    // ...

    $scope.parseJson = function(data) {
        return JSON.parse(data);
    }
});

你应该在后端处理这个问题。或者至少在数据进入时处理数据，因为每个属性都是字符串，而不是解析对象。

Angularjs获取嵌套的JSON值

1 个答案:

更新

更新2：