how to loop through json element tag

Question

im new to json. i done my study about json a little while ago but i still have very little knowledge on how to control json output. i made a cart that get json data from the controller using ajax, and i tried to parse the output. eventually i failed to get a result. its stated undefined.

here is my draft

loop hypermart json element { 

    loop productname element{
        get price based on productname + price
    }
}

so every mart will have the same product name and different price on each mart. how can i achieve this kind of output? im cornered by question that i yet to have the answer.

this is the json data

[{
    "productId":1002,
    "productName":"Moghul Faiza Basmathi",
    "productPic":"",
    "brandName":"Faiza",
    "productVolume":"5kg",
    "barcode":"9555035703811",
    "manufacturer":"Faiza",
    "createdBy":{
        "userId":2,
        "username":"pak.ijan",
        "password":"********",
        "fullName":"Hizan Ahmad",
        "sessionId":"********"},
        "dateCreated":"Jul 9, 2014 3:52:08 AM",
        "modifiedBy":{
            "userId":2,"username":"pak.ijan",
            "password":"********",
            "fullName":"Hizan Ahmad",
            "sessionId":"********"},
            "lastModified":"Jul 9, 2014 3:52:08 AM",
            "status":1,
    "price":[{
        "priceId":0,
        "hypermart":{
            "hypermartId":1,
            "hypermartName":"Tesco",
            "hypermartLogo":"",
            "status":1},
        "priceDate":"Jul 13, 2014 12:17:46 PM",
        "productPrice":0.0,"status":1},
        {"priceId":1,
        "hypermart":{
            "hypermartId":2,
            "hypermartName":"Giant",
            "hypermartLogo":"",
            "status":1},
        "priceDate":"Jul 13, 2014 12:17:46 PM",
        "productPrice":0.0,"status":1},
        {"priceId":2,
        "hypermart":{
            "hypermartId":3,
            "hypermartName":"Jusco",
            "hypermartLogo":"",
            "status":1},
        "priceDate":"Jul 13, 2014 12:17:46 PM",
        "productPrice":0.0,
    "status":1}],
    "tag":"beras faiza basmathi moghul",
    "description":"Moghul Faiza Basmathi",
    "category":{
        "categoryId":7,
        "descEn":"Food",
        "descMy":"Makanan"}
}]

If you are capable enough to write JavaScript and hit a server via Ajax to get a response, you should realize that your jquery ajax call already parses the response and you have a plain old JavaScript object. There is no JSON there anymore. So pull your data from your **JavaScript** object. Again, it is not JSON anymore. Is your question how to navigate a JavaScript object? — Ray Toal, Jul 13 '14 at 04:37
By the way, what is "Moghul Faiza Basmathi" :-) ? Some sort of rice? — peter_the_oak, Jul 13 '14 at 06:05

score 1 · Answer 1 · edited May 23 '17 at 11:50

Say you get a data string from your server, like

var myDataJson = [{
  "productId":1002,
  ...
  "price":[{
    "priceId":0,
    "hypermart":{
        "hypermartId":1,
        "hypermartName":
  ...
 }]

Now it is simple. You have to parse myDataJson. As a result, you immediately get a real JavaScript object. Remember, JSON means JavaScript Object Notation.

So one contemporary way to parse is:

try {
  var myCartData = JSON.parse(myDataJson);
} catch (ex) {
  ...
}

Now you can access your real Javascript object like every other Javascript object:

for (key in myCartData) {
   var product = myCartData[key];
   var price = product['price'][0]['productPrice'];
   ...
}

Possibly you should look for further methods to parse your JSON string as JSON.parse() is not supported by old browsers. Here are many ideas: Parse JSON in JavaScript?

Bhushankumar Lilapara · Answer 2 · 2014-07-13T07:44:03.030

It is very easy to loop out one by one element recursive. For that you should stat with learn from scratch and spend some time in it.

I am try to solve it for you.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var data = [
    {
        "productId": 1002,
        "productName": "Moghul Faiza Basmathi",
        "productPic": "",
        "brandName": "Faiza",
        "productVolume": "5kg",
        "barcode": "9555035703811",
        "manufacturer": "Faiza",
        "createdBy": {
            "userId": 2,
            "username": "pak.ijan",
            "password": "********",
            "fullName": "Hizan Ahmad",
            "sessionId": "********"
        },
        "dateCreated": "Jul 9, 2014 3:52:08 AM",
        "modifiedBy": {
            "userId": 2,
            "username": "pak.ijan",
            "password": "********",
            "fullName": "Hizan Ahmad",
            "sessionId": "********"
        },
        "lastModified": "Jul 9, 2014 3:52:08 AM",
        "status": 1,
        "price": [
            {
                "priceId": 0,
                "hypermart": {
                    "hypermartId": 1,
                    "hypermartName": "Tesco",
                    "hypermartLogo": "",
                    "status": 1
                },
                "priceDate": "Jul 13, 2014 12:17:46 PM",
                "productPrice": 100,
                "status": 1
            },
            {
                "priceId": 1,
                "hypermart": {
                    "hypermartId": 2,
                    "hypermartName": "Giant",
                    "hypermartLogo": "",
                    "status": 1
                },
                "priceDate": "Jul 13, 2014 12:17:46 PM",
                "productPrice": 250,
                "status": 1
            },
            {
                "priceId": 2,
                "hypermart": {
                    "hypermartId": 3,
                    "hypermartName": "Jusco",
                    "hypermartLogo": "",
                    "status": 1
                },
                "priceDate": "Jul 13, 2014 12:17:46 PM",
                "productPrice": 370,
                "status": 1
            }
        ],
        "tag": "beras faiza basmathi moghul",
        "description": "Moghul Faiza Basmathi",
        "category": {
            "categoryId": 7,
            "descEn": "Food",
            "descMy": "Makanan"
        }
    }
];

$(document).ready(function(){   

    var martDict = getPriceByName("Moghul Faiza Basmathi")
    console.log(martDict);
    var martDetail = "martDetail";
    var hypermartName = "hypermartName";
    var martPrice = "martPrice";

    for(i in martDict){
        //console.log(martDict[i]);
        //console.log(martDict[i][martDetail]);
        //console.log(martDict[i][martDetail][hypermartName]);
        var martName = martDict[i][martDetail][hypermartName];
        var price = martDict[i][martPrice]
        console.log(martName+" -> "+price);
    }
});

function getPriceByName(name){
    var productName = "productName";
    var price = "price";
    var hypermart = "hypermart";
    var productPrice = "productPrice";
    var martDict = [];
    //console.log(name);
    for(i in data){
        if(data[i][productName] == name){
            //console.log(data[i][productName]);
            var priceList = data[i][price];
            //console.log(priceList);
            for(j in priceList){
                //console.log(priceList[j]);
                //console.log(priceList[j][hypermart])
                var martDetail = priceList[j][hypermart];
                var martPrice = priceList[j][productPrice];
                martDict.push({"martDetail":martDetail,"martPrice":martPrice});
            }
        }
    }

    return martDict;
}
</script>

Still if you are not getting your answer elaborate your problem.

I have put all console comment as it is so that you will get better idea by open comments one by one.

enter image description here

how to loop through json element tag

2 Answers2