Laden der lokalen JSON -Datei

StackOverflow https://stackoverflow.com/questions/7346563

Frage

Ich versuche, eine lokale JSON -Datei zu laden, aber sie wird nicht funktionieren. 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"}

Nichts wird angezeigt und Firebug sagt mir, dass Daten undefiniert sind. In Firebug kann ich sehen json.responseText Und es ist gut und gültig, aber es ist seltsam, wenn ich die Zeile kopiere:

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

In Firebugs Konsole funktioniert es und ich kann auf Daten zugreifen.

Hat jemand eine Lösung?

War es hilfreich?

Lösung

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

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

Andere Tipps

Ich hatte das gleiche Bedürfnis (um meine AngularJS -App zu testen), und der einzige Weg, den ich fand, besteht darin, fordert.js zu verwenden:

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

Hinweis: Die Datei wird einmal geladen. Weitere Anrufe verwenden den Cache.

Mehr zum Lesen von Dateien mit NodeJs: http://docs.nodejitsu.com/articles/file-System/how-to-read-files-in-nodejs

erfordern.js: http://requirejs.org/

Wenn Sie den Benutzer die lokale JSON -Datei (überall im Dateisystem) auswählen möchten, funktioniert die folgende Lösung.

Es verwendet Fileeader 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 ein gutes Intro auf FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

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

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

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

Quelle:

Wenn Sie nach etwas schnell und schmutzig suchen, laden Sie die Daten im 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"}
})()

Ace.Webgeeker.xyz

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

Ich kann nicht glauben, wie oft diese Frage beantwortet wurde, ohne das Problem mit dem tatsächlichen Code des Originalplakers zu verstehen und/oder anzugehen. Das heißt, ich bin selbst Anfänger (nur 2 Monate Codierung). Mein Code funktioniert perfekt, kann aber gerne Änderungen daran 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 Art, 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);

Schließlich der letzte Weg, dies zu tun ist $ .ajax in eine Funktion einzuwickeln. Ich kann diesen keine Anerkennung nehmen, aber ich habe es ein bisschen geändert. Ich habe es getestet und es funktioniert und erzielt die gleichen Ergebnisse wie mein Code oben. Ich habe diese Lösung hier gefunden -> Laden Sie 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);

Das test.json Die Datei, die Sie in meinem obigen Code sehen, wird auf meinem Server gehostet und enthält das gleiche JSON -Datenobjekt, das er (das ursprüngliche Poster) gepostet hat. 

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

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-loader standardmäßig für .json Dateien.

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

Zum Typoskript:

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

TS2307 (TS) kann das Modul 'Json-loader! ./ suburbs.json' nicht finden

Um es zum Laufen zu bringen, musste ich das Modul zuerst deklarieren. Ich hoffe, das spart ein paar Stunden für jemanden.

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

...

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

Wenn ich versuchte, wegzulassen loader aus json-loader Ich habe den folgenden Fehler von bekommen webpack:

Breaking Change: Es ist nicht mehr erlaubt, das Suffix "-loader" unter Verwendung von Ladern wegzulassen. Sie müssen 'JSON-loader' anstelle von 'json' angeben, siehe https://webpack.js.org/guides/migrating/#automatic-loader-module-name-eutsion-removed

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

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

In letzter Zeit D3JS kann die lokale JSON -Datei verarbeiten.

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

Dies ist der Patch, der für D3 enthält, um mit lokalen JSON -Dateien zu arbeiten.https://github.com/mbostock/d3/pull/632

Fanden diesen Thread beim Versuch (erfolglos), eine lokale JSON -Datei zu laden. Diese Lösung funktionierte für mich ...

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 das <head>...

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

In TypeScript können Sie importieren, um lokale JSON -Dateien zu laden. Zum Beispiel laden Sie eine Schriftart.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 Versionshinweise von TypeScript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

In Angular (oder einem anderen Rahmen) können Sie mit HTTP GET laden Ich benutze es so etwas wie folgt:

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

