CODEWITHSUNDEEP
javascriptjqueryarraysjson
shutupchigo
shutupchigo

Reputation: 713

Accessing external json file with JavaScript

I've an external cars.json file which has json objects.

{
  "Holden": [
    {
      "door": 2,
      "color": "Black",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Black Holden 2 Doors"
    },
    {
      "door": 4,
      "color": "Green",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Green  Holden 4 Doors"
    },
    {
      "door": 6,
      "color": "Blue",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Blue  Holden 6 Doors"
    }
  ],
  "VW": [
    {
      "door": 2,
      "color": "Red",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Red VW 2  Doors"
    },
    {
      "door": 4,
      "color": "Pink",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Pink VW 4 Doors"
    },
    {
      "door": 6,
      "color": "Grey",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Grey VW 6  Doors"
    }
  ],
  "Toyota": [
    {
      "door": 2,
      "color": "Black",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Black  Toyota 2 Doors"
    },
    {
      "door": 4,
      "color": "White",
      "img-url": "https://placehold.it/400x400/ccc/666?text=White Toyota 4 Doors"
    },
    {
      "door": 6,
      "color": "Pink",
      "img-url": "https://placehold.it/400x400/ccc/666?text=Pink  Toyota 6 Doors"
    }
  ]
}

Basically I'm trying to display Holden, VW and Toyota on page load and then when you click on say "Holden" it displays the number of doors that car is available and once you select the doors it displays the "color" that car is available in and finally an image of that car.

My question is, how do I access the jSON object from the external file using .getJSON method?

This is what I have so far:

$.getJSON( "cars.json", function( data ) {
  console.log(data)
});

But the above doesn't output anything.

Thanks.

Upvotes: 1

Views: 237

Answers (3)

ssc-hrep3
ssc-hrep3

Reputation: 16069

You cannot access local files from your web browser. You need to run a web server to access a file. This file should then be hosted on that web server. Locally you would then access this file over the URL http://localhost:8080 where the port depends on your web server.

You could e.g. run an Apache or a Node.js (express) web server.

This is due to security concerns: You do not want a web site to access your locally stored files. Therefore, this is not possible without serving it on a web server.

The path to the file would then be relative to the configured directory web server root. If, for example, the web server points to C:\Users\user1\webserver and you put your JSON file and your website in there, you could access the JSON file in JavaScript with the path http://localhost:8080/cars.json or with a relative path /cars.json.

Upvotes: 1

Abhishek Kulkarni
Abhishek Kulkarni

Reputation: 1767

Try this below:

$.getJSON( "example_file.json", function( data ) {
  Object.keys(data).map(function (item) {
      console.log(item) ---------> This will display Holden, VW and Toyota
   });
});

Upvotes: 1

AyushKatiyar
AyushKatiyar

Reputation: 1030

The File name is a.json Try using:

$.getJSON( "a.json", function( data ) {
  console.log(data)
});

Upvotes: 1

Related Questions