jQuery Loop JSON Issue

Question

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

you don't need a loop if you're only using it for one element wty.wty_upgrade[0].length — wirey00
– wirey00, Commented Sep 18, 2014 at 16:21
where do you get your javascript object from? How is it getting passed into the function? do a console.log(wty) to see what's in there - where is it failing? I'm going to assume it's wty.wty_upgrade[0].mth[0] here - try just wty.wty_upgrade[0].mth — wirey00
– wirey00, Commented Sep 18, 2014 at 16:23

epascarello · Accepted Answer · 2014-09-18 16:27:02Z

2

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

}

answered Sep 18, 2014 at 16:27

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Ruby Blood · Accepted Answer · 2014-09-18 16:24:02Z

0

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

answered Sep 18, 2014 at 16:24

Ruby Blood

111 bronze badge

Comments

Birgit Martinelle · Accepted Answer · 2014-09-18 16:41:39Z

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!

@epascarello not sure what you mean - I considered this to be a place to solve problems? i made a suggestion on how to address the issue. my solution does not violate any best practices that I am aware of and was meant to be useful/helpful. i didn't mean to step on your toes ...
Second TD had logic, you are outputting a string from the JSON. AKA, it should be WtyYears which was wty/12

Collectives™ on Stack Overflow

jQuery Loop JSON Issue

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related