322

Ich versuche, eine lokale JSON-Datei zu laden, aber es funktioniert nicht. Hier ist mein JavaScript-Code (mit jQuery:

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

Die Datei test.json:

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

Es wird nichts angezeigt und Firebug teilt mir mit, dass die Daten nicht definiert sind. In Firebug kann ich sehen json.responseTextund es ist gut und gültig, aber es ist seltsam, wenn ich die Zeile kopiere:

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

In der Firebug-Konsole funktioniert es und ich kann auf Daten zugreifen.

Hat jemand eine Lösung?

javascript jquery json firebug local-files Patrick Browne
quelle

Wenn Sie eine JSONZeichenfolge zurückgeben, rufen Sie bereits ein Javascript-Objekt ab, das Sie nicht verwenden müssen eval().

Yoda

1

Wie nennt man eine "lokale" JSON-Datei? lokal im Browser oder auf dem Server?

seppo0010

2

Sie haben uns nicht genug Details gegeben. Die Datei test.jsongibt keinen Pfad an, daher handelt es sich um einen relativen URI, relativ zum Speicherort der Seite, die darauf zugreift. Wie @ seppo0010 sagt, ist es lokal für den Server, wenn sich die Seite irgendwo auf einem Remote-Server befindet, und relativ zu Ihrem Computer, wenn sich die Seite in Ihrem lokalen Dateisystem befindet, auf das das file://Protokoll zugreift .

Hippietrail

292

$.getJSON ist asynchron, also sollten Sie Folgendes tun:

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

seppo0010
quelle

47

Dürfen Sie wirklich auf eine lokale Datei zugreifen?

Maasha

3

Nein, es kann keine Datei sein, sondern muss vom Webserver bereitgestellt werden.

Kris Erickson

15

Absolut korrekt. Die Chromes-Sicherheit ist viel strenger als bei Firefox oder anderen. Das Laden von Objekten mit xhr, Josn, Xml usw. ist in Chrome mit Ausnahme von ein oder zwei Dingen so gut wie gesperrt.

Shawty

1

Ich habe es versucht, aber kein Glück. Kein Fehler auch in der Konsole :(

Govind Kailas

11

Ich empfehle, myjson.com zu verwenden, um Ihre lokale Datei hochzuladen und über den Chrome-Browser darauf zuzugreifen.

Chemischer Programmierer

167

Ich hatte das gleiche Bedürfnis (um meine anglejs App zu testen) und der einzige Weg, den ich gefunden habe, ist die Verwendung von require.js:

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

Hinweis: Die Datei wird einmal geladen, weitere Aufrufe verwenden den Cache.

Weitere Informationen zum Lesen von Dateien mit nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

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

Ehvince
quelle

4

Wenn Sie dies mit Scherz tun, denken Sie daran, jest.dontMock('./data.json');sonst ist das Ergebnis leer. Könnte für jemanden da draußen nützlich sein :)

Håvard Geithus

1

Was ist der Kontext dieses Codes? Was machst du damit json?

Drazen Bjelovuk

4

Bitte geben Sie ein vollständiges Beispiel an: Ich has not been loaded yet for context: _. Use require([])

erhalte

2

require funktioniert nicht im Browser, da es sich um das Modul node.js handelt. Wenn OP es in den Browser laden möchte, sollte Fetch die richtige Lösung sein.

Sniffingdoggo

1

Ja, require ist für den Knoten, aber requireJS kann auch in Browsern verwendet werden: "RequireJS ist eine JavaScript-Datei und ein Modul-Loader. Es ist für die Verwendung im Browser optimiert, kann jedoch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. ""

Per Quested Aronsson

93

Auf modernere Weise können Sie jetzt die Fetch-API verwenden :

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

Alle modernen Browser unterstützen die Fetch-API. (Internet Explorer nicht, Edge jedoch!)

Quelle:

aloisdg wechselt zu codidact.com
quelle

1

Ist es Ihnen bei Verwendung der Abruf-API weiterhin verboten, auf lokale Dateien zuzugreifen, es sei denn, Sie deaktivieren eine Sicherheitseinstellung?

LarsH

3

@LarsH Anscheinend ja, ich habe es heute Morgen versucht und fetch api kann eine lokale json-Datei mit dem Schema file: // nicht lesen. Dieser Ansatz sieht so sauber aus, aber Sie können ihn nicht für lokale Dateien verwenden

keysl

1

@keysl OK, ich denke, es muss wahrscheinlich aus Sicherheitsgründen so sein. (Und Sie haben Recht, ich meinte "verboten, über das file://Schema auf Dateien zuzugreifen .) Aber es ist ein schöner, sauberer Ansatz. Ich habe dank dieser Antwort damit begonnen.

LarsH

Sie können mit der Abruf-API nicht auf lokale Dateien zugreifen

anton zlydenko

89

Wenn Sie möchten, dass der Benutzer die lokale JSON-Datei (irgendwo im Dateisystem) auswählt, funktioniert die folgende Lösung.

Es verwendet FileReader und JSON.parser (und keine 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>

Hier ist eine gute Einführung in FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
quelle

4

Die FileReader-API wird in IE 8 oder 9 nicht unterstützt, aber alle anderen Browser sind in Ordnung: caniuse.com/#search=filereader

northben

Es funktioniert perfekt in Chrome, Sie werden Ihre Daten innewArr

Belter

Diese Antwort ist nett und etwas anders, weil sie jQuery nicht verwendet.

DigitalDesignDj

78

Wenn Sie nach etwas schnellem und schmutzigem suchen, laden Sie einfach die Daten in den Kopf Ihres HTML-Dokuments.

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"}
})();

Ich sollte erwähnen, dass Ihre Heap-Größe (in Chrome) ungefähr 4 GB beträgt. Wenn Ihre Daten also größer sind, sollten Sie eine andere Methode finden. Wenn Sie einen anderen Browser überprüfen möchten, versuchen Sie Folgendes:

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

jwerre
quelle

Sie haben Recht, dass AMD funktionieren würde, aber ich glaube nicht, dass AMD hier die richtige Lösung ist. Am einfachsten ist es, $ .getJSON zu verwenden. danke

Patrick Browne

7

@PatrickBrowne Ja, getJSON ist eine gute Lösung, aber ich denke, in vielen Fällen treten domänenübergreifende Probleme auf (z. B. Laden der Daten aus S3).

Jwerre

Ich fand das die einfachste Lösung für mich. Die JSON-Datei sieht fast gleich aus, daher keine zusätzliche Unordnung (nur ein "var xyz =" ganz oben in der Datei). Niemand möchte eine Big-Data-Datei in seinem Code.

Cslotty

Dies ist in vielen Ebenen falsch, ich verstehe nicht, wie es so viele Stimmen hat, hier erklärt es mehr, wenn jemand codepen.io/KryptoniteDove/post/… sehen möchte. "Viele Beispiele zeigen, dass Sie mit einem auf die Daten zugreifen können einfache Funktion wie die folgende. Tatsächlich wird dabei kein JSON-Dokument geladen, sondern ein Javascript-Objekt erstellt. Diese Technik funktioniert nicht für echte JSON-Dateien. "

Lesolorzanov

1

Ehrlich gesagt ist dies eine großartige Lösung, wenn Sie nur einige vordefinierte Daten haben und eine statische Seite

Evan Pu

19

ES5-Version

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-Version

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);
    });
}

