JSON data appearing as an array

Question

I have some valid JSON as follows

[
    {
        "userFullName": "Tim, Bill",
        "id": "LOt3",
        "organisation": "FAP",
        "loginSystem": "A",
        "userId": 0
    },
    {
        "userFullName": "Bruce, David",
        "id": "LNA",
        "organisation": "ES",
        "loginSystem": "A",
        "userId": 0
    }
]

I am attempting to access the JSON elements in the success of an AJAX call as follows:

success: function (data) {
    console.log('data ' + data);
    $.each(data, function (key, value) {
        console.log('id' + data[key].id);
        $('#selectStaff').append('<option value="' + data[key].id + '">' + data[key].id + '</option>');
    });
}

But data[key].id is returning undefined and if I just print out data[key], I get the individual characters of the array.

selectStaff is the ID of a SELECT.

What am I missing ?? Any help will be much appreciated.

Thanks

Try console.log(data) to see what the data variable contains — Alexander Kuzmin, Nov 08 '13 at 11:21
`typeof data === string`, `typeof($.parseJSON(data)) === object` tada! — Johan, Nov 08 '13 at 11:24
@palaѕн I have tried value.id and have got the same result. — Macky, Nov 08 '13 at 11:25
@AlexanderKuzmin console.log(data) gives me the JSON that I have printed in the question — Macky, Nov 08 '13 at 11:26
Please amend your question to show the rest of the ajax call. You're getting flooded with responses that you need parse data to create an object, when you don't. — Reinstate Monica Cellio, Nov 08 '13 at 11:30

score 2 · Accepted Answer · answered Nov 08 '13 at 11:23

2

well either you have to use JSON.parse(data) or add dataType option to your ajax function, so it knows the reponse is in JSON format and nothing else.

....
 dataType:"json",
success: function (data) {
     javascript: console.log('data ' + data);
     $.each(data, function(key, value) {
     javascript: console.log('id' + data[key].id);
     $('#selectStaff').append('<option value="' + data[key].id+ '">' + data[key].id+ '</option>');
       });
}

or

 success: function (data) {
     javascript: console.log('data ' + data);
     data=JSON.parse(data);
     $.each(data, function(key, value) {
       .......

answered Nov 08 '13 at 11:23

bipen

36,319
9
49
62

I have dataType : json set with the same result. Actually I was using datatype with a lowercase t. Changing it to upper case fixed it. I will accept your answer Bipen. – Macky Nov 08 '13 at 11:27
welcome... yes i was about to comment on @rory's post.. about that `t` in `dataType`..he had it in samll letters...anyways glad it helped.. happy coding.. :) – bipen Nov 08 '13 at 11:40

Rory McCrossan · Answer 2 · 2013-11-08T11:36:15.073

1

Your code works in a Fiddle when data is defined as an object.

Given that you state:

if I just print out data[key], I get the individual characters of the array.

it sounds like the result of your $.ajax call is returning a string, not deserialised JSON. You can use the dataType parameter to force the deserialisation:

$.ajax({
    dataType: 'json',
    // rest of your settings...
});

edited Nov 08 '13 at 11:36

answered Nov 08 '13 at 11:22

Rory McCrossan

331,213
40
305
339

I have datatype" 'json' set in the AJAX call – Macky Nov 08 '13 at 11:25
Your answer was correct as well as incorrect. I had datatype defined just as put it, but it worked after I changed it to dataType. – Macky Nov 08 '13 at 11:34

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

You need to parse json.

http://api.jquery.com/jQuery.getJSON/

http://api.jquery.com/jQuery.parseJSON/

Parse JSON in JavaScript?

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

(The above is taken from http://api.jquery.com/jQuery.getJSON/)

edited May 23 '17 at 10:33

Community

1
1

answered Nov 08 '13 at 11:24

Oxon

4,901
8
40
54

1

Not if he specifies the `dataType` – Johan Nov 08 '13 at 11:24
true. Thats why the first link http://api.jquery.com/jQuery.getJSON/ shows how to set datatype to json. I gave three links for @John to see that there are different ways of doing things. Also he will get more idea about whats going on. Good for research. – Oxon Nov 08 '13 at 11:26

score 0 · Answer 4 · answered Nov 08 '13 at 11:25

try parsing json with jquery:

success: function (data2) {
    var data=jQuery.parseJSON(data2);
    console.log('data ' + data);
    $.each(data, function (key, value) {
        console.log('id' + data[key].id);
        $('#selectStaff').append('<option value="' + data[key].id + '">' + data[key].id + '</option>');
    });
}

score 0 · Answer 5 · answered Nov 08 '13 at 11:26

Check type of your data parameter, you want to receive an object. If it's not an object then you need to parse it.

You can either specify the datatype which handles it for you:

$.ajax({
    datatype: 'json',
    // ...
});

Or you can parse it manually:

if (typeof data === "string") {
    data = $.parseJSON(data);
}

JSON data appearing as an array

5 Answers5