Загрузите локальный файл JSON в переменную

Я пытаюсь загрузить файл .json в переменную в javascript, но я не могу заставить ее работать. Вероятно, это небольшая ошибка, но я не могу ее найти.

Все работает отлично, когда я использую статические данные следующим образом:

var json = {
            id: "whatever", 
            name: "start",
            children: [{
                         "id":"0.9685","name":" contents:queue"},{
                         "id":"0.79281","name":" contents:mqq_error"}}]
        }

Поэтому я поместил все, что в {} в файле content.json, и попытался загрузить его в локальную переменную javascript, как описано здесь: загрузить json в переменную

var json = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/content.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

Я запустил его с хром-отладчиком, и он всегда говорит мне, что значение переменной json равно null. Content.json находится в том же каталоге, что и файл .js, который его вызывает.

Что я пропустил?

Ответы

Ответ 1

Если вы вставили свой объект непосредственно в content.json, это недопустимый json. JSON-ключи И значения должны быть заключены в двойные кавычки (не одиночные!), если только это значение не является числовым или логическим. Ниже будет ваш объект как действительный JSON.

{
  "id": "whatever", 
  "name": "start",
  "children": [{
    "id":"0.9685","name":" contents:queue"},{
    "id":"0.79281","name":" contents:mqq_error"}]
}

(у вас также был дополнительный })

Ответ 2

Мое решение, как здесь ответили, заключается в использовании:

    var json = require('./data.json'); //with path

Файл загружается только один раз, дальнейшие запросы используют кеш.

edit Чтобы избежать кеширования, вот вспомогательная функция из этого поста, приведенная в комментариях с использованием модуля fs:

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}

Ответ 3

Для ES6/ES2015 вы можете импортировать напрямую, например:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'

Если вы используете Typescript, вы можете объявить модуль json следующим образом:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

Начиная с Typescript 2. 9+ вы можете добавить - resolJsonModule compilerOptions в tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}

Ответ 4

Возможны две проблемы:

AJAX является асинхронным, поэтому json будет undefined, когда вы вернетесь из внешней функции. Когда файл был загружен, функция обратного вызова установит json на некоторое значение, но в то время больше никто не заботится.

Я вижу, что вы пытались исправить это с помощью 'async': false. Чтобы проверить, работает ли это, добавьте эту строку в код и проверьте консоль своего браузера:
```
console.log(['json', json]);
```
Путь может быть неправильным. Используйте тот же путь, который использовался для загрузки script в документе HTML. Поэтому, если ваш script равен js/script.js, используйте js/content.json

Некоторые браузеры могут показать вам, к каким URL-адресам они пытались получить доступ и как это происходило (коды успеха/ошибки, заголовки HTML и т.д.). Проверьте свои инструменты разработки браузера, чтобы узнать, что произойдет.

Ответ 5

Встроенный модуль node.js fs сделает это либо асинхронно, либо синхронно, в зависимости от ваших потребностей.

Вы можете загрузить его, используя var fs = require('fs');

Асинхронный

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

синхронный

var json = JSON.parse(fs.readFileSync('./content.json').toString());

Ответ 6

Импортируйте файл JSON с ES6:

import myJson from '/path/to/filename.json'
myJsonString = JSON.stringify(myJson)

Если файл находится в том же каталоге, вы можете использовать

import myJson from './filename.json

До ES6

var json = require('./filename.json');