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

Я пытаюсь загрузить a .файл JSON в переменную в JavaScript, но я не могу заставить его работать. Это, вероятно, просто небольшая ошибка, но я не могу ее найти.

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

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

поэтому я помещаю все, что находится в {} в контент.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;
    })();

Я запустил его с помощью отладчика chrome, и он всегда говорит мне, что значение переменной JSON является недействительным. Содержание.json находится в том же каталоге, что и .js файл, который вызывает его.

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

4 64
javascript jquery json

4 ответа:

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

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

(у вас тоже был лишний })

26

мое решение, как ответ.здесь, чтобы использовать:

    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))
  })
}
75

для ES6 / ES2015 вы можете импорт как:

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


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

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

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

есть две возможные проблемы:

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

    Я вижу, что вы пытались исправить это с 'async': false. Чтобы проверить, работает ли это, добавьте эту строку в код и проверьте консоль вашего браузера:

    console.log(['json', json]);

  2. в путь может быть неправильным. Используйте тот же путь, который вы использовали для загрузки сценария в HTML-документ. Так что если ваш скрипт js/script.js используйте js/content.json

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

3