CODEWITHSUNDEEP
javascriptjqueryjson
TheRealPapa
TheRealPapa

Reputation: 4539

jQuery Loop JSON Issue

I tried a few combinations, but I am stuck. Any help is appreciated. How do I read the JSON record here please (is the syntax for the JSON organised well?) I keep getting TypeError: Cannot read property '0' of undefined with the code below and or permutations of it.

JSON:

{
  "wty_upgrade":[{
                    "wty":"Upgrade from 3 to 5 years", 
                    "mth":24, 
                    "pig":3000
                 }, 
                 {
                    "wty":"Upgrade from 3 to 10 years", 
                    "mth":84, 
                    "pig":8000
                 }]
}

CODE:

function LoadWtyUpgPlans(wty) {

    var WtyRow = '';
    var WtyYears = '';

    for (var i = 0; i < wty.wty_upgrade[0].length; i++) { 
        WtyYears = wty.wty_upgrade[0].mth[i] / 12;
        WtyRow +='<tr> \
                    <td> \
                        <input type="hidden" class="smg-wty-up-val" value="' + wty.wty_upgrade[0].mth[i] + '"> \
                        ' + wty.wty_upgrade[0].wty[i] + ' \
                    </td> \
                    <td align="right">' + WtyYears + '</td> \
                    <td align="right">' + wty.wty_upgrade[0].pig[i] + '</td> \
                </tr>';
    };
};

Upvotes: 0

Views: 67

Answers (3)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

You should reconsider the way you iterate through your JSON. Let's say you define your JSON in a data variable like so:

var data = {"wty_upgrade":[{"wty":"Upgrade from 3 to 5 years", "mth":24, "pig":3000}, {"wty":"Upgrade from 3 to 10 years", "mth":84, "pig":8000}]}

Then you can use JQuery to iterate through your wty_upgrade array like this:

 $.each(data.wty_upgrade, function(){

         //EDIT:
         wtyYears = this.mth / 12; //this is the current array entry - first time: {"wty":"Upgrade from 3 to 5 years", "mth":24, "pig":3000}


        WtyRow +='<tr> \
                    <td> \
                        <input type="hidden" class="smg-wty-up-val" value="' + this.mth + '"> \
                        ' +this.mth + ' \
                    </td> \
                    <td align="right">' + wtyYears + '</td> \
                    <td align="right">' + this.pig + '</td> \
                </tr>';
        $("#myTable").append(WtyRow); //you also need to append your row to a table or you'll never see it

    });

EDIT: added the missing division for second TD

http://jsfiddle.net/bmartinelle/m0sc4dqz/2

And, as a best practice, you should not uppercase your variables - also make sure you include var whateverName = so you don't create a global variable!

Upvotes: 0

epascarello
epascarello

Reputation: 207547

You have a couple of issues.

The problem is you are not looping through the array, you are looping through the first index of the array. Second, you are trying to reference the index of the mth and pig. They are not arrays...

function LoadWtyUpgPlans(wty) {

    var WtyRow = '';
    var WtyYears = '';
    var upgrades = wty.wty_upgrade;

    for (var i = 0; i < upgrades.length; i++) {
        console.log("wty: ", upgrades[i].wty);
        console.log("mth: ", upgrades[i].mth);
        console.log("pig: ", upgrades[i].pig);
    }

}

Upvotes: 2

Ruby Blood
Ruby Blood

Reputation: 11

Wrong at wty.wty_upgrade**[0]**.length. ==> wty.wty_upgrade.length

Upvotes: 0

Related Questions