can't fetch data from json with jquery ajax

Question

I just started learning json using jquery and I'm having some difficulties, I've spent two days, I've followed lots of tutorial both on youtube and blogs but what they show isn't what I have in my case. Their json is different from mine. They got multiple keys I've only one "news"

the JSON response from the server I get is like this:

{ 
    "news":[
        {
            "id":48927,
            "name": "The title goes right here",
            "url": "www.example.com",
            "date":"16 August 2013",
            "image":"img.example.com\/image.jpg"
        },
        {
            "id": 48908,
            "name":"The title goes right here &#8212; photography",
            "url":"www.example.net",
            "date":"17 August 2013",
            "image":"img.example.net\/image2.jpg"
        }
    ]
}

in reality what I get from the server is more like this:

{"news":[{"id":48927,"name": "The title goes right here","url": "www.example.com","date":"16 August 2013","image":"img.example.com\/image.jpg"},{"id": 48908,"name":"The title goes right here &#8212; photography","url":"www.example.net","date":"17 August 2013","image":"img.example.net\/image2.jpg"}]}

but they both valid! I've already check with JSON LINT.

so what I'm not able to do is to get all the info from JSON and append them in my #posts

I've tried both $.getJSON & $.ajax but I get undefined as response

$(document).ready(function() {

    $.ajax({
        url: 'http://s.example.com/myjson.php',
        data: 'GET',
        dataType: 'json',

        success: function(data){
            $('#posts').append('name: ' + data.news.id + '<br/>');
        },
    });

});

in code above I've tried in append also with data, data.id, data.news, data.url etc. but alway getting undefined or null.

$(document).ready(function() {

    $.getJSON("http://s.example.com/myjson.php", function(data) {
        $.each(data, function(key, value) {
            $("#posts").append("<li>"+data.news+"</li>");
        });
    });


});

same as $.ajax tried different things in append but nothing.

what I want to do is to have all the data id, name, url, date, image appended for everyone of the "things" I've in my json file. But unfortunately I'm stuck at the beginning. It's really frustrating, because it seems so simply but I can't figure out a way to do it. Please help me!!

JSONP is not magic. Your server needs to support JSONP. (unless you're on that domain) — SLaks
– SLaks, Commented Aug 15, 2013 at 16:00
Use chrome dev tools and take a look at the network tab - what is send from the server to your client (your browser)? — surfmuggle
– surfmuggle, Commented Aug 15, 2013 at 16:02
if I use $("#posts").append("<li>"+data.news+"</li>"); with $.getJSON I get [object Object],[object Object] appended to posts — user2686487
– user2686487, Commented Aug 15, 2013 at 16:05

andi · Accepted Answer · 2013-08-15 16:08:20Z

1

Inside your success function, loop over all of the elements in the news array:

for (var i=0; i < data.news.length; i++) {
    $('#posts').append('name: ' + data.news[i].id + '<br/>');
}

answered Aug 15, 2013 at 16:08

andi

6,5421 gold badge20 silver badges43 bronze badges

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

1 Comment

Mark Schultheiss Over a year ago

I would recommend checking if any news exists: data.hasOwnProperty("news") prior to the loop or the news.length will error when news is undefined.

Musa · Accepted Answer · 2013-08-15 16:02:59Z

0

data.news is an array so you have to loop through it to get all the values

$(document).ready(function() {

    $.getJSON("http://s.example.com/myjson.php", function(data) {
        $.each(data.news, function(key, value) {
            $("#posts").append("<li>"+value.id+"</li>");
        });
    });


});

answered Aug 15, 2013 at 16:02

Musa

97.9k17 gold badges123 silver badges144 bronze badges

2 Comments

user2686487 Over a year ago

wow! thanks! this works great!! that's exactly what I was trying to do.

Mark Schultheiss Over a year ago

This will receive Cannot read property 'length' of undefined unless you check for news first (if none exist) with if (data.hasOwnProperty("news") $.each(...

SLaks · Accepted Answer · 2013-08-15 16:01:38Z

0

In your JSON, news is an array.

You need to get the property from an element in the array:

data.news[42].id

You will need to figure out which element to get.

answered Aug 15, 2013 at 16:01

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

can't fetch data from json with jquery ajax

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related