Hướng dẫn how do i import local json file data to my javascript variable? - làm cách nào để nhập dữ liệu tệp json cục bộ vào biến javascript của tôi?

150

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng tải tệp .json vào một biến trong JavaScript, nhưng tôi không thể làm cho nó hoạt động. Nó có lẽ chỉ là một lỗi nhỏ nhưng tôi không thể tìm thấy nó.

Mọi thứ đều hoạt động tốt khi tôi sử dụng dữ liệu tĩnh như thế này:

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

Tôi đặt mọi thứ trong

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

8 trong tệp

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

9 và cố gắng tải nó vào biến JavaScript cục bộ như được giải thích ở đây: Tải JSON vào biến.

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

Tôi đã chạy nó với trình gỡ lỗi Chrome và nó luôn cho tôi biết rằng giá trị của biến

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

0 là

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

1. Tệp

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

9 nằm trong cùng thư mục với tệp .js gọi nó.

Tôi đã bỏ lỡ cái gì?

Skylar

9205 Huy hiệu bạc18 Huy hiệu Đồng5 silver badges18 bronze badges

Đã hỏi ngày 23 tháng 1 năm 2013 lúc 16:34Jan 23, 2013 at 16:34

2

Giải pháp của tôi, như đã trả lời ở đây, là sử dụng:

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

Tệp chỉ được tải một lần, các yêu cầu tiếp theo sử dụng bộ đệm.

Chỉnh sửa để tránh bộ nhớ đệm, đây là chức năng trợ giúp từ blogpost này được đưa ra trong các nhận xét, sử dụng mô -đun

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

3: To avoid caching, here's the helper function from this blogpost given in the comments, using the

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

3 module:

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

Đã trả lời ngày 5 tháng 8 năm 2013 lúc 14:24Aug 5, 2013 at 14:24

EhvinceehvinceEhvince

16.3k7 Huy hiệu vàng53 Huy hiệu bạc76 Huy hiệu đồng7 gold badges53 silver badges76 bronze badges

5

Đối với ES6/ES2015, bạn có thể nhập trực tiếp thích:import directly like:

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


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

Nếu bạn sử dụng TypeScript, bạn có thể khai báo mô -đun JSON như:

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

Vì TypeScript 2.9+, bạn có thể thêm -resolvejsonmodule compileroption trong

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

4

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

Đã trả lời ngày 26 tháng 5 năm 2018 lúc 6:38May 26, 2018 at 6:38

Royslittle nhỏ RoyslittleLittle Roys

4.9453 Huy hiệu vàng26 Huy hiệu bạc28 Huy hiệu đồng3 gold badges26 silver badges28 bronze badges

6

Nếu bạn dán đối tượng của mình vào

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

9 trực tiếp, đó là JSON không hợp lệ. Các khóa và giá trị JSON phải được bọc trong các trích dẫn kép (

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

6 không phải

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

7) trừ khi giá trị là số, boolean,

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

1 hoặc composite (mảng hoặc đối tượng). JSON không thể chứa các hàm hoặc giá trị

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

9. Dưới đây là đối tượng của bạn là JSON hợp lệ.and values must be wrapped in double quotes (

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

6 not

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

7) unless the value is numeric, boolean,

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

1, or composite (array or object). JSON cannot contain functions or

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

9 values. Below is your object as valid JSON.

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

Bạn cũng đã có thêm

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

0.

Skylar

9205 Huy hiệu bạc18 Huy hiệu Đồng5 silver badges18 bronze badges

Đã hỏi ngày 23 tháng 1 năm 2013 lúc 16:34Jan 23, 2013 at 16:43

Giải pháp của tôi, như đã trả lời ở đây, là sử dụng:Kevin B

Tệp chỉ được tải một lần, các yêu cầu tiếp theo sử dụng bộ đệm.15 gold badges166 silver badges178 bronze badges

4

Chỉnh sửa để tránh bộ nhớ đệm, đây là chức năng trợ giúp từ blogpost này được đưa ra trong các nhận xét, sử dụng mô -đun

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

3:

var json = []
fetch('./content.json').then(response => json = response.json())

Đã trả lời ngày 5 tháng 8 năm 2013 lúc 14:24Jan 27, 2021 at 16:04

Ehvinceehvincelafeber

