Muat file JSON lokal ke dalam variabel

Saya mencoba memuat file .json ke dalam variabel di javascript, tetapi saya tidak bisa membuatnya berfungsi. Ini mungkin hanya kesalahan kecil tetapi saya tidak dapat menemukannya.

Semuanya berfungsi dengan baik ketika saya menggunakan data statis seperti ini:

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

Saya meletakkan semua yang ada di {}dalam content.jsonfile dan mencoba memuatnya ke variabel JavaScript lokal seperti yang dijelaskan di sini: muat json ke variabel .

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

Saya menjalankannya dengan debugger Chrome dan selalu memberi tahu saya bahwa nilai variabelnya jsonadalah null. The content.jsonberkas berada dalam direktori yang sama dengan file js yang menyebutnya.

Apa yang saya lewatkan?

Jika Anda menempelkan objek Anda content.jsonsecara langsung, itu adalah JSON yang tidak valid. Kunci dan nilai JSON harus dibungkus dengan tanda kutip ganda ( "bukan ') kecuali nilainya adalah numerik, boolean null, atau komposit (larik atau objek). JSON tidak boleh berisi fungsi atau undefinednilai. Di bawah ini adalah objek Anda sebagai JSON yang valid.

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

Anda juga punya ekstra }.

Solusi saya, seperti yang dijawab di sini , adalah menggunakan:

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

File dimuat hanya sekali, permintaan lebih lanjut menggunakan cache.

edit Untuk menghindari caching, inilah fungsi helper dari blogpost ini yang diberikan di komentar, menggunakan fsmodul:

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

Untuk ES6 / ES2015 Anda dapat mengimpor langsung seperti:

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


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

Jika Anda menggunakan Typecript, Anda dapat mendeklarasikan modul json seperti:

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

Sejak Typecript 2.9+ Anda dapat menambahkan - resolJsonModule compilerOptions ditsconfig.json

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

Ada dua kemungkinan masalah:

1. AJAX tidak sinkron, jadi jsontidak akan ditentukan saat Anda kembali dari fungsi luar. Saat file telah dimuat, fungsi panggilan balik akan disetel jsonke beberapa nilai tetapi pada saat itu, tidak ada yang peduli lagi.

   Saya melihat bahwa Anda mencoba memperbaikinya dengan 'async': false. Untuk memeriksa apakah ini berfungsi, tambahkan baris ini ke kode dan periksa konsol browser Anda:

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

2. Jalannya mungkin salah. Gunakan jalur yang sama yang Anda gunakan untuk memuat skrip Anda di dokumen HTML. Jadi, jika skrip Anda adalah js/script.js, gunakanjs/content.json

   Beberapa browser dapat menunjukkan kepada Anda URL mana yang mereka coba akses dan bagaimana hasilnya (kode sukses / kesalahan, header HTML, dll). Periksa alat pengembangan browser Anda untuk melihat apa yang terjadi.

Built-in node.js modul fs akan melakukannya secara asinkron atau sinkron tergantung pada kebutuhan Anda.

Anda dapat memuatnya menggunakan var fs = require('fs');

Asinkron

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

Sinkronis

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

Untuk format json yang diberikan seperti pada file ~ / my-app / src / db / abc.json:

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

inorder untuk mengimpor ke file .js seperti ~ / 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;

Keluaran:

Ankit Aditi Avani