Using JSON with Jquery Ajax

Question

I started my hands on training on Jquery AJAX JSON this morning. I have knowledge of Jquery but JSON & Ajax is something new to me.

I have developed a small snippet of code to read JSON file with ajax and show the data values by appending the list.

using following div in body section.

<div id="tabPanelWrapper"></div>

Javascript:

$(document).ready(function() {

    // Calling Ajax Function
    loadContent();                          

});

function loadContent() {
    $.ajax({
       type: "GET",
       url: "data.js",
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        alert("Success");
        $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
}

JSON File:

{
    dashboard: [
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    },
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    }
]
}

Page is throwing 404 error. Please help me with this code.

Thanks in advance | Lokesh Yadav

Yngve B-Nilsen · Accepted Answer · 2011-05-12 11:28:25Z

1

a 404 error is a Page Not found error. I'd try to browse to the data.js file you're trying to access, and maybe try to write out the full url to the file in your .ajax-call.

I.e.

 http://myhost.com/script/data.js

if that's the location of your script.

UPDATE Your error is invalid Json. If you check the error argument in your Error-function, you'd see that.

Try adding quotes around dashboard, and you should be one step further!

And you'll also have to change in your success-method:

 $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
        });

note that I'm looking at post.id and post.name since that is the current item in the $.each enumeration. data.id would look for an id-property next to dashboard in your Json, but that doesn't exist.

edited May 12, 2011 at 11:28

answered May 12, 2011 at 9:44

Yngve B-Nilsen

9,6762 gold badges38 silver badges51 bronze badges

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

2 Comments

Lokesh Yadav Over a year ago

i have one folder named as "js" in root folder so i gave URL: "js/data.js". still giving a error 200

Yngve B-Nilsen Over a year ago

Error 200 is not an error, but Status-code "OK" which means it is now able to access the file.

Jishnu A P · Accepted Answer · 2011-05-12 09:48:08Z

0

change

$.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
});

to

 $.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
 });

defnitely the 404 error is not due to this.

answered May 12, 2011 at 9:48

Jishnu A P

14.4k8 gold badges42 silver badges52 bronze badges

1 Comment

Lokesh Yadav Over a year ago

thanks SuperTramp, i have one folder named as "js" in root folder so i gave URL: "js/data.js". now giving a error 200

mdaguerre · Accepted Answer · 2011-05-12 14:18:52Z

0

Check the URL property. An 404 error is not a json error.

answered May 12, 2011 at 14:18

mdaguerre

1,2771 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using JSON with Jquery Ajax

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related