Ładowanie lokalnego pliku JSON

322

Próbuję załadować lokalny plik JSON, ale 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"]);

Plik test.json:

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

Nic nie jest wyświetlane, a Firebug mówi mi, że dane są niezdefiniowane. W Firebug widzę json.responseTexti jest dobry i prawidłowy, ale dziwne jest, gdy kopiuję wiersz:

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

w konsoli Firebug działa i mogę uzyskać dostęp do danych.

Czy ktoś ma rozwiązanie?

javascript jquery json firebug local-files Patrick Browne
źródło
Po zwróceniu JSONciągu już pobierasz obiekt javascript, nie musisz go używać eval().
yoda
1
Jak nazywasz „lokalny” plik json? lokalny w przeglądarce lub na serwerze?
seppo0010
2
Nie podałeś nam wystarczających szczegółów. Plik test.jsonnie określa żadnej ścieżki, dlatego jest względnym identyfikatorem URI względem lokalizacji strony, która ma do niego dostęp. Tak jak @ seppo0010 mówi, że będzie lokalny dla serwera, jeśli strona znajduje się gdzieś na zdalnym serwerze i będzie względny w stosunku do twojego komputera, jeśli strona znajduje się w lokalnym systemie plików, do którego file://protokół ma dostęp.
hippietrail

Odpowiedzi:

292

$.getJSON jest asynchroniczny, dlatego powinieneś:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
seppo0010
źródło
47
Czy naprawdę masz dostęp do lokalnego pliku?
maasha
3
Nie, nie może być plikiem, ale musi być obsługiwany przez serwer WWW.
Kris Erickson
15
Absolutnie poprawne. Bezpieczeństwo Chromesa jest znacznie ściślejsze niż Firefox lub inne. Ładowanie czegokolwiek za pomocą xhr, Josn, Xml itp. Jest prawie całkowicie zablokowane w Chrome, z wyjątkiem jednej lub dwóch rzeczy.
shawty
1
Próbowałem tego, ale bez powodzenia. Brak błędów również w konsoli :(
Govind Kailas
11
Polecam użyć myjson.com do przesłania lokalnego pliku i uzyskania dostępu do niego z przeglądarki Chrome.
Programista chemiczny
167

Miałem tę samą potrzebę (aby przetestować moją aplikację angularjs), a jedynym sposobem, jaki znalazłem, jest użycie wymaga.js:

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

Uwaga: plik jest ładowany raz, kolejne wywołania wykorzystają pamięć podręczną.

Więcej informacji na temat czytania plików za pomocą nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

need.js: http://requirejs.org/

Ehvince
źródło
4
Jeśli robisz to ze żartem, pamiętaj, aby to zrobić jest.dontMock('./data.json');, w przeciwnym razie wynik będzie pusty. Może się przydać komuś tam :)
Håvard Geithus
1
Jaki jest kontekst tego kodu? Co robisz z json?
Drazen Bjelovuk
4
Prosimy podać pełny przykład: Otrzymuję błąd:has not been loaded yet for context: _. Use require([])
Shaijut
2
wymagany nie działa w przeglądarce, ponieważ jest to moduł node.js. jeśli OP chce załadować go do przeglądarki, właściwym rozwiązaniem jest użycie funkcji pobierania.
sniffingdoggo
1
Tak, wymagany jest dla węzła, ale wymaganyJS może być również używany w przeglądarkach: „RequireJS to plik JavaScript i moduł ładujący. Jest zoptymalizowany do użytku w przeglądarce, ale może być używany w innych środowiskach JavaScript, takich jak Rhino i Node. „
Per Quested Aronsson
95

W bardziej nowoczesny sposób możesz teraz korzystać z interfejsu API pobierania :

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

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

źródło:

aloisdg przechodzi na codidact.com
źródło
1
Czy podczas korzystania z interfejsu Fetch API nadal masz dostęp do plików lokalnych, chyba że wyłączysz ustawienie zabezpieczeń?
LarsH
3
@LarsH Najwyraźniej tak, wypróbowałem to dziś rano i api nie może odczytać lokalnego pliku json ze schematem file: //. To podejście wygląda tak czysto, ale nie można go używać do plików lokalnych
keysl
1
@keysl OK, chyba ze względów bezpieczeństwa chyba tak musi być. (I masz rację, miałem na myśli „zabronione uzyskiwanie dostępu do plików za pomocą file://schematu.) Ale to jest całkiem czyste podejście. Zacząłem używać go dzięki tej odpowiedzi.
LarsH
Nie możesz uzyskać dostępu do lokalnych plików za pomocą funkcji pobierania API
Anton Zlydenko
89

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

Używa korzysta z 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 wprowadzenie do FileReadera: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
źródło
4
FileReader API nie jest obsługiwany w IE 8 lub 9, ale wszystkie inne przeglądarki są OK: caniuse.com/#search=filereader
northben
Działa idealnie w Chrome, zobaczysz swoje dane wnewArr
Belter
Ta odpowiedź jest ładna i nieco inna, ponieważ nie używa jQuery.
DigitalDesignDj
78

Jeśli szukasz czegoś szybkiego i brudnego, po prostu załaduj dane do nagłówka dokumentu 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"}
})();

