Angularjs fetching Nested JSON value

Question

I am new to Angularjs. I am trying to fetch value in a nested JSON using Angularjs. I need the value of a key 200x200 inside product_image_urls. It is able to display the product name.

HTML Code-

        <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\"}"
   }
]

Controller-

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

Output-

But it won't work for fetching values inside product_image_urls. Any solutions?

First, post what output you're getting and how it differs from what you expect. Second, that's not properly-formatted JSON, and I'd expect it to cause a syntax/parse error. site_product_id, product_price, and product_image_urls all have quotation marks that throw off whether you're creating a string or not. Third, it looks like you're trying to use strings to imitate objects. I recommend you practice and learn the basics of JavaScript before moving on to a framework like AngularJS. — Harris
– Harris, Commented Mar 10, 2017 at 14:42
there is only one "200x200" key in product_image_urls, so why the ng-repeat? — lealceldeiro
– lealceldeiro, Commented Mar 10, 2017 at 14:42
@lealceldeiro when you scroll to the right you'll see ,"400x400": ... ,"800x800": ..., "unknown": .... — DomeTune
– DomeTune, Commented Mar 10, 2017 at 14:49
@HarrisWeinstein I am sorry, but I am new to front-end web development & JavaScript as well. One of my project teammates is sick & I must solve the bug. Thanks for the suggestion, I'll start right away. — Abhishek
– Abhishek, Commented Mar 10, 2017 at 14:55

Gorka Hernandez · Accepted Answer · 2017-03-13 11:36:05Z

1

product_image_urls is not an array, you can't loop over it with ng-repeat. You just need to access the property for each product:

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

UPDATE

This answer assumes that the provided JSON is properly formatted. 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"
    }
}

UPDATE 2:

It seems the returned JSON is not properly parsed, if you just need to access the image URLs, you will need to at least parse said property accordingly:

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

Controller:

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

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

You should definitely take care of this on the back-end though. Or at least, process the data when it comes in, as every property is a string, not a parsed object.

edited Mar 13, 2017 at 11:36

answered Mar 10, 2017 at 14:45

Gorka Hernandez

3,96825 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harris Over a year ago

Conceptually this is a good direction, but unfortunately products is malformed in the original code. You should include an addition for that to make it syntactically/semantically correct and therefore compatible with your solution.

Gorka Hernandez Over a year ago

@HarrisWeinstein You are absolutely right. The provided JSON is malformed. I've updated the answer with the a correct JSON object that I would assume a proper backend would provide. The question should be updated regardless.

Abhishek Over a year ago

For the backend, it is using json_encode() of PHP on the resultset returned by the MySQL. I tried the solution but it is still not working. I am updating the JSON in the question. Thanks anyway.

Collectives™ on Stack Overflow

Angularjs fetching Nested JSON value

1 Answer 1

UPDATE

UPDATE 2:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

UPDATE 2:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related