get json data with jquery

Question

Hey guys I would like to know how can I get json data with ajax call.

I tried this but seems won't work :P

First I created a JavaScript file to put inside my json data elements :

var food = [
             {'name':'bread', 'price':'7,25'},
             {'name':'fish', 'price':'9,00'}
           ];

I saved it as food.js.

Then I tried to make an ajax call from an another file, this is my code :

$(document).ready(function(){

    $.ajax({
        async: false,
        dataType: "json",
        type:'GET',
        url:"food.js",
        success: function(data) {

            var result = data.food.name;
            alert(result);

        });

    }});

});

Any ideas?

Thanks in advance ;)

Answer 1

Firstly, you have a syntax error in your example - there's too many closing braces on the $.ajax call, although I guess that's just a typo.

In your JSON, food is an array, so you need to use an indexer to get the properties of the objects within it:

success: function(data) {
    var result = data.food[0].name; // = "bread"
    alert(result);
});

Answer 2

try this

$(document).ready(function() {
    $.ajax({
        async: false,
        dataType: "json",
        type:'GET',
        url:"food.js",
        success: function(data) {
            var result = data.food[0].name;
            alert(result);
        }
   });
});

Answer 3

You need to loop through the returned data since it's an array:

$.each(data,function(i,val) {
    alert(data[i].name);
});

Answer 4

You probably want to use the getJSON function in jquery : http://api.jquery.com/jquery.getjson/

$.getJSON( "food.json", function( data ) {
    //here your callback
}

It will set the datatype to json and the method to GET by default.

You should also use the .json extension and not the js extension for you jsons. And format it like a proper json :

{
    "food": [
        {
            "name": "bread",
            "price": 7.25
        },
        {
            "name": "fish",
            "price": 9.00
        }
    ],
}

You can use this website to help you format jsons : http://www.jsoneditoronline.org/

The way you are trying to call your element won't work. The data you obtain is an array. In the callback, you can try this :

console.log(data)
console.log(data.food)
console.log(data.food[0])
console.log(data.food[0].name)
console.log(data.food[0].price)

Finally, note that you formatted your numbers with a coma, this is not the way you format numbers in javascript. Use a dot, that way you'll be able to manipulate it as a number.

Answer 5

I love how people are completely ignoring the fact that your "food.js" is not a JSON string, it's JavaScript code. This might work on old-school eval-based "JSON", but with jQuery AJAX your target file should be plain JSON. Remove the var food = from the start, and the ; from the end.

Then you can access data.food[0].name;

Answer 6

In this case, you are trying to get an another javascript file via ajax. For do this, you can "include" your script ( of food.js ) in your page, using Ajax GetScript ( see here ).

Your code is mucth better when you request directly json files.