Erweitern Sie das Snippet

xgqfrms
quelle

@Pier, wenn Sie einen lokalen Anwendungsserver wie Tomcat oder Xampp oder Jboss verwenden. die Drehbucharbeit

Mirko Cianfarani

@MirkoCianfarani in der Tat, weil Sie das file:///Protokoll nicht verwenden und die Datei nicht mehr als lokal angesehen werden kann.

Pier

@xgqfrms Fetch API ist fantastisch!

xgqfrms

2

//xobj.status ist eine Ganzzahl xobj.status === "200" sollte xobj.status === 200 sein

yausername

@yausername Sie haben Recht, es tut mir leid für diesen Fehlerstatus-Typ, und er wurde korrigiert.

xgqfrms

14

Ich kann nicht glauben, wie oft diese Frage beantwortet wurde, ohne das Problem mit dem tatsächlichen Code des Originalplakats zu verstehen und / oder anzugehen. Das heißt, ich bin selbst ein Anfänger (nur 2 Monate Codierung). Mein Code funktioniert einwandfrei, aber Sie können jederzeit Änderungen vorschlagen. Hier ist die Lösung:

//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);

Hier ist eine kürzere Möglichkeit, denselben Code zu schreiben, den ich oben angegeben habe:

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

Sie können auch $ .ajax anstelle von $ .getJSON verwenden, um den Code genauso zu schreiben:

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

