CODEWITHSUNDEEP
jqueryjson
GermanMan
GermanMan

Reputation: 103

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

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!

Upvotes: 0

Views: 171

Answers (3)

Roman Bataev
Roman Bataev

Reputation: 9361

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".

Upvotes: 1

j08691
j08691

Reputation: 208002

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

Upvotes: 1

iambriansreed
iambriansreed

Reputation: 22261

See jQuery SyntaxError: Unexpected token =.

JavaScript string lines must be end with .

Upvotes: 0

Related Questions