JSON + Jquery. What am I doing wrong? Simple output of JSON not working

Question

I am trying to loop through this external JSON file(locally stored), but I cannot get it to read the values and keys properly. What am I doing wrong?

This is driving me crazy and I have tried a million combinations of markup and have tried other methods, but I keep ending up in the same place.

Really appreciate any help.

Also the code does not output

JSON FILE cars.js (local file)

window.cars = { 

    "compact": [

        { "title": "honda", 
          "type": "accord", 
          "thumbnail": "accord_t.jpg", 
          "image": "accord_large.jpg" }, 

        { "title": "volkswagon", 
          "type": "rabbit",
          "thumbnail": "rabbit_t.jpg",    
          "image": "volkswagon_large.jpg" } 

    ],

    "trucks": [

        { "title": "Ford", 
          "type": "f-150", 
          "thumbnail": "ford_t.jpg", 
          "image": "chevy_large.jpg" },

        { "title": "GMC", 
          "type": "silverado", 
          "thumbnail": "gmc_t.jpg", 
          "image": "gmc_large.jpg" }

    ]

};

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> 
$(document).ready(function(){ 

$.ajax ({      

url: 'cars.js',      
type: 'get', 
dataType: 'json',  
error: function(result){ alert('No Dice')},
success: function(result){

    $('body').append('<div class="main_wrapper"></div><ul>');

        $.each(cars.trucks, function( k, v){

        $('ul').append('<li class="trucks"><img src="' + v.k[1].thumbnail + '" />
                <h1>Title:' +  v.k[1].title + ' </h1>
                <h2>Type: ' + v.k[1].type + '</h2></li>');
        });

        $.each(cars.compact, function( k, v){

       $('ul').append('<li class="compact"><img src="' + v.k[0].thumbnail + '" />
                <h1>Title:' +  v.k[0].title + ' </h1>
                 <h2>Type: ' + v.k[0].type + '</h2></li>');
       });

}

});

});
</script>
</head>
<body>
</body>
</html>

Thanks in advance!

What if you try datatype = 'text/javascript'? In any case I'd say you're misusing the ajax function and the result is not json. You're not calling any server logic, just loading an js file — Claudio Redi, Apr 02 '12 at 18:57
Not working. The json file does not load if I do the dataType to text/javascript. The js file has json data. — GermanMan, Apr 02 '12 at 19:31
Yeah, sorry. I wanted to say dataType = "script" as @Roman Bataev pointed out — Claudio Redi, Apr 02 '12 at 19:39

Roman Bataev · Accepted Answer · 2012-04-02T19:24:21.850

1

First, make sure your web server is configured properly, so it actually returns the content of static cars.js file. Second, remove "windows.cars = " and semicolon from the file. You are loading data, not a script, so it's got to be pure json. Then, in success function result will be your json object, so should be able to access result.trucks and result.compact properties (not cars.trucks / cars.compact)

UPDATE: After further reading on dataType setting at http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings, I think you should be able to get you code working if you change dataType from "json" to "script".

edited Apr 02 '12 at 19:24

answered Apr 02 '12 at 19:04

Roman Bataev

9,287
2
21
15

I have MAMP and all the files are under htdocs. Ok thanks, I'll try it. – GermanMan Apr 02 '12 at 19:13
the .js file won't load if I remove the "window.cars = " and the last semi-colon. – GermanMan Apr 02 '12 at 19:41
I add 'script' and the file loaded but no data was rendered. Any other ideas? – GermanMan Apr 02 '12 at 19:42

score 1 · Answer 2 · answered Apr 02 '12 at 19:08

1

Is this what you're after: jsFiddle example.

It looks like you were mixing up jQuery's .each() with regular a JavaScript for...in loop. also you had some white space that might have been an issue in your loops.

jQuery:

$.each(cars.trucks, function(k, v) {
    $('ul').append('<li class="trucks"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>');
});
$.each(cars.compact, function(k, v) {
    $('ul').append('<li class="compact"><img src="' + v.thumbnail + '" /><h1>Title:' + v.title + ' </h1><h2>Type: ' + v.type + '</h2></li>');
});

answered Apr 02 '12 at 19:08

j08691

204,283
31
260
272

Yep!, but the file has to be external. Any ideas on how to do that? – GermanMan Apr 02 '12 at 19:32
I didn't see anything wrong with your JSON file. Some of the other comments/answers tell you to make sure you're getting the proper JSON response which in this case I'm assuming you are. My answer is focusing more on manipulating the data your return with rather than making sure the server is sending it properly. – j08691 Apr 02 '12 at 19:34
Hope I was able to help. Was the problem the server sending the JSON or the jQuery? – j08691 Apr 02 '12 at 19:57

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

See jQuery SyntaxError: Unexpected token =.

JavaScript string lines must be end with .

edited May 23 '17 at 10:34

Community

1
1

answered Apr 02 '12 at 18:59

iambriansreed

21,935
6
63
79

JSON + Jquery. What am I doing wrong? Simple output of JSON not working

JSON FILE cars.js (local file)

HTML

3 Answers3