how to get json from a array

Question

I want to know how I can correctly return the data from the following json: pretend i have a url http://test.com/tesdata which gives me the following data:

[{"Identifier":1, "Name":"Test"},
 {"Identifier":2, "Name":"Test"},
 {"Identifier":3, "Name":"Test"}]

So I did the following to get this data in a div:

                $.ajax({ 
    type: 'GET', 
    url: 'http://notgiven', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
        alert("s");
        $.each(data, function(index, element) {
            $('.result').append("a");
        });
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert("jqXHR: " + JSON.stringify(jqXHR));
        alert("textStatus: " + JSON.stringify(textStatus));
        alert("errorThrown: " + JSON.stringify(errorThrown));
    }
});

And i get the following error Unable to parse Json string

Answer 1

Try this:

// create empty object
var json = {};

$.each(data, function(index, element) {
 // for each element, create empty object 
 json[index] = {};
 // map response data to new json object
 json[index]['id'] = element.Identifier;
 json[index]['name'] = element.Name;
});

the json variable now contains all the information in json format stored convenient in an javascript object :)

In your example this would mean:

$.ajax({ 
  type: 'GET', 
  url: 'http://test.com/tesdata', 
  data: { get_param: 'value' }, 
  dataType: 'json',
  success: function (data) { 

       var json = {};

       $.each(data, function(index, element) {
         json[index] = {};
         json[index]['id'] = element.Identifier;
         json[index]['name'] = element.Name;
         // don't know exactly what you try to do here, but let's append this data to '.result'
        $('.result').append("<span id='" + element.Identifier + "'>" + element.Name + "</span>"); 

       });   

  }
});

Please note that if all you want is to append this values to some div it is not necessary to do the whole json conversion. In this case you can just do

 success: function (data) { 
               $.each(data, function(index, element) {
                $('.result').append("<span id='" + element.Identifier + "'>" + element.Name + "</span>"); 

  }); 

}

Answer 2

As I suggested in the comments It's probably a cross-origin issue. You can't access data/scripts from a different origin meaning same protocol (http/https) same domain (mydomain.com) same port (usual omitted defaults to :80)

So origin of: http://localhost:8080/data != https://localhost:8080/data
   origin of: http://mydomain.org/data   != http://localhost/data
   origin of: http://mydomain.org/data   != http://localhost/data
   origin of: http://localhost/data      == http://local

host/somethingelse

Still I'm not 100% sure. But a first step in resolving the issue is proper debugging.

It is possible to debug using xcode But if you want to try without. Define an error handler. (check this fiddle)

You'll see it's not working because of the cross-origin issue. (and its a dummy url) Sadly you can't capture those cross origin error's. You can only see them in the console.. (at least I haven't been able to yet)

But now the good news!

PhoneGap apps aren't limited to the cross-origin policy! So if deployed the issue should be resolved.

If you have access to the backend I have an easy fix for this too. You should set the Access-Control-Allow-Origin: * header to enable CORS (cross origin resource sharing)

NOTE: for development this shouldn't be a problem, for production I advice setting a fixed url or if not needed remove it.

EDIT: So it isn't a cross origin issue. as the error sais: Unable to parse Json string

So you check what's inside the jqXHR response. Look at the raw data verify if it's valid. 95% chance it isn't because my best bet is the jquery json-parser is pretty solid.

Answer 3

You need to call JSON.parse function before any operation on json data with js.

$.ajax({ 
        type: 'GET', 
        url: 'http://test.com/tesdata', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
            var items = JSON.parse(data);
            $.each(items, function(index, element) {
                $('.result').append(element.Id + " " + element.Name);
            });
        }
        });

For IE 6 and 7 you have to include json2.js file for supporting JSON.parse function.