Wczytywanie lokalnego pliku JSON

Question

Wczytywanie lokalnego pliku JSON

Próbuję załadować lokalny plik JSON, ale to nie zadziała. Oto Mój kod JavaScript (używając jQuery:

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

Test.plik json:

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

Nic nie jest wyświetlane i Firebug mówi mi, że dane są niezdefiniowane. W Firebug widzę json.responseText i jest dobry i poprawny, ale to dziwne, gdy kopiuję wiersz:

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

W konsoli Firebug działa i mam dostęp do danych. Ktoś ma rozwiązanie?

243

javascript jquery json firebug local-files

Author: Danny Beckett, 2011-09-08

Source

21 answers

Miałem taką samą potrzebę (aby przetestować moją aplikację angularjs), a jedynym sposobem, który znalazłem, jest użycie require.js:

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

Uwaga: plik zostanie załadowany raz, kolejne wywołania będą używać pamięci podręcznej.

Więcej o odczycie plików z nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

Wymagaj.js: http://requirejs.org/

124

Author: Ehvince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-11 14:48:13

Jeśli chcesz pozwolić użytkownikowi wybrać lokalny plik json (w dowolnym miejscu na systemie plików), działa następujące rozwiązanie.

Używa filereader i JSON.parser (i bez 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>

Oto dobre intro na FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

61

Author: Trausti Kristjansson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-02 08:39:56

Jeśli szukasz czegoś szybkiego i brudnego, po prostu załaduj dane w nagłówku dokumentu HTML.

Data.js

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

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

49

Author: jwerre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-10 21:19:51

W bardziej nowoczesny sposób możesz teraz użyć API Fetch :

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

Wszystkie nowoczesne przeglądarki obsługują API Fetch. (Internet Explorer nie, ale Edge tak!)

Źródło:

42

Author: aloisdg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-16 11:05:49

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

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

13

Author: xgqfrms,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-04 05:59:28

Try jest taki sposób (ale należy również pamiętać, że JavaScript nie ma dostępu do systemu plików klienta):

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

6

Author: Samich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-08 10:31:41

Ostatnio D3js jest w stanie obsłużyć lokalny plik json.

To jest problem https://github.com/mbostock/d3/issues/673

Jest to łatka Worder dla D3 do pracy z lokalnymi plikami json. https://github.com/mbostock/d3/pull/632

6

Author: ns-1m,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-23 07:44:55

Nie mogę uwierzyć, ile razy na to pytanie udzielono odpowiedzi bez zrozumienia i / lub rozwiązania problemu z oryginalnym kodem Plakatu. To powiedziawszy, sam jestem początkujący (tylko 2 miesiące kodowania). Mój kod działa idealnie, ale sugeruj wszelkie zmiany. Oto rozwiązanie:

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

Oto krótszy sposób pisania tego samego kodu, który podałem powyżej:

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

Możesz również użyć $.ajax zamiast $.getJSON do napisania kodu dokładnie tak samo:

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

W końcu, ostatnim sposobem, aby to zrobić jest owinięcie $.ajax w funkcji. Nie mogę się pochwalić tym, ale trochę go zmodyfikowałem. Przetestowałem go i działa i daje takie same wyniki jak mój kod powyżej. Znalazłem to rozwiązanie tutaj -- > załaduj json do zmiennej

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 .plik JSON, który widzisz w powyższym kodzie, jest hostowany na moim serwerze i zawiera ten sam obiekt danych json, który opublikował (oryginalny plakat).

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

6

Author: SpoonHonda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:47

Dziwię się, że import z es6 nie został wymieniony (użycie z małymi plikami)

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

Webpack 2 json-loader jako domyślnego pliku .json.

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

Dla Maszynopis :

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

TS2307 (TS) nie można znaleźć modułu 'JSON-loader!./ przedmieściajson "

Aby go uruchomić, musiałem najpierw zadeklarować moduł. Mam nadzieję, że to uratuje kilka godziny dla kogoś.

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

...

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

Jeśli próbowałem pominąć loader z json-loader otrzymałem następujący błąd z webpack:

BREAKING CHANGE: nie wolno już pomijać przyrostka '- loader' podczas używania ładowarek. Musisz podać "json-loader "zamiast " json", Zobacz też https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

6

Author: Ogglas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-26 14:31:03

Znalazłem ten wątek podczas próby (bezskutecznie) załadowania lokalnego pliku json. To rozwiązanie zadziałało dla mnie...

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

... i jest używany w ten sposób...

load_json("test2.html.js")

...a to jest <head>...

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

4

Author: TechSpud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-14 15:48:33

W angular (lub innym frameworku), możesz załadować używając HTTP get Używam go jakoś tak:

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

Mam nadzieję, że to pomoże.

3

Author: rajkiran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-06 02:24:53

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


             }
  });

2

Author: Karhan Vijay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-23 06:46:06

Jeśli używasz Lokalnej Tablicy dla JSON - tak jak pokazałeś w exmaple w pytaniu (test.json) wtedy możesz użyć parseJSON Metody JQuery - >

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

getJSON jest używany do pobierania JSON ze zdalnej strony - nie będzie działał lokalnie (chyba że używasz lokalnego serwera HTTP)

1

Author: ManseUK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-08 10:36:15

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

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

Zrobiłem to dla mojej aplikacji cordova, jak utworzyć nowy plik javascript dla JSON i wklejone dane JSON do String.raw następnie parsować go z JSON.parse

1

Author: Jeeva,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-01 21:29:26

Nie znalazłem żadnego rozwiązania przy użyciu biblioteki zamknięcia Google. Aby uzupełnić listę przyszłych vistorów, oto jak ładujesz JSON z lokalnego pliku z biblioteką Closure:

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

0

Author: Kenny806,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-26 14:29:17

Podejście, którego lubię używać, polega na zawijaniu / owijaniu pliku json literalnym obiektem, a następnie zapisywaniu pliku za pomocą .rozszerzenie pliku jsonp. Ta metoda pozostawia również oryginalny plik json (test.json) bez zmian, ponieważ będziesz pracował z nowym plikiem jsonp (test.jsonp). Nazwa na opakowaniu może być dowolna, ale musi być taka sama jak funkcja zwrotna, której używasz do przetwarzania jsonp. Użyję twojego testu.json zamieścił jako przykład pokazanie dodatku wrappera jsonp dla 'test.plik jsonp.

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

Następnie Utwórz zmienną wielokrotnego użytku z globalnym zakresem w skrypcie, aby trzymać zwrócony JSON. Spowoduje to, że zwrócone dane JSON będą dostępne dla wszystkich innych funkcji w skrypcie zamiast tylko funkcji zwrotnej.

var myJSON;

Następnie pojawia się prosta funkcja do pobierania json przez wstrzyknięcie skryptu. Zauważ, że nie możemy użyć jQuery tutaj, aby dołączyć skrypt do głowicy dokumentu, jak IE nie obsługuje jQuery .metoda dołączania. Metoda jQuery skomentowane w poniższym kodzie będą działać na innych przeglądarkach, które obsługują .metoda dołączania. Jest on zawarty jako odniesienie, aby pokazać różnicę.

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

Next to krótka i prosta funkcja wywołania zwrotnego (o tej samej nazwie co wrapper jsonp), która pobiera dane wyników json do zmiennej globalnej.

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

Dane json mogą być teraz dostępne przez dowolne funkcje skryptu za pomocą notacji kropkowej. Jako przykład:

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

Ta metoda może się nieco różnić od tego, czym jesteś przyzwyczajony do widzenia, ale ma wiele zalet. Po pierwsze, ten sam plik jsonp może być ładowany lokalnie lub z serwera przy użyciu tych samych funkcji. Jako bonus, jsonp jest już w formacie przyjaznym dla wielu domen i może być łatwo używany z API typu REST.

Oczywiście, nie ma żadnych funkcji obsługi błędów, ale po co ci one? Jeśli nie jesteś w stanie uzyskać danych json za pomocą tej metody, możesz się założyć, że masz pewne problemy w samym json i sprawdziłbym to na dobrym Walidator JSON.

0

Author: Epiphany,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-28 11:14:30

Możesz umieścić swój json w pliku javascript. Można to załadować lokalnie (nawet w Chrome) za pomocą funkcji getScript() jQuery.

Map-01.plik 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);
    });

Wyjście:

world width: 500

Zauważ, że zmienna json jest zadeklarowana i przypisana do pliku js.

0

Author: Victor Stoddard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-24 00:49:21

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

To, co zrobiłem, to przede wszystkim z zakładki sieć, rejestrowanie ruchu sieciowego dla usługi, a z ciała odpowiedzi, kopiowanie i zapisywanie obiektu json w pliku lokalnym. Następnie wywołaj funkcję o lokalnej nazwie pliku, powinieneś być w stanie zobaczyć obiekt json w jsonoutout powyżej.

0

Author: Feng Zhang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-23 22:29:59

To, co zadziałało dla mnie, to:

Wejście:

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

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

0

Author: Bishwas Mishra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-24 11:35:59

Jeśli masz zainstalowany Python na lokalnym komputerze( lub nie masz nic przeciwko instalacji), oto niezależne od przeglądarki obejście problemu z dostępem do plików JSON, którego używam:

Przekształć plik JSON w JavaScript, tworząc funkcję, która zwraca dane jako obiekt JavaScript. Następnie możesz załadować go za pomocą znacznika

Nadchodzi Kod Pythona

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]')

-4

Author: sytrus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-25 22:27:46

score 235 · Accepted Answer

$.getJSON jest asynchroniczny więc powinieneś zrobić:

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

235

Author: seppo0010,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-22 20:19:28