Der letzte Weg, dies zu tun, besteht darin, $ .ajax in eine Funktion zu verpacken. Ich kann diesen nicht gutschreiben, aber ich habe ihn ein wenig modifiziert. Ich habe es getestet und es funktioniert und liefert die gleichen Ergebnisse wie mein Code oben. Ich habe diese Lösung hier gefunden -> lade json in 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);

Die Datei test.json , die Sie in meinem obigen Code sehen, wird auf meinem Server gehostet und enthält dasselbe json-Datenobjekt, das er (das Originalposter) gepostet hat.

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

SpoonHonda
quelle

11

Ich bin überrascht, dass der Import von es6 nicht erwähnt wurde (Verwendung mit kleinen Dateien)

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

webpack 2 <verwendet die json-loaderStandardeinstellung für .jsonDateien.

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

Für TypeScript :

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

TS2307 (TS) Modul 'json-loader! ./ Suburbs.json' kann nicht gefunden werden.

Damit es funktioniert, musste ich zuerst das Modul deklarieren. Ich hoffe, das spart jemandem ein paar Stunden.

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

...

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

Wenn ich weglassen versuche loaderaus json-loaderIch habe die folgenden Fehler aus webpack:

BREAKING CHANGE: Bei Verwendung von Loadern darf das Suffix '-loader' nicht mehr weggelassen werden. Sie müssen 'json-loader' anstelle von 'json' angeben, siehe https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Ogglas
quelle

1

einfach und unkompliziert.

Our_Benefactors

Sie können die es6-Importanweisung nicht verwenden, wenn die Webseite mit dem Protokoll file: geladen ist.

Onno van der Zee

6

Versuchen Sie es so (aber beachten Sie auch, dass JavaScript keinen Zugriff auf das Client-Dateisystem hat):

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

Samich
quelle

6

Vor kurzem ist D3js in der Lage, lokale JSON-Dateien zu verarbeiten.

Dies ist das Problem https://github.com/mbostock/d3/issues/673

Dies ist der Patch, damit D3 mit lokalen JSON-Dateien funktioniert. https://github.com/mbostock/d3/pull/632

ns-1m
quelle

4

Diese Antwort würde durch ein Beispiel für die Verwendung von D3 zum Lesen von JSON-Dateien erheblich verbessert.

Paul H

4

Dieser Thread wurde gefunden, als versucht wurde (erfolglos), eine lokale JSON-Datei zu laden. Diese Lösung hat bei mir funktioniert ...

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)
}

... und wird so verwendet ...

load_json("test2.html.js")

... und das ist die <head>...

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

TechSpud
quelle

2

Dies scheint nicht sehr wiederverwendbar zu sein. Wenn die JSON-Datei beispielsweise von einem Remote-Server bereitgestellt wird, reicht das Zeitlimit von 100 ms möglicherweise nicht zum Laden aus. Und da die Zeit von der Verbindungsgeschwindigkeit des Clients abhängt, müssten Sie für Clients mit langsamer Verbindung ein sehr langes Zeitlimit festlegen. Kurz gesagt, setTimeout sollte nicht verwendet werden, um auf das Laden einer Ressource zu warten.

Kenny806

1

Kenny806 - Es soll ein bestimmtes Problem lösen - das Laden lokaler Ressourcen (für eine nicht gehostete Webseite), was bedeutet, dass es nicht sehr wiederverwendbar ist. Es gibt Tausende von Ressourcenladelösungen für im Web gehostete Seiten. Dies ist nicht die Lösung, es ist eine Lösung. Es ist wirklich einfach, das Timeout zu ändern. Schlagen Sie durch Entfernen des Timeouts vor, dass eine unendliche Wartezeit akzeptabel ist?

TechSpud

2

