Загрузить локальный файл 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;
})();

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

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

Если вы вставили свой объект content.jsonнапрямую, это недействительный JSON. Ключи и значения JSON должны быть заключены в двойные кавычки ( "не '), если значение не является числовым, логическим nullили составным (массив или объект). JSON не может содержать функции или undefinedзначения. Ниже ваш объект как действительный JSON.

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

У вас тоже была доп }.

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

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

Для 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+ вы можете добавить - resolveJsonModule compilerOptions вtsconfig.json

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

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

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

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

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

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

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

Встроенный модуль 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());

Для данного формата json, как в файле ~ / my-app / src / db / abc.json:

  [
      {
        "name":"Ankit",
        "id":1
      },
      {
        "name":"Aditi",
        "id":2
      },
      {
        "name":"Avani",
        "id":3
      }
  ]

Порядок импорта в файл .js, например ~ / my-app / src / app.js:

 const json = require("./db/abc.json");

 class Arena extends React.Component{
   render(){
     return(
       json.map((user)=>
        {
          return(
            <div>{user.name}</div>
          )
        }
       )
      }
    );
   }
 }

 export default Arena;

Вывод:

Ankit Aditi Avani