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
– Alexander Kuzmin, Commented Nov 8, 2013 at 11:21
typeof data === string, typeof($.parseJSON(data)) === object tada! — Johan
– Johan, Commented Nov 8, 2013 at 11:24
@palaѕн I have tried value.id and have got the same result. — Macky
– Macky, Commented Nov 8, 2013 at 11:25
@AlexanderKuzmin console.log(data) gives me the JSON that I have printed in the question — Macky
– Macky, Commented Nov 8, 2013 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
– Reinstate Monica Cellio, Commented Nov 8, 2013 at 11:30

bipen · Accepted Answer · 2013-11-08 11:23:11Z

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 8, 2013 at 11:23

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Macky Over a year ago

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.

bipen Over a year ago

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.. :)

Rory McCrossan · Accepted Answer · 2013-11-08 11:36:15Z

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 8, 2013 at 11:36

answered Nov 8, 2013 at 11:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Macky Over a year ago

I have datatype" 'json' set in the AJAX call

Macky Over a year ago

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.

Vicky Gonsalves · Accepted Answer · 2013-11-08 11:25:16Z

0

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

answered Nov 8, 2013 at 11:25

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

Emil A. · Accepted Answer · 2013-11-08 11:26:34Z

0

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

answered Nov 8, 2013 at 11:26

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:33:29Z

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, 2017 at 10:33

CommunityBot

11 silver badge

answered Nov 8, 2013 at 11:24

Oxon

5,0718 gold badges43 silver badges56 bronze badges

2 Comments

Johan Over a year ago

Not if he specifies the dataType

Oxon Over a year ago

true. Thats why the first link 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.

Collectives™ on Stack Overflow

JSON data appearing as an array

5 Answers 5

2 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related