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
– Claudio Redi, Commented Apr 2, 2012 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
– GermanMan, Commented Apr 2, 2012 at 19:31
Yeah, sorry. I wanted to say dataType = "script" as @Roman Bataev pointed out — Claudio Redi
– Claudio Redi, Commented Apr 2, 2012 at 19:39

Roman Bataev · Accepted Answer · 2012-04-02 19:24:21Z

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 2, 2012 at 19:24

answered Apr 2, 2012 at 19:04

Roman Bataev

9,3632 gold badges23 silver badges15 bronze badges

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

3 Comments

GermanMan Over a year ago

I have MAMP and all the files are under htdocs. Ok thanks, I'll try it.

GermanMan Over a year ago

the .js file won't load if I remove the "window.cars = " and the last semi-colon.

GermanMan Over a year ago

I add 'script' and the file loaded but no data was rendered. Any other ideas?

j08691 · Accepted Answer · 2012-04-02 19:08:49Z

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 2, 2012 at 19:08

j08691

208k33 gold badges269 silver badges281 bronze badges

3 Comments

GermanMan Over a year ago

Yep!, but the file has to be external. Any ideas on how to do that?

j08691 Over a year ago

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 Over a year ago

Hope I was able to help. Was the problem the server sending the JSON or the jQuery?

Community · Accepted Answer · 2017-05-23 10:34:38Z

0

See jQuery SyntaxError: Unexpected token =.

JavaScript string lines must be end with .

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Apr 2, 2012 at 18:59

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Collectives™ on Stack Overflow

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

JSON FILE cars.js (local file)

HTML

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JSON FILE cars.js (local file)

HTML

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related