โหลดไฟล์ 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 อยู่แฟ้มในไดเรกทอรีเดียวกันกับแฟ้ม .js ที่เรียกมันว่าnullcontent.json

ฉันพลาดอะไร?

หากคุณวางวัตถุลงใน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+ คุณสามารถเพิ่ม - คอมไพเลอร์fixJsonModule ตัวเลือกใน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