Доступ к внешнему json файлу с JavaScript

Question

У меня есть внешний автомобиль. json файл с json объектами.

{
  "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"
    }
  ]
}

В основном я пытаюсь отобразить Holden, VW и Toyota при загрузке страницы, а затем при нажатии скажем, «Холден», он отображает количество дверей, в которых находится автомобиль, и после выбора дверей он отображает «цвет», в котором доступен автомобиль, и, наконец, изображение этого автомобиля.

У меня вопрос, как мне получить доступ к объекту jSON из внешнего файла, используя метод .get JSON?

Это то, что я до сих пор:

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

Но вышесказанное ничего не выводит.

Спасибо.

Answer 1

Попробуйте это ниже:

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

Answer 2

Вы не можете получить доступ к локальным файлам из вашего веб-браузера. Вам нужно запустить веб-сервер для доступа к файлу. Этот файл должен быть размещен на этом веб-сервере. Локально вы можете получить доступ к этому файлу по URL http://localhost: 8080 , где порт зависит от вашего веб-сервера.

Например, вы можете запустить Apache или Node.js ( express) веб-сервер.

Это связано с соображениями безопасности: вы не хотите, чтобы веб-сайт имел доступ к локально сохраненным файлам. Таким образом, это невозможно без обслуживания на веб-сервере.

Путь к файлу будет относиться к настроенному веб-серверу каталогов root. Если, например, веб-сервер указывает на C:\Users\user1\webserver и вы поместили туда свой файл JSON и свой веб-сайт, вы можете получить доступ к файлу JSON в JavaScript по пути http://localhost:8080/cars.json или по относительному пути /cars.json.

Answer 3

Имя файла a.json Попробуйте использовать:

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