Ich schlage keine unendliche Wartezeit vor, sondern eine Technik, mit der Sie auf das Laden von Dateien reagieren können, sobald diese abgeschlossen sind. Mein Problem mit dem Timeout ist, dass Sie immer warten müssen, bis es fertig ist. Selbst wenn die Datei in 10 ms geladen worden wäre, würden Sie immer noch auf 100 ms warten. Und ja, das Anpassen des Zeitlimits ist einfach, aber Sie schlagen vor, den Code jedes Mal zu ändern, wenn Sie eine andere Datei laden möchten oder wenn sich die Größe der Datei ändert (um das Warten zu optimieren). Eine solche Lösung ist meiner Meinung nach falsch und kann in Zukunft viele Kopfschmerzen verursachen, insbesondere wenn jemand anderes versucht, sie zu verwenden.

Kenny806

Jeder, der dieses Skript verwendet, sollte es verwenden als Grundlage für seine eigenen Skripte verwenden. Sie haben ein Recht auf Ihre Meinung, ob dieses Skript falsch ist. Warum nicht eine alternative Lösung vorschlagen? Dies funktioniert definitiv nicht für alle Anwendungsfälle. Es hat bei mir funktioniert, eine lokale Datei von einer lokalen HTML-Seite zu laden. Ich teilte meine Lösung zu dieser Frage mit, in der Hoffnung, dass sie jemand anderem helfen würde. Versuchen Sie, eine lokale Ressource zu laden? Warum nicht den Timeout-Wert als Variable übergeben, basierend auf der Datei, die Sie laden? Ajax für lokale Dateien ist ziemlich begrenzt.

TechSpud

1

Möglicherweise ist es besser, onreadystatechange oder onload zu verwenden und ihnen eine Funktion zu geben. script.onload = Funktionsname;

Shane Best

4

In TypeScript können Sie mithilfe des Imports lokale JSON-Dateien laden. Zum Beispiel das Laden einer font.json:

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

Dies erfordert ein tsconfig-Flag --resolveJsonModule:

// tsconfig.json

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

Weitere Informationen finden Sie in den Versionshinweisen von Typoskript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
quelle

Kann mit mehr Details schreiben, da die Antwort etwas unklar ist.

Bay

3

In Angular (oder einem anderen Framework) können Sie mit http laden. Ich verwende es wie folgt:

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

Hoffe das hilft.

Rajkiran
quelle

3

Ich habe die JSON-Datei ein wenig bearbeitet.

myfile.json => myfile.js

(Machen Sie es in der JSON-Datei zu einer JS-Variablen)

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

Am Ende,

export default x;

Dann,

import JsonObj from './myfile.js';

Supun Kavinda
quelle

3

Wenn Sie ein lokales Array für JSON verwenden - wie Sie in Ihrem Beispiel in der Frage (test.json) gezeigt haben, können Sie die parseJSON()Methode von JQuery -> verwenden

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

getJSON() wird zum Abrufen von JSON von einem Remotestandort verwendet - es funktioniert nicht lokal (es sei denn, Sie verwenden einen lokalen HTTP-Server).

Pfarrhaus
quelle

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
quelle

1

Ein Ansatz, den ich gerne verwende, besteht darin, den JSON mit einem Objektliteral aufzufüllen / zu verpacken und die Datei dann mit der Dateierweiterung .jsonp zu speichern. Diese Methode lässt auch Ihre ursprüngliche JSON-Datei (test.json) unverändert, da Sie stattdessen mit der neuen JSONP-Datei (test.jsonp) arbeiten. Der Name auf dem Wrapper kann beliebig sein, muss jedoch mit der Rückruffunktion identisch sein, die Sie zur Verarbeitung des JSONP verwenden. Ich werde Ihre test.json als Beispiel verwenden, um den Jsonp-Wrapper-Zusatz für die Datei 'test.jsonp' anzuzeigen.

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

Erstellen Sie als Nächstes eine wiederverwendbare Variable mit globalem Gültigkeitsbereich in Ihrem Skript, um den zurückgegebenen JSON zu speichern. Dadurch werden die zurückgegebenen JSON-Daten für alle anderen Funktionen in Ihrem Skript verfügbar und nicht nur für die Rückruffunktion.

var myJSON;

Als nächstes kommt eine einfache Funktion, um Ihren JSON durch Skriptinjektion abzurufen. Beachten Sie, dass wir jQuery hier nicht verwenden können, um das Skript an den Dokumentkopf anzuhängen, da der IE die jQuery .append-Methode nicht unterstützt. Die im folgenden Code auskommentierte jQuery-Methode funktioniert in anderen Browsern, die die .append-Methode unterstützen. Es ist als Referenz enthalten, um den Unterschied zu zeigen.

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)
}

