Home/ Questions/Q 7721951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:03:43+00:00

I am trying to loop through this external JSON file(locally stored), but I cannot

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0