CODEWITHSUNDEEP
javascriptjqueryjson
Macky
Macky

Reputation: 443

JSON data appearing as an array

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

Upvotes: 1

Views: 84

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 1

Oxon
Oxon

Reputation: 5041

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/)

Upvotes: 0

Emil A.
Emil A.

Reputation: 3445

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

Upvotes: 0

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

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

Upvotes: 0

bipen
bipen

Reputation: 36531

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

Upvotes: 2

Related Questions