Hoffe das hilft.

$.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_);
                      }
                 });


             }
  });

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

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

getJSON Wird verwendet, um JSON von einer Remote -Site zu holen - es funktioniert nicht lokal (es sei denn, Sie verwenden einen lokalen HTTP -Server)

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

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

Ein Ansatz, den ich gerne benutze, ist das Pad/Wickel des JSON mit einem Objektliteral und speichern die Datei mit einer .jsonP -Dateierweiterung. 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 werden. Der Name auf dem Wrapper kann alles sein, aber er muss der gleiche Name sein wie die Rückruffunktion, mit der Sie den JSONP verarbeiten. Ich werde Ihren Test verwenden.

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

Erstellen Sie als nächstes eine wiederverwendbare Variable mit globalem Umfang in Ihrem Skript, um den zurückgegebenen JSON zu halten. Dadurch werden die zurückgegebenen JSON -Daten allen anderen Funktionen in Ihrem Skript anstelle der Rückruffunktion verfügbar.

var myJSON;

Als nächstes kommt eine einfache Funktion, um Ihren JSON durch Skript -Injektion 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 folgende Code kommentierte JQuery -Methode funktioniert an anderen Browsern, die die .Append -Methode unterstützen. Es ist als Verweis 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 kommt eine kurze und einfache Rückruffunktion (mit demselben Namen wie der JSONP -Wrapper), um die JSON -Ergebnisdaten in die globale Variable zu bringen.

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 nun alle Funktionen des Skripts mithilfe von DOT -Notation zugegriffen werden. Als Beispiel:

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

Diese Methode ist möglicherweise ein bisschen anders als das, was Sie gewohnt sind, aber viele Vorteile. Zunächst kann die gleiche JSONP -Datei lokal oder von einem Server mit denselben Funktionen geladen werden. Als Bonus befindet sich JSONP bereits in einem Cross-Domain-freundlichen Format und kann auch leicht bei APIs von REST-Typen verwendet werden.

Zugegeben, es gibt keine Fehlerbehandlungsfunktionen, aber warum brauchen Sie einen? Wenn Sie die JSON -Daten mit dieser Methode nicht erhalten können, können Sie so ziemlich wetten, dass Sie einige Probleme im JSON selbst haben, und ich würde sie auf einem guten JSON -Validator überprüfen.

Sie können Ihren JSON in eine JavaScript -Datei einfügen. Dies kann lokal (sogar in Chrom) mit JQuery's geladen werden getScript() 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);
    });

Ausgang:

world width: 500

Beachten Sie, dass die JSON -Variable in der JS -Datei deklariert und zugewiesen wird.

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

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

Ich habe dies für meine Cordova -App gemacht, wie ich eine neue JavaScript -Datei für den JSON erstellt und die JSON -Daten eingefügt habe String.raw dann analysieren Sie es mit JSON.parse

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

Was ich getan habe, war zunächst den Netzwerkverkehr für den Dienst auf der Registerkarte "Netzwerk" aufzuzeichnen und das JSON -Objekt in einer lokalen Datei zu kopieren und zu speichern. Rufen Sie dann die Funktion mit dem lokalen Dateinamen auf.

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>

Ich habe die JSON -Datei ein wenig bearbeitet.

myfile.json => myfile.js

In der JSON -Datei (machen Sie es zu einer JS -Variablen)

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

Am Ende,

export default x;

Dann,

import JsonObj from './myfile.js';

Wenn Sie Python auf Ihrem lokalen Computer installiert haben (oder nichts ausmachen, eines zu installieren), finden Sie hier eine Browser-unabhängige Problemumgehung für das Problem der lokalen JSON-Dateizugriffsprobleme, das ich verwende:

Verwandeln Sie die JSON -Datei in ein JavaScript, indem Sie eine Funktion erstellen, die die Daten als JavaScript -Objekt zurückgibt. Dann können Sie es mit ladenu003Cscript> tag and call the function to get the data you want.

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]')
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top