16.3k7 Huy hiệu vàng53 Huy hiệu bạc76 Huy hiệu đồng1 gold badge26 silver badges29 bronze badges

Đối với ES6/ES2015, bạn có thể nhập trực tiếp thích:

Nếu bạn sử dụng TypeScript, bạn có thể khai báo mô -đun JSON như:

Vì TypeScript 2.9+, bạn có thể thêm -resolvejsonmodule compileroption trong var json = require('./data.json'); //with path 4

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

Đã trả lời ngày 26 tháng 5 năm 2018 lúc 6:38

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

0

Royslittle nhỏ RoyslittleNov 27, 2018 at 14:49

4.9453 Huy hiệu vàng26 Huy hiệu bạc28 Huy hiệu đồngArnaud M.

Nếu bạn dán đối tượng của mình vào

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

9 trực tiếp, đó là JSON không hợp lệ. Các khóa và giá trị JSON phải được bọc trong các trích dẫn kép (

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

6 không phải

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

7) trừ khi giá trị là số, boolean,

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

1 hoặc composite (mảng hoặc đối tượng). JSON không thể chứa các hàm hoặc giá trị

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

9. Dưới đây là đối tượng của bạn là JSON hợp lệ.1 silver badge6 bronze badges

0

Bạn cũng đã có thêm

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

0.

1. Đã trả lời ngày 23 tháng 1 năm 2013 lúc 16:43

   Kevin Bkevin b

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

   1

2. 94,6K15 Huy hiệu vàng166 Huy hiệu bạc178 Huy hiệu đồng

   Một giải pháp mà không cần hoặc FS:

Đã trả lời ngày 27 tháng 1 năm 2021 lúc 16:04Jan 23, 2013 at 16:38

LaFeberlafeBerAaron Digulla

2.5851 Huy hiệu vàng26 Huy hiệu bạc29 Huy hiệu đồng104 gold badges583 silver badges807 bronze badges

1

Mô-đun Node.js tích hợp FS sẽ làm điều đó không đồng bộ hoặc đồng bộ tùy thuộc vào nhu cầu của bạn.

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

2

Bạn có thể tải nó bằng

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

1

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

3

Output:

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

4

Không đồng bộJun 10, 2020 at 19:47

Ank_247shbmAnk_247shbmAnk_247shbm

Đồng bộ7 silver badges17 bronze badges

3

Đã trả lời ngày 27 tháng 11 năm 2018 lúc 14:49

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

5

Arnaud M.arnaud M.May 19, 2021 at 10:56

1191 Huy hiệu bạc6 Huy hiệu đồngKailash

Có hai vấn đề có thể xảy ra:1 silver badge4 bronze badges

AJAX không đồng bộ, vì vậy

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

0 sẽ không được xác định khi bạn trở về từ chức năng bên ngoài. Khi tệp đã được tải, chức năng gọi lại sẽ đặt

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

0 thành một số giá trị nhưng tại thời điểm đó, không ai quan tâm nữa.
In 2022, we have import assertions api for import json file in js file.

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

6

Tôi thấy rằng bạn đã cố gắng khắc phục điều này với

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

4. Để kiểm tra xem điều này có hoạt động hay không, hãy thêm dòng này vào mã và kiểm tra bảng điều khiển của trình duyệt:

Con đường có thể sai. Sử dụng cùng một đường dẫn mà bạn đã sử dụng để tải tập lệnh của mình trong tài liệu HTML. Vì vậy, nếu tập lệnh của bạn là

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

5, hãy sử dụng

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

6

Một số trình duyệt có thể cho bạn thấy URL nào họ đã cố gắng truy cập và cách thức đó (mã thành công/lỗi, tiêu đề HTML, v.v.). Kiểm tra các công cụ phát triển của trình duyệt của bạn để xem điều gì sẽ xảy ra.Sep 22 at 13:33

Đã trả lời ngày 23 tháng 1 năm 2013 lúc 16:38

Aaron Digullaaaron Digulla

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

7

Phù bằng vàng 314K104Oct 9 at 17:01

Làm cách nào để gán JSON cho một biến?

Làm thế nào sử dụng tệp dữ liệu JSON trong JavaScript?

Làm thế nào đọc dữ liệu từ tệp JSON và chuyển đổi nó thành một đối tượng JavaScript?

Phương pháp nào chuyển đổi dữ liệu JSON thành JavaScript?