Yerel JSON dosyasını değişkene yükleyin

Javascript'te bir değişkene .json dosyası yüklemeye çalışıyorum, ancak çalışmasını sağlayamıyorum. Muhtemelen küçük bir hata ama bulamıyorum.

Statik verileri şöyle kullandığımda her şey yolunda gidiyor:

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

{}Bir content.jsondosyadaki her şeyi koydum ve burada açıklandığı gibi yerel bir JavaScript değişkenine yüklemeye çalıştım: json'u değişkene yükleyin .

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

Chrome hata ayıklayıcısı koştum ve her zaman değişkeninin değeri söylüyor jsonolduğunu null. content.jsonDiyor .js dosyasıyla aynı dizinde dosya bulunduğu.

Ne kaçırdım?

Nesnenizi content.jsondoğrudan içine yapıştırdıysanız , geçersiz JSON'dur. Değer sayısal, boole veya bileşik (dizi veya nesne) olmadığı sürece JSON anahtarları ve değerleri çift tırnak ( "değil ') içine alınmalıdır null. JSON, işlevler veya undefineddeğerler içeremez . Aşağıda, nesneniz geçerli JSON olarak verilmiştir.

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

Bir de fazladan vardı }.

Benim çözümüm, burada cevaplandığı gibi , kullanmaktır:

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

Dosya yalnızca bir kez yüklenir, diğer istekler önbellek kullanır.

düzenle Önbelleğe almayı önlemek için, modül kullanılarak yorumlarda verilen bu blog gönderisindeki yardımcı işlevi burada bulabilirsiniz fs:

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

ES6 / ES2015 için doğrudan şu şekilde içe aktarabilirsiniz :

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


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

Typescript kullanıyorsanız, json modülünü şu şekilde ilan edebilirsiniz:

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

Typescript 2.9+ sürümünden beri ekleyebileceğiniz - resolJsonModule compilerOptions içindetsconfig.json

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

İki olası sorun vardır:

1. AJAX eşzamansızdır, bu nedenle jsondış işlevden döndüğünüzde tanımsız olacaktır. Dosya yüklendiğinde, geri arama işlevi jsonbir değere ayarlanacaktır , ancak o anda artık kimsenin umurunda değil.

   Bunu düzeltmeye çalıştığını görüyorum 'async': false. Bunun çalışıp çalışmadığını kontrol etmek için bu satırı koda ekleyin ve tarayıcınızın konsolunu kontrol edin:

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

2. Yol yanlış olabilir. Komut dosyanızı HTML belgesine yüklemek için kullandığınız yolu kullanın. Senaryonuz Yani eğer js/script.js, kullanımjs/content.json

   Bazı tarayıcılar size hangi URL'lere erişmeye çalıştıklarını ve bunların nasıl gittiğini gösterebilir (başarı / hata kodları, HTML başlıkları, vb.). Ne olacağını görmek için tarayıcınızın geliştirme araçlarını kontrol edin.

Yerleşik node.js modül fs ya eşzamanlı veya eşzamansız ihtiyaçlarınıza bağlı yapacaktır.

Kullanarak yükleyebilirsiniz var fs = require('fs');

Eşzamansız

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

Senkron

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

~ / My-app / src / db / abc.json dosyasındaki gibi verilen json biçimi için:

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

~ / my-app / src / app.js gibi .js dosyasına içe aktarmak için inorder:

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

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

 export default Arena;

Çıktı:

Ankit Aditi Avani