Als nächstes folgt eine kurze und einfache Rückruffunktion (mit demselben Namen wie der jsonp-Wrapper), um die json-Ergebnisdaten in die globale Variable zu übertragen.

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

Auf die JSON-Daten kann jetzt von allen Funktionen des Skripts unter Verwendung der Punktnotation zugegriffen werden. Als Beispiel:

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

Diese Methode unterscheidet sich möglicherweise ein wenig von dem, was Sie gewohnt sind, hat aber viele Vorteile. Erstens kann dieselbe JSONP-Datei lokal oder von einem Server mit denselben Funktionen geladen werden. Als Bonus hat jsonp bereits ein domänenübergreifendes Format und kann auch problemlos mit APIs vom Typ REST verwendet werden.

Zugegeben, es gibt keine Fehlerbehandlungsfunktionen, aber warum sollten Sie eine benötigen? Wenn Sie mit dieser Methode nicht in der Lage sind, die JSON-Daten abzurufen, können Sie darauf wetten, dass Sie Probleme mit dem JSON selbst haben, und ich würde dies auf einem guten JSON-Validator überprüfen.

Offenbarung
quelle

1

Sie können Ihren JSON in eine Javascript-Datei einfügen. Dies kann lokal (auch in Chrome) mit jQuery's geladen werdengetScript() Funktion .

map-01.js Datei:

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);
    });

Ausgabe:

world width: 500

Beachten Sie, dass die Variable json in der Datei js deklariert und zugewiesen ist.

Victor Stoddard
quelle

0

Ich habe mit der Google Closure-Bibliothek keine Lösung gefunden. Um die Liste für zukünftige Besucher zu vervollständigen, laden Sie einen JSON aus der lokalen Datei mit der Closure-Bibliothek wie folgt:

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
quelle

0

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

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

Erweitern Sie das Snippet

Ich habe dies für meine Cordova-App getan, als hätte ich eine neue Javascript-Datei für den JSON erstellt und die JSON-Daten eingefügt und String.rawdann mit analysiertJSON.parse

Jeeva
quelle

Wenn es sich um eine Javascript-Datei handelt, warum ein Objekt so ausführen und nicht einfach JavaScript Object Notation(JSON) verwenden: obj = [{"name": "Jeeva"}, {"name": "Kumar"}]

Nuno André

Ich habe es verwendet, weil ich einige JSON-Daten mit Ajax abgerufen habe, das als Zeichenfolge geliefert wurde. Daher verwende ich es JSON.parse, um es in ein JavaScript-Objekt zu konvertieren

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");

Zunächst habe ich auf der Registerkarte "Netzwerk" den Netzwerkverkehr für den Dienst aufgezeichnet und auf dem Antworttext das JSON-Objekt kopiert und in einer lokalen Datei gespeichert. Rufen Sie dann die Funktion mit dem lokalen Dateinamen auf. Sie sollten das json-Objekt in jsonOutout oben sehen können.

Feng Zhang
quelle

2

Bitte erläutern Sie Ihre Lösung, anstatt nur den Code einzufügen. Nur eine Lösung, die erklärt, wie das Problem gelöst wurde, hilft der Community.

gmuraleekrishna

Hinweis: Erfordert InternetExplorer

Sancarn

0

Was für mich funktioniert hat, ist Folgendes:

Eingang:

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

Javascript Code:

<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
quelle

-4

Wenn Sie Python auf Ihrem lokalen Computer installiert haben (oder es Ihnen nichts ausmacht, einen zu installieren), finden Sie hier eine browserunabhängige Problemumgehung für das von mir verwendete lokale JSON-Dateizugriffsproblem:

Transformieren Sie die JSON-Datei in ein JavaScript, indem Sie eine Funktion erstellen, die die Daten als JavaScript-Objekt zurückgibt. Anschließend können Sie es mit dem <script> -Tag laden und die Funktion aufrufen, um die gewünschten Daten abzurufen.

Hier kommt der Python-Code

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
quelle

Laden der lokalen JSON-Datei

Antworten:

ES5-Version

ES6-Version