CODEWITHSUNDEEP
javascriptjqueryajaxjson
Vasileios Tsakalis
Vasileios Tsakalis

Reputation: 1211

get json data with jquery

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

Upvotes: 1

Views: 548

Answers (6)

fabien
fabien

Reputation: 2258

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.

Upvotes: 0

Rodrigo Brun
Rodrigo Brun

Reputation: 121

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

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;

Upvotes: 0

Felix
Felix

Reputation: 38102

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

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

Upvotes: 0

CuriousMind
CuriousMind

Reputation: 34135

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 3

Related Questions