Cannot access javascript json properties?

Question

I have a json object that has 4 MAKEs, 4 MODELs, 4 YEARs, 4 STATEs, 4 PLATEs, 4 COLORs properties:

Object {MAKE1="xxx ", MODEL1='xxx', YEAR1='xxx', STATE1='xxx', PLATE1='xxx', COLOR1='xxx', MAKE2='xxx', MODEL2='xxx' ,..., MAKE3='xx',..., MAKE4='xxx',...,COLOR4='xxx'}

my javascript:

 function displayPP() {
            $.getJSON('/ipad/api/formpp/' + personId + '/getmemberlatestpp', function(data) {

                for (var index=1; index<5; index++) {
                    $('#ppBody').append('<tr>');
                    var MAKE = 'MAKE' + index, MODEL = 'MODEL' + index, YEAR = 'YEAR' + index, STATE = 'STATE' + index, PLATE = 'PLATE' + index, COLOR= 'COLOR' + index;
                    var HTML = '<td>' + data.MAKE + '</td><td>' + data.MODEL + '</td><td>' + data.YEAR + '</td><td>' + data.STATE + '</td><td>' + data.PLATE + '</td><td>' + data.COLOR + '</td>';
                    $('#ppBody').append(HTML);
                    $('#ppBody').append('</tr>');      
                }                   
            });
    }

All the json properties returned as undefined. Why is that? if i do data.MAKE1, data.MAKE2 ... it works fine.

How do you expect to access `data.MAKE` when you have `MAKE1` ? — php_nub_qq, Aug 14 '13 at 21:01
I recommend using Fiddler to see the actual returns JSON. If your using something like Microsoft technologies, a lot of the time the initial response is wrapped so you would actually have to do `data.d` to get the returned JSON. — Justin, Aug 14 '13 at 21:03
(And duplicated countless times across SO in other questions, as high-rep users should know.) — Dave Newton, Aug 14 '13 at 21:04
You can see how to access it in the answers but this is ugly. You should have a different object for each car instead of having them all in one object with numbers behind. Example `Object {{"make":"xxx","model":"xxx"},{"make":"xxx","model":"xxx"}}` as @Quentin has suggested in his answer — php_nub_qq, Aug 14 '13 at 21:05

score 7 · Accepted Answer · answered Aug 14 '13 at 21:01

7

var foo = "X"; data.foo will refer to the foo property, not the X property.

If you want to use a variable to represent a property name, then you have to use square bracket notation (which takes a string rather than an identifier).

data[foo]

That said, never have things which share a name save for a numeric counter on the end. Use proper data structures:

[ 
    { 
        "make": "xxx", 
        "model": "xxx", 
        "year": "xxx", 
        "state": "xxx", 
        "plate": "xxx",
        "color": "xxx"
    },
    { 
        "make": "xxx", 
        "model": "xxx", 
        "year": "xxx", 
        "state": "xxx", 
        "plate": "xxx",
        "color": "xxx"
    }
]

answered Aug 14 '13 at 21:01

Quentin

914,110
126
1,211
1,335

3

Don't know who downvoted. This is correct. `data[MAKE]` is what the OP is looking for. (Or at least data.MAKE1, whichever comes first) – Dave Chen Aug 14 '13 at 21:02
Thanks, exactly what i'm looking for. Will mark as solved when it's allowed. – iCanObjSeeSharp Aug 14 '13 at 21:05
I know but this table was poorly designed that way and I just need some quick data. – iCanObjSeeSharp Aug 14 '13 at 21:07
@DaveChen I downvoted because I thought that this was not relevant to the question but then it hit me so I withdrew my downvote and even upvoted `:P` – php_nub_qq Aug 14 '13 at 21:09

score 4 · Answer 2 · edited Aug 14 '13 at 21:05

4

You can access your properties using a string using bracket notation

data['MAKE' + index]

edited Aug 14 '13 at 21:05

ComFreek

29,044
18
104
156

answered Aug 14 '13 at 21:03

dm03514

54,664
18
108
145

score 1 · Answer 3 · answered Aug 14 '13 at 21:06

You are creating a variable like MAKE = 'MAKE1', but you aren't actually using it when you use data.MAKE. This will try to access a property named 'MAKE' from data. To lookup a variable from a string you need to use bracket notation, like data[MAKE].

Here is the corrected version which replaces all of the incorrect dot property lookups:

function displayPP() {
    $.getJSON('/ipad/api/formpp/' + personId + '/getmemberlatestpp', function(data) {
        for (var index=1; index<5; index++) {
            $('#ppBody').append('<tr>');
            var MAKE = 'MAKE' + index, MODEL = 'MODEL' + index, YEAR = 'YEAR' + index, STATE = 'STATE' + index, PLATE = 'PLATE' + index, COLOR= 'COLOR' + index;
            var HTML = '<td>' + data[MAKE] + '</td><td>' + data[MODEL] + '</td><td>' + data[YEAR] + '</td><td>' + data[STATE] + '</td><td>' + data[PLATE] + '</td><td>' + data[COLOR] + '</td>';
            $('#ppBody').append(HTML);
            $('#ppBody').append('</tr>');      
        }                   
    });
}

Cannot access javascript json properties?

3 Answers3