Завантажте локальний файл 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

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

редагування Щоб уникнути кешування, ось функція помічника з цього блогу, розміщена в коментарях, за допомогою 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+ ви можете додати - resolutionJsonModule compilerOptions в Windowstsconfig.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