322

ฉันกำลังพยายามโหลดไฟล์ JSON ในเครื่อง แต่ไม่สามารถใช้งานได้ นี่คือรหัส JavaScript ของฉัน (ใช้ jQuery:

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

ไฟล์ test.json:

{"a" : "b", "c" : "d"}

ไม่มีอะไรปรากฏขึ้นและ Firebug บอกฉันว่าข้อมูลไม่ได้ถูกกำหนด ใน Firebug ฉันเห็นjson.responseTextและมันดีและใช้ได้ แต่มันแปลกเมื่อฉันคัดลอกบรรทัด:

 var data = eval("(" +json.responseText + ")");

ในคอนโซลของ Firebug มันใช้งานได้และฉันสามารถเข้าถึงข้อมูลได้

ใครมีทางออก?

— แพทริคบราวน์
แหล่งที่มา

เมื่อคุณกลับมาเป็นสตริงคุณแล้วเรียกวัตถุจาวาสคริปต์ที่จำเป็นต้องใช้ไม่ได้JSON eval()

— yoda

1

สิ่งใดที่คุณเรียกไฟล์ json "ท้องถิ่น" ท้องถิ่นบนเบราว์เซอร์หรือเซิร์ฟเวอร์?

— seppo0010

2

คุณยังไม่ได้ให้รายละเอียดเพียงพอกับเรา ไฟล์test.jsonไม่ได้ระบุพา ธ ใด ๆ ดังนั้นจึงเป็น URI ที่สัมพันธ์กับที่ตั้งของหน้าเว็บที่เข้าถึงมัน ดังนั้นเช่น @ seppo0010 บอกว่ามันจะอยู่ภายในเซิร์ฟเวอร์ถ้าหน้านั้นอยู่บนเซิร์ฟเวอร์ระยะไกลที่ใดที่หนึ่งและมันจะสัมพันธ์กับคอมพิวเตอร์ของคุณหากหน้านั้นอยู่ในระบบแฟ้มภายในเครื่องของคุณที่เข้าถึงโดยfile://โปรโตคอล

— hippietrail

292

$.getJSON ไม่ตรงกันดังนั้นคุณควรทำ:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

— seppo0010
แหล่งที่มา

47

คุณได้รับอนุญาตให้เข้าถึงไฟล์ในเครื่องหรือไม่

— maasha

3

ไม่ไม่สามารถเป็นไฟล์ได้ แต่ต้องให้บริการโดยเว็บเซิร์ฟเวอร์

— Kris Erickson

15

ถูกต้องอย่างแน่นอน ความปลอดภัยของ Chromes นั้นเข้มงวดกว่า Firefox หรืออื่น ๆ การโหลดทุกอย่างโดยใช้ xhr, Josn, Xml และอื่น ๆ นั้นค่อนข้างถูกล็อกไว้ใน Chrome ยกเว้นหนึ่งหรือสองอย่าง

— Shawty

1

ฉันลองสิ่งนี้ แต่ก็ไม่มีโชค ไม่มีข้อผิดพลาดในคอนโซลเช่นกัน :(

— Govind Kailas

11

ฉันแนะนำให้ใช้myjson.comเพื่ออัพโหลดไฟล์ในเครื่องของคุณและเข้าถึงจากเบราว์เซอร์ chrome

— โปรแกรมเมอร์เคมี

167

ฉันมีความต้องการแบบเดียวกัน (เพื่อทดสอบแอป angularjs ของฉัน) และวิธีเดียวที่ฉันพบคือการใช้ require.js:

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

หมายเหตุ: ไฟล์ถูกโหลดหนึ่งครั้งการโทรเพิ่มเติมจะใช้แคช

ข้อมูลเพิ่มเติมเกี่ยวกับการอ่านไฟล์ด้วย nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

— Ehvince
แหล่งที่มา

4

หากคุณกำลังทำสิ่งนี้ด้วยความตลกขบขันอย่าลืมทำjest.dontMock('./data.json');อย่างอื่นผลลัพธ์จะว่างเปล่า อาจมีประโยชน์สำหรับใครบางคนที่นั่น :)

— Håvard Geithus

1

บริบทของรหัสนี้คืออะไร? สิ่งที่คุณทำกับjson?

— Drazen Bjelovuk

4

โปรดให้ตัวอย่างเต็มรูปแบบ: ฉันได้รับข้อผิดพลาด:has not been loaded yet for context: _. Use require([])

— shaijut

2

ต้องการไม่ทำงานบนเบราว์เซอร์เนื่องจากเป็นโมดูล node.js ถ้า OP ต้องการโหลดในเบราว์เซอร์ควรใช้การดึงข้อมูลเป็นทางออกที่ถูกต้อง

— sniffingdoggo

1

ใช่ต้องใช้สำหรับโหนด แต่ต้องใช้ JJ ในเบราว์เซอร์ด้วย: "RequireJS เป็นไฟล์ JavaScript และโมดูลโหลดเดอร์มันได้รับการปรับให้เหมาะสำหรับการใช้งานในเบราว์เซอร์ แต่สามารถใช้ในสภาพแวดล้อม JavaScript อื่น ๆ เช่น Rhino และ Node "

— ต่อ Aronsson ที่สำรวจ

97

ด้วยวิธีที่ทันสมัยกว่าตอนนี้คุณสามารถใช้Fetch API ได้แล้ว :

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ Fetch API (Internet Explorer ไม่ได้ แต่ Edge ทำ!)

แหล่งที่มา:

— aloisdg กำลังย้ายไปยัง codidact.com
แหล่งที่มา

1

เมื่อใช้ Fetch API คุณยังไม่ได้รับอนุญาตให้เข้าถึงไฟล์ในเครื่องเว้นแต่ว่าคุณจะปิดใช้งานการตั้งค่าความปลอดภัยหรือไม่?

— LarsH

3

@ LarsH เห็นได้ชัดว่าใช่ฉันลองมันเมื่อเช้านี้และการเรียก API ไม่สามารถอ่านไฟล์ json ในเครื่องพร้อมไฟล์: // scheme วิธีการนี้ดูสะอาดตา แต่คุณไม่สามารถใช้กับไฟล์ในเครื่องได้

— keysl

1

@keysl ตกลงฉันเดาว่าคงเป็นเพราะเหตุผลด้านความปลอดภัย (และคุณพูดถูกฉันหมายถึง "ถูกห้ามไม่ให้เข้าถึงไฟล์ผ่านทางfile://โครงร่าง) แต่มันเป็นวิธีการที่สะอาดดีฉันได้เริ่มใช้งานแล้วต้องขอบคุณคำตอบนี้

— LarsH

คุณไม่สามารถเข้าถึงไฟล์ในเครื่องด้วยการดึง API

— anton zlydenko

89

หากคุณต้องการให้ผู้ใช้เลือกไฟล์ json โลคัล (ที่ใดก็ได้บนระบบไฟล์) แสดงว่าโซลูชันต่อไปนี้ใช้ได้ผล

มันใช้ใช้ FileReader และ JSON.parser (และไม่มี jquery)

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

นี่คือคำแนะนำที่ดีเกี่ยวกับ FileReader: http://www.html5rocks.com/th/tutorials/file/dndfiles/

— Trausti Kristjansson
แหล่งที่มา

4

FileReader API ไม่ได้รับการสนับสนุนใน IE 8 หรือ 9 แต่เบราว์เซอร์อื่น ๆ ทั้งหมดนั้นใช้ได้: caniuse.com/#search=filereader

— northben

มันทำงานได้สมบูรณ์แบบใน Chrome คุณจะเห็นข้อมูลของคุณในnewArr

— Belter

คำตอบนี้ดีและแตกต่างกันเล็กน้อยเพราะไม่ได้ใช้ jQuery

— DigitalDesignDj

78

หากคุณกำลังมองหาบางสิ่งที่รวดเร็วและสกปรกให้โหลดข้อมูลไว้ในส่วนหัวของเอกสาร HTML ของคุณ

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

ฉันควรพูดถึงว่าขนาดฮีปของคุณ (ใน Chrome) มีขนาดประมาณ 4GB ดังนั้นหากข้อมูลของคุณมีขนาดใหญ่กว่านั้นคุณควรหาวิธีอื่น หากคุณต้องการตรวจสอบเบราว์เซอร์อื่นลอง:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

— jwerre
แหล่งที่มา

คุณคิดถูกที่ AMD จะทำงาน แต่ฉันไม่คิดว่า AMD เป็นทางออกที่ถูกต้องที่นี่ วิธีที่ง่ายที่สุดคือใช้ $ .getJSON ขอบคุณ

— Patrick Browne

7

@PatrickBrowne ใช่ getJSON เป็นทางออกที่ดี แต่ฉันคิดว่าในหลาย ๆ กรณีคุณจะพบปัญหาข้ามโดเมน (โหลดข้อมูลจาก S3 เป็นต้น)

— jwerre

ฉันพบว่านี่เป็นทางออกที่ง่ายที่สุดสำหรับฉัน ไฟล์ JSON มีลักษณะเกือบจะเหมือนกันดังนั้นจึงไม่มีความยุ่งเหยิงเพิ่มเติม (เฉพาะ "var xyz =" ที่ด้านบนสุดของไฟล์) ไม่มีใครต้องการไฟล์ข้อมูลขนาดใหญ่ในรหัสของพวกเขา

— cslotty

นี่เป็นความผิดพลาดในหลาย ๆ ระดับฉันไม่เข้าใจว่ามันมีการลงคะแนนเสียงมากมายอย่างไรและนี่จะอธิบายเพิ่มเติมถ้าใครต้องการเห็นcodepen.io/KryptoniteDove/post/ ...... "ตัวอย่างมากมายจะเป็นหลักฐานว่าคุณสามารถเข้าถึงข้อมูลด้วย ฟังก์ชั่นง่าย ๆ เช่นด้านล่างอันที่จริงแล้วสิ่งนี้ไม่ได้เป็นการโหลดเอกสาร JSON แต่เป็นการสร้างวัตถุ Javascript เทคนิคนี้จะไม่ทำงานกับไฟล์ JSON จริง "

— lesolorzanov

1

ตรงไปตรงมานี่เป็นทางออกที่ดีถ้าคุณมีข้อมูลที่บรรจุไว้ล่วงหน้าแล้วและคุณต้องการที่จะให้บริการหน้าคงที่

— Evan Pu

19

รุ่น ES5

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function() {
        if (xobj.readyState === 4 && xobj.status === 200) {
            // Required use of an anonymous callback 
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

function init() {
    loadJSON(function(response) {
        // Parse JSON string into object
        var actual_JSON = JSON.parse(response);
    });
}

รุ่น ES6

const loadJSON = (callback) => {
    let xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = () => {
        if (xobj.readyState === 4 && xobj.status === 200) {
            // Required use of an anonymous callback 
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}

ขยายตัวอย่างข้อมูล

— xgqfrms
แหล่งที่มา

@Pier หากคุณใช้เซิร์ฟเวอร์แอปพลิเคชันในท้องถิ่นเช่น Tomcat หรือ Xampp หรือ Jboss งานสคริปต์

— Mirko Cianfarani

@MirkoCianfarani แน่นอนเพราะคุณไม่ได้ใช้file:///โปรโตคอลและไฟล์ไม่สามารถพิจารณาว่าเป็นโลคัลอีกต่อไป

— ท่าเรือ

@xgqfrms Fetch API ยอดเยี่ยมมาก!

— xgqfrms

2

//xobj.status เป็นจำนวนเต็ม xobj.status === "200" ควรเป็น xobj.status === 200

— yausername

@ ชื่อผู้ใช้ที่ถูกต้องฉันขอโทษสำหรับประเภทสถานะข้อผิดพลาดนั้นและได้รับการแก้ไขแล้ว

— xgqfrms

14

ฉันไม่สามารถเชื่อได้ว่าคำถามนี้ได้รับคำตอบกี่ครั้งโดยที่ไม่เข้าใจและ / หรือแก้ไขปัญหาเกี่ยวกับรหัสจริงของโปสเตอร์ต้นฉบับ ที่กล่าวว่าฉันเริ่มต้นตัวเอง (เพียง 2 เดือนของการเข้ารหัส) รหัสของฉันทำงานได้อย่างสมบูรณ์ แต่อย่าลังเลที่จะแนะนำการเปลี่ยนแปลงใด ๆ นี่คือทางออก:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

นี่เป็นวิธีที่สั้นกว่าในการเขียนรหัสเดียวกันกับที่ฉันให้ไว้ข้างต้น:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

นอกจากนี้คุณยังสามารถใช้ $ .ajax แทน $ .getJSON เพื่อเขียนโค้ดได้ในลักษณะเดียวกัน:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

ในที่สุดวิธีสุดท้ายในการทำเช่นนี้คือการห่อ $ .ajax ในฟังก์ชั่น ฉันไม่สามารถเครดิตสำหรับสิ่งนี้ได้ แต่ฉันทำการแก้ไขเล็กน้อย ฉันทดสอบแล้วใช้งานได้และให้ผลลัพธ์เหมือนกับรหัสของฉันด้านบน ฉันพบวิธีแก้ปัญหานี้ที่นี่ -> load json เป็น variable

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

test.jsonไฟล์ที่คุณเห็นในรหัสของฉันข้างต้นเป็นโฮสต์บนเซิร์ฟเวอร์ของฉันและมีเดียวกันข้อมูลวัตถุ JSON ว่าเขา (โปสเตอร์เดิม) ได้โพสต์

{
    "a" : "b",
    "c" : "d"
}

— SpoonHonda
แหล่งที่มา

11

ฉันประหลาดใจที่การนำเข้าจาก es6 ไม่ได้รับการกล่าวถึง (ใช้กับไฟล์ขนาดเล็ก)

Ex: import test from './test.json'

webpack 2 <ใช้json-loaderค่าเริ่มต้นสำหรับ.jsonไฟล์

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

สำหรับTypeScript :

import test from 'json-loader!./test.json';

TS2307 (TS) ไม่พบโมดูล 'json-loader! ./ suburbs.json'

เพื่อให้มันทำงานฉันต้องประกาศโมดูลก่อน ฉันหวังว่านี่จะช่วยให้ใครบางคนประหยัดเวลาได้ไม่กี่ชั่วโมง

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

หากฉันพยายามที่จะละเว้นloaderจากjson-loaderฉันได้รับข้อผิดพลาดต่อไปนี้จากwebpack:

การเปลี่ยนการแบ่ง: ไม่อนุญาตให้ละเว้นส่วนต่อท้าย '-loader' เมื่อใช้ตัวโหลด คุณต้องระบุ 'json-loader' แทน 'json' โปรดดูhttps://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

— Ogglas
แหล่งที่มา

1

ง่ายและตรงไปตรงมา

— Our_Benefactors ของเรา

คุณไม่สามารถใช้คำสั่งการนำเข้า es6 เมื่อโหลดเว็บเพจด้วยไฟล์: โปรโตคอล

— Onno van der Zee

6

ลองใช้วิธีดังกล่าว (แต่โปรดทราบว่า JavaScript ไม่มีสิทธิ์เข้าถึงระบบไฟล์ไคลเอ็นต์):

$.getJSON('test.json', function(data) {
  console.log(data);
});

— Samich
แหล่งที่มา

6

เมื่อเร็ว ๆ นี้D3jsสามารถจัดการไฟล์ json ในเครื่องได้

นี่คือปัญหา https://github.com/mbostock/d3/issues/673

นี่คือ patch inorder สำหรับ D3 เพื่อทำงานกับไฟล์ json โลคัล https://github.com/mbostock/d3/pull/632

— NS-1m
แหล่งที่มา

4

คำตอบนี้จะได้รับการปรับปรุงให้ดีขึ้นด้วยตัวอย่างของวิธีการใช้ D3 เพื่ออ่านไฟล์ json

— Paul H

4

พบกระทู้นี้เมื่อพยายาม (ไม่สำเร็จ) เพื่อโหลดไฟล์ json ในเครื่อง วิธีนี้ใช้ได้ผลสำหรับฉัน ...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... และใช้งานเช่นนี้ ...

load_json("test2.html.js")

... และนี่คือ<head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

— TechSpud
แหล่งที่มา

2

ดูเหมือนว่าจะไม่สามารถใช้ซ้ำได้ ตัวอย่างเช่นหากไฟล์ json ให้บริการโดยเซิร์ฟเวอร์ระยะไกลการหมดเวลา 100ms อาจไม่เพียงพอสำหรับการโหลด และเมื่อเวลาขึ้นอยู่กับความเร็วการเชื่อมต่อของลูกค้าคุณจะต้องตั้งค่าการหมดเวลาใช้งานนานมากสำหรับลูกค้าที่มีการเชื่อมต่อช้า กล่าวสั้น ๆ ไม่ควรใช้ setTimeout เพื่อรอการโหลดทรัพยากร

— Kenny806

1

Kenny806 - มันหมายถึงการแก้ปัญหาเฉพาะ - การโหลดทรัพยากรท้องถิ่น (สำหรับหน้าเว็บที่ไม่มีโฮสต์) ดังนั้นจึงหมายความว่ามันไม่สามารถนำมาใช้ซ้ำได้ มีโซลูชั่นการโหลดทรัพยากร 1,000 รายการสำหรับหน้าเว็บที่โฮสต์ นี้ไม่ได้วิธีการแก้ปัญหาก็วิธีการแก้ปัญหา ง่ายมากที่จะเปลี่ยนการหมดเวลา คุณแนะนำว่าการรอแบบไม่สิ้นสุดเป็นที่ยอมรับหรือไม่?

— TechSpud

2

ฉันไม่แนะนำการรอแบบไม่ จำกัด ฉันแนะนำให้ใช้เทคนิคที่ช่วยให้คุณตอบสนองต่อการโหลดไฟล์ทันทีที่เสร็จสิ้น ปัญหาการหมดเวลาของฉันคือคุณต้องรอให้เสร็จ แม้ว่าไฟล์จะโหลดใน 10 มิลลิวินาทีคุณจะยังคงรอ 100 มิลลิวินาที และใช่การปรับการหมดเวลาเป็นเรื่องง่าย แต่สิ่งที่คุณแนะนำคือการเปลี่ยนรหัสในแต่ละครั้งที่คุณต้องการโหลดไฟล์อื่นหรือเมื่อไฟล์มีการเปลี่ยนแปลง (เพื่อปรับการรอ) การแก้ปัญหาดังกล่าวผิด IMHO และอาจทำให้เกิดอาการปวดหัวมากในอนาคตโดยเฉพาะเมื่อมีคนอื่นพยายามใช้

— Kenny806

ทุกคนที่ใช้สคริปต์นี้ควรใช้เป็นพื้นฐานสำหรับสคริปต์ของตนเอง คุณมีสิทธิ์ที่จะแสดงความคิดเห็นว่าสคริปต์นี้ผิดหรือเปล่า ทำไมไม่แนะนำวิธีแก้ปัญหาทางเลือก? วิธีนี้ใช้ไม่ได้กับทุกกรณี มันทำงานได้สำหรับฉันโหลดไฟล์ในเครื่องจากหน้า html ท้องถิ่น ฉันแบ่งปันโซลูชันของฉันกับคำถามนี้ด้วยความหวังว่ามันจะช่วยคนอื่น คุณกำลังพยายามโหลดทรัพยากรท้องถิ่นหรือไม่? ทำไมไม่ส่งผ่านค่าการหมดเวลาเป็นตัวแปรตามไฟล์ที่คุณกำลังโหลด Ajax ในไฟล์โลคัลค่อนข้าง จำกัด

— TechSpud

1

คุณอาจจะดีกว่าเมื่อใช้ onreadystatechange หรือ onload และให้ฟังก์ชันแก่พวกเขา script.onload = functionname;

— เชนที่ดีที่สุด

4

ใน TypeScript คุณสามารถใช้การนำเข้าเพื่อโหลดไฟล์ JSON ภายในเครื่อง ตัวอย่างเช่นการโหลด font.json:

import * as fontJson from '../../public/fonts/font_name.json';

ต้องใช้การตั้งค่าสถานะ tsconfig - แก้ไข JsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

สำหรับข้อมูลเพิ่มเติมดูบันทึกย่อประจำรุ่นของ typescript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— teh.fonsi
แหล่งที่มา

อาจเขียนพร้อมรายละเอียดเพิ่มเติมเนื่องจากคำตอบนั้นค่อนข้างเข้าใจยาก

— เบย์

3

ในเชิงมุม (หรือกรอบอื่น ๆ ) คุณสามารถโหลดโดยใช้ http รับฉันใช้มันดังนี้:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

หวังว่านี่จะช่วยได้

— ราจกิรน
แหล่งที่มา

3

สิ่งที่ฉันทำคือแก้ไขไฟล์ JSON นิดหน่อย

myfile.json => myfile.js

ในไฟล์ JSON (ทำให้เป็นตัวแปร JS)

{name: "Whatever"} => var x = {name: "Whatever"}

ในตอนท้าย

export default x;

จากนั้น

import JsonObj from './myfile.js';

— สุพจน์กวินดา
แหล่งที่มา

3

หากคุณใช้อาร์เรย์ท้องถิ่นสำหรับ JSON - ตามที่คุณแสดงในตัวอย่างของคุณในคำถาม (test.json) คุณสามารถเป็นparseJSON()วิธีการของ JQuery ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() ใช้สำหรับรับ JSON จากไซต์ระยะไกล - มันจะไม่ทำงานในเครื่อง (ยกเว้นว่าคุณกำลังใช้เซิร์ฟเวอร์ HTTP ท้องถิ่น)

— บ้านพระสอนศาสนาในสกอตแลนด์
แหล่งที่มา

2

$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });

— Karhan Vijay
แหล่งที่มา

1

วิธีที่ฉันชอบใช้คือ pad / wrap json ด้วยอ็อบเจกต์ตามตัวอักษรจากนั้นบันทึกไฟล์ด้วยนามสกุลไฟล์. jsonp วิธีนี้ยังทำให้ไฟล์ json ดั้งเดิมของคุณ (test.json) ไม่เปลี่ยนแปลงเนื่องจากคุณจะทำงานกับไฟล์ jsonp ใหม่ (test.jsonp) แทน ชื่อบน wrapper สามารถเป็นอะไรก็ได้ แต่ไม่จำเป็นต้องเป็นชื่อเดียวกับฟังก์ชั่นการโทรกลับที่คุณใช้ในการประมวลผล jsonp ฉันจะใช้ test.json ของคุณที่โพสต์เป็นตัวอย่างเพื่อแสดงการเพิ่ม jsonp wrapper สำหรับไฟล์ 'test.jsonp'

json_callback({"a" : "b", "c" : "d"});

จากนั้นสร้างตัวแปรที่นำมาใช้ซ้ำได้ด้วยขอบเขตโกลบอลในสคริปต์ของคุณเพื่อเก็บ JSON ที่ส่งคืน สิ่งนี้จะทำให้ข้อมูล JSON ที่ส่งคืนพร้อมใช้งานสำหรับฟังก์ชั่นอื่น ๆ ทั้งหมดในสคริปต์ของคุณแทนที่จะเป็นเพียงฟังก์ชั่นการโทรกลับ

var myJSON;

ถัดไปเป็นฟังก์ชั่นง่าย ๆ ในการเรียก json ของคุณโดยการฉีดสคริปต์ โปรดทราบว่าเราไม่สามารถใช้ jQuery ที่นี่เพื่อผนวกสคริปต์เข้ากับส่วนหัวของเอกสารเนื่องจาก IE ไม่สนับสนุนวิธีการ jQuery. append วิธีการ jQuery แสดงความคิดเห็นในรหัสด้านล่างจะทำงานบนเบราว์เซอร์อื่น ๆ ที่สนับสนุนวิธีการใช้ผนวก มันถูกรวมไว้เป็นข้อมูลอ้างอิงเพื่อแสดงความแตกต่าง

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

ถัดไปเป็นฟังก์ชันการโทรกลับแบบสั้นและเรียบง่าย (ที่มีชื่อเดียวกันกับ jsonp wrapper) เพื่อรับข้อมูลผลลัพธ์ json ลงในตัวแปรโกลบอล

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

ขณะนี้ข้อมูล json สามารถเข้าถึงได้โดยฟังก์ชันใด ๆ ของสคริปต์โดยใช้เครื่องหมายจุด ตัวอย่างเช่น:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

วิธีนี้อาจแตกต่างจากที่คุณเคยเห็น แต่มีข้อดีหลายประการ ก่อนอื่นไฟล์ jsonp เดียวกันสามารถโหลดแบบโลคัลหรือจากเซิร์ฟเวอร์โดยใช้ฟังก์ชันเดียวกัน เป็นโบนัส jsonp อยู่ในรูปแบบที่เป็นมิตรข้ามโดเมนและสามารถใช้กับ REST type API ได้อย่างง่ายดาย

จริงอยู่ที่ไม่มีฟังก์ชั่นการจัดการข้อผิดพลาด แต่ทำไมคุณต้องใช้มัน? หากคุณไม่สามารถรับข้อมูล json โดยใช้วิธีนี้คุณสามารถเดิมพันได้ว่าคุณมีปัญหาในตัว json และฉันจะตรวจสอบกับตัวตรวจสอบ JSON ที่ดี

— ศักดิ์สิทธิ์
แหล่งที่มา

1

คุณสามารถใส่ json ของคุณในไฟล์ javascript สามารถโหลดได้ในเครื่อง (แม้ใน Chrome) โดยใช้ jQuerygetScript()ฟังก์ชั่น

ไฟล์ map-01.js:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

เอาท์พุท:

world width: 500

ขอให้สังเกตว่ามีการประกาศและกำหนดตัวแปร json ในไฟล์ js

— วิกเตอร์สต็อดดาร์ด
แหล่งที่มา

0

ฉันไม่พบวิธีแก้ไขใด ๆ โดยใช้ห้องสมุดของ Google ดังนั้นเพียงแค่ทำรายการให้เสร็จสมบูรณ์สำหรับผู้ใช้ในอนาคตนี่คือวิธีที่คุณโหลด JSON จากไฟล์โลคัลที่มีไลบรารีปิด:

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});

— Kenny806
แหล่งที่มา

0

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

ขยายตัวอย่างข้อมูล

ฉันทำสิ่งนี้สำหรับแอปคอร์โดวาของฉันเช่นฉันสร้างไฟล์จาวาสคริปต์ใหม่สำหรับ JSON และวางข้อมูล JSON ลงไปString.rawแล้วแยกวิเคราะห์ด้วยJSON.parse

— Jeeva
แหล่งที่มา

หากเป็นไฟล์จาวาสคริปต์ทำไมวัตถุจึงไม่ใช้เพียงJavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]

— Nuno André

ฉันใช้เพราะฉันดึงข้อมูล json โดยใช้ ajax ซึ่งมาเป็นสตริงดังนั้นฉันจึงใช้JSON.parseในการแปลงเป็นวัตถุ JavaScript

— Jeeva

0

function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

สิ่งที่ฉันทำคืออย่างแรกจากแท็บเครือข่ายบันทึกการรับส่งข้อมูลเครือข่ายสำหรับบริการและจากเนื้อหาการตอบสนองคัดลอกและบันทึกวัตถุ json ในไฟล์โลคัล จากนั้นเรียกใช้ฟังก์ชันด้วยชื่อไฟล์ภายในเครื่องคุณควรเห็นวัตถุ json ใน jsonOutout ด้านบน

— เฟิงจาง
แหล่งที่มา

2

โปรดอธิบายวิธีแก้ปัญหาของคุณแทนที่จะวางโค้ด เพียงวิธีการแก้ปัญหาที่อธิบายวิธีแก้ปัญหาจะช่วยให้ชุมชน

— gmuraleekrishna

หมายเหตุ: ต้องใช้ InternetExplorer

— Sancarn

0

สิ่งที่ใช้ได้ผลสำหรับฉันคือ:

การป้อนข้อมูล:

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

รหัส Javascript:

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

— Bishwas Mishra
แหล่งที่มา

-4

หากคุณติดตั้ง Python ไว้ในเครื่องของคุณ (หรือคุณไม่ติดตั้งไว้) นี่เป็นวิธีแก้ปัญหาที่ไม่ขึ้นกับเบราว์เซอร์สำหรับปัญหาการเข้าถึงไฟล์ JSON ในพื้นที่ที่ฉันใช้:

แปลงไฟล์ JSON เป็น JavaScript โดยสร้างฟังก์ชันที่ส่งคืนข้อมูลเป็นวัตถุ JavaScript จากนั้นคุณสามารถโหลดด้วยแท็ก <script> และเรียกใช้ฟังก์ชันเพื่อรับข้อมูลที่คุณต้องการ

นี่คือรหัสไพ ธ อน

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')

— Sytrus
แหล่งที่มา

กำลังโหลดไฟล์ JSON ในเครื่อง

รุ่น ES5

รุ่น ES6