Powinienem wspomnieć, że Twój rozmiar sterty (w Chrome) wynosi około 4 GB, więc jeśli twoje dane są większe, powinieneś znaleźć inną metodę. Jeśli chcesz sprawdzić inną przeglądarkę, spróbuj tego:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
Jwerre
źródło
masz rację, że AMD by działało, ale nie sądzę, że AMD jest tutaj dobrym rozwiązaniem. najprostszym jest użycie $ .getJSON. dzięki
Patrick Browne,
7
@PatrickBrowne tak, getJSON to dobre rozwiązanie, ale myślę, że w wielu przypadkach będziesz mieć problem z domeną (np. Ładowanie danych z S3).
jwerre
Uważam, że jest to dla mnie najprostsze rozwiązanie. Plik JSON wygląda prawie tak samo, więc nie ma zbędnego bałaganu (tylko „var xyz =” na samej górze pliku). Nikt nie chce pliku dużych danych w swoim kodzie.
cslotty
Jest to błędne na wielu poziomach, nie rozumiem, jak ma tyle głosów, tutaj wyjaśnia więcej, jeśli ktoś chce zobaczyć codepen.io/KryptoniteDove/post/… „Wiele przykładów dowodzi, że możesz uzyskać dostęp do danych za pomocą prosta funkcja, taka jak ta poniżej. W rzeczywistości nie jest to ładowanie dokumentu JSON, ale tworzenie obiektu JavaScript. Ta technika nie będzie działać dla prawdziwych plików JSON. ”
lesolorzanov,
1
szczerze mówiąc, jest to świetne rozwiązanie, jeśli masz tylko trochę danych w puszkach i chcesz wyświetlać statyczną stronę
Evan Pu
19

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

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);
    });
}
Rozwiń fragment kodu

xgqfrms
źródło
@Pier, jeśli używasz lokalnego serwera aplikacji, takiego jak Tomcat, Xampp lub Jboss. praca nad skryptem
Mirko Cianfarani,
@MirkoCianfarani rzeczywiście, ponieważ nie używasz file:///protokołu, a plik nie może już być uważany za lokalny.
Molo
@xgqfrms Fetch API jest niesamowity!
xgqfrms
2
//xobj.status jest liczbą całkowitą xobj.status === "200" powinno być xobj.status === 200
yausername
@ nazwa_użytkownika masz rację, przepraszam za ten typ błędu i został on poprawiony.
xgqfrms,
14

Nie mogę uwierzyć, ile razy udzielono odpowiedzi na to pytanie, nie rozumiejąc i / lub nie rozwiązując problemu z faktycznym kodem Pierwotnego Postera. To powiedziawszy, sam jestem początkujący (tylko 2 miesiące kodowania). Mój kod działa idealnie, ale możesz sugerować wszelkie zmiany w nim. 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 napisania 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 także użyć $ .ajax zamiast $ .getJSON, aby napisać kod dokładnie w ten sam sposób:

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

Wreszcie, ostatnim sposobem jest zawinięcie $ .ajax w funkcji. Nie mogę przypisać sobie tego, ale trochę go zmodyfikowałem. Przetestowałem to 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);

Plik test.json widoczny w powyższym kodzie znajduje się na moim serwerze i zawiera ten sam obiekt danych json, który opublikował (oryginalny plakat).

{
    "a" : "b",
    "c" : "d"
}
SpoonHonda
źródło
11

Dziwi mnie, że nie wymieniono importu z es6 (używaj z małymi plikami)

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

webpack 2 <używa json-loaderdomyślnie .jsonplików.

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

W przypadku TypeScript :

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

TS2307 (TS) Nie można znaleźć modułu „json-loader! ./ suburbs.json”

Aby go uruchomić, musiałem najpierw zadeklarować moduł. Mam nadzieję, że zaoszczędzi to komuś kilka godzin.

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

...

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

Gdybym próbował pominąć loaderze json-loadermam następujący błąd z webpack:

ZMIANA ZMIANY: Nie można już pomijać sufiksu „-loader” podczas korzystania z programów ładujących. Musisz podać „json-loader” zamiast „json”, patrz https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Ogglas
źródło
1
łatwe i jednoznaczne.
Our_Benefactors
Nie można użyć instrukcji importu es6, gdy strona jest załadowana plikiem: protokół.
Onno van der Zee
6

Wypróbuj w taki sposób (ale pamiętaj też, że JavaScript nie ma dostępu do systemu plików klienta):

$.getJSON('test.json', function(data) {
  console.log(data);
});
Samich
źródło
4

Znalazłem ten wątek podczas próby (bezskutecznie) załadowania lokalnego pliku json. To rozwiązanie dział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>
TechSpud
źródło
2
Nie wydaje się to bardzo przydatne. Na przykład, jeśli plik json jest obsługiwany przez serwer zdalny, limit czasu 100 ms może nie wystarczyć do załadowania. A ponieważ czas zależy od szybkości połączenia klienta, należy ustawić bardzo długi limit czasu dla klientów z wolnym połączeniem. W skrócie, setTimeout nie powinien być używany do oczekiwania na załadowanie zasobu.
Kenny806
1
Kenny806 - Ma na celu rozwiązanie konkretnego problemu - ładowanie zasobów lokalnych (w przypadku strony nie hostowanej), co oznacza, że ​​nie można go wielokrotnie używać. Istnieje tysiące rozwiązań ładowania zasobów dla stron hostowanych w Internecie. To nie jest rozwiązanie, to rozwiązanie. Naprawdę łatwo jest zmienić limit czasu. Czy usuwając limit czasu sugerujesz, że nieskończone oczekiwanie jest dopuszczalne?
TechSpud
2
Nie sugeruję nieskończonego oczekiwania, sugeruję zastosowanie techniki, która pozwala reagować na ładowanie pliku, jak tylko zostanie on zakończony. Mój problem z przekroczeniem limitu czasu polega na tym, że zawsze trzeba czekać na zakończenie. Nawet jeśli plik załadowałby się w 10 ms, nadal czekałbyś na 100 ms. I tak, dostosowanie limitu czasu jest łatwe, ale sugerujesz zmianę kodu za każdym razem, gdy chcesz załadować inny plik lub gdy zmienia się rozmiar pliku (aby zoptymalizować oczekiwanie). Takie rozwiązanie jest błędne IMHO i może powodować wiele bólów głowy w przyszłości, zwłaszcza gdy ktoś inny spróbuje go użyć.
Kenny806
Każdy, kto używa tego skryptu, powinien używać go jako podstawy do własnych skryptów. Masz prawo do swojej opinii, czy ten skrypt jest nieprawidłowy. Dlaczego nie zaproponować alternatywnego rozwiązania? To na pewno nie zadziała we wszystkich przypadkach użycia. Działa dla mnie, ładując plik lokalny z lokalnej strony HTML. Udostępniłem moje rozwiązanie tego pytania, mając nadzieję, że pomoże to komuś innemu. Czy próbujesz załadować zasób lokalny? Dlaczego nie przekazać wartości limitu czasu jako zmiennej na podstawie ładowanego pliku? Ajax na lokalnych plikach jest dość ograniczony.
TechSpud
1
Lepiej skorzystaj z onreadystatechange lub onload i nadaj im funkcję. script.onload = nazwa funkcji;
Shane Best
4

W TypeScript możesz użyć importu, aby załadować lokalne pliki JSON. Na przykład ładowanie font.json:

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

Wymaga to flagi tsconfig --resolveJsonModule:

// tsconfig.json

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

Aby uzyskać więcej informacji, zobacz informacje o wersji maszynopisu: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
źródło
Może pisać bardziej szczegółowo, ponieważ odpowiedź jest nieco niejasna.
Zatoka
3

W angular (lub dowolnym innym frameworku), możesz załadować używając http get Używam go mniej więcej tak:

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

Mam nadzieję że to pomoże.

rajkiran
źródło
3

To, co zrobiłem, to trochę zmodyfikowałem plik JSON.

myfile.json => myfile.js

W pliku JSON (ustaw zmienną JS)

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

Na końcu,

export default x;

Następnie,

import JsonObj from './myfile.js';

Supun Kavinda
źródło
3

Jeśli używasz lokalnej tablicy dla JSON - jak pokazano w przykładzie w pytaniu (test.json), możesz użyć parseJSON()metody JQuery ->

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

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

Manse
źródło
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
źródło
1

Podejście, które lubię stosować, to wstawić / owinąć Json literałem obiektu, a następnie zapisać plik z rozszerzeniem .jsonp. Ta metoda pozostawia również oryginalny plik json (test.json) bez zmian, ponieważ zamiast tego będziesz pracować z nowym plikiem jsonp (test.jsonp). Nazwa na opakowaniu może być dowolna, ale musi być taka sama jak funkcja wywołania zwrotnego, której używasz do przetwarzania pliku jsonp. Wykorzystam twój test.json opublikowany jako przykład, aby pokazać dodanie opakowania jsonp dla pliku „test.jsonp”.

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

Następnie utwórz w skrypcie zmienną wielokrotnego użytku o zasięgu globalnym, aby przechowywać zwracany JSON. Dzięki temu zwrócone dane JSON będą dostępne dla wszystkich innych funkcji w skrypcie zamiast tylko funkcji wywołania zwrotnego.

var myJSON;

Dalej jest prosta funkcja do odzyskania twojego jsona przez wstrzyknięcie skryptu. Zauważ, że nie możemy tutaj użyć jQuery do dołączenia skryptu do nagłówka dokumentu, ponieważ IE nie obsługuje metody .append jQuery. Metoda jQuery skomentowana w poniższym kodzie będzie działać w innych przeglądarkach, które obsługują metodę .append. Jest on dołączony 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)
}

Dalej jest krótka i prosta funkcja wywołania zwrotnego (o tej samej nazwie co opakowanie jsonp), aby pobrać 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
}

Do danych json można teraz uzyskać dostęp za pomocą dowolnej funkcji 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 nieco różnić się od tego, do czego jesteś przyzwyczajony, ale ma wiele zalet. Po pierwsze, ten sam plik jsonp można załadować lokalnie lub z serwera za pomocą tych samych funkcji. Jako bonus, jsonp jest już w formacie przyjaznym dla wielu domen i może być również łatwo używany z interfejsami API typu REST.

To prawda, że ​​nie ma żadnych funkcji obsługi błędów, ale dlaczego miałbyś ich potrzebować? Jeśli nie możesz uzyskać danych JSON przy użyciu tej metody, możesz założyć się, że masz pewne problemy w samym JSONie i sprawdziłbym to na dobrym walidatorze JSON.

Olśnienie
źródło
1

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

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

wynik:

world width: 500

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

Victor Stoddard
źródło
0

Nie znalazłem żadnego rozwiązania przy użyciu biblioteki Google Closure. Aby uzupełnić listę przyszłych vistorów, oto jak załadować JSON z pliku lokalnego za pomocą biblioteki 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);
});
Kenny806
źródło
0 

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

console.log(obj[0]["name"]);
Rozwiń fragment kodu

Zrobiłem to dla mojej aplikacji Cordova, tak jak utworzyłem nowy plik javascript dla JSON i wkleiłem dane JSON, String.rawa następnie parsowałem je za pomocąJSON.parse

Jeeva
źródło
Jeśli jest to plik javascript, dlaczego obiekt tak robi, a nie po prostu używa JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
Nuno André
Użyłem tego, ponieważ pobrałem trochę danych JSON za pomocą ajax, które przyszły jako ciąg znaków, więc używam JSON.parsedo konwersji na obiekt 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");

To, co zrobiłem, to przede wszystkim z karty sieciowej, zanotuj ruch sieciowy dla usługi oraz z treści odpowiedzi, skopiuj i zapisz obiekt json w pliku lokalnym. Następnie wywołaj funkcję z lokalną nazwą pliku, powinieneś zobaczyć obiekt json w powyższym jsonOutout.

Feng Zhang
źródło
2
Proszę wyjaśnić swoje rozwiązanie zamiast po prostu wkleić kod. Tylko rozwiązanie wyjaśniające, w jaki sposób rozwiązało problem, pomoże społeczności.
gmuraleekrishna
Uwaga: Wymaga InternetExplorer
Sancarn
0

Dla mnie zadziałało:

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>
Bishwas Mishra
źródło
-4

Jeśli masz zainstalowany Python na komputerze lokalnym (lub nie masz nic przeciwko instalacji), oto niezależne od przeglądarki obejście problemu lokalnego dostępu do pliku 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 tagiem <script> i wywołać funkcję, aby uzyskać potrzebne dane.

Nadchodzi kod Python

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
źródło