2011-07-15 12 views
27

Mój skrypt aktualnie wygląda tak:Jak mogę uzyskać javascript do odczytu z pliku .json?

<script type="text/javascript"> 
    function updateMe(){ 
    var x = 0; 
    var jsonstr = '{"date":"July 4th", "event":"Independence Day"}'; 
    var activity=JSON.parse(jsonstr); 
    while(x<10){ 
    date = document.getElementById("date"+x).innerHTML = activity.date; 
    event = document.getElementById("event"+x).innerHTML = activity.event; 
    x++; 
    } 
    } 
</script> 

Jeżeli data „x” i zdarzenie „x” to seria znaczników HTML. Ta funkcja działa, gdy strona ładuje się (ładowanie). Moim celem jest zrobić dokładnie to samo, tylko z lokalnego pliku .json w przeciwieństwie do twardego kodu, który mam powyżej. Sprawdziłem już numer http://api.jquery.com/jQuery.getJSON/.

lokalnego pliku .json wygląda następująco:

{"date":"July 4th", "event":"Independence Day"} 

jakieś sugestie?

+1

Mógłbyś wyjaśnić, jeśli masz na myśli „plik json w systemie plików” lub „plik json hostowane na serwerze sieci Web”. – ironchefpython

+0

Niestety .... jest to plik json w systemie plików, przechowywany w tym samym folderze, co strona html. – MTP

+0

W takim razie odpowiedź, której udzieliłem, używając sformatowanego pliku jsonp, jest tym, czego szukasz. Nie zapomnij oznaczyć odpowiedzi, która została zaakceptowana, gdy twoje pytanie zostało zadowalająco odpowiedział. – ironchefpython

Odpowiedz

29

Zakładając, że masz na myśli "plik w lokalnym systemie plików", gdy mówisz o pliku .json.

Będziesz musiał zapisać dane json sformatowane jako jsonp i użyć file:// url, aby uzyskać do niego dostęp.

Twój HTML będzie wyglądać następująco:

<script src="file://c:\\data\\activity.jsonp"></script> 
<script type="text/javascript"> 
    function updateMe(){ 
    var x = 0; 
    var activity=jsonstr; 
    foreach (i in activity) { 
     date = document.getElementById(i.date).innerHTML = activity.date; 
     event = document.getElementById(i.event).innerHTML = activity.event; 
    } 
    } 
</script> 

i plik c: \ data \ activity.jsonp zawiera następującą linię:

jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ]; 
+0

DZIĘKUJEMY ... to było bardzo pomocne. Jednak nie jestem jeszcze pewien, jak uzyskać dostęp do poszczególnych elementów JSONP. Mogę wydrukować całą "aktywność" w porządku, ale jeśli spróbuję activity.date, to będzie krzyczeć "Undefined". Jakieś pomysły, dlaczego? Obecnie używam alert() do testowania. – MTP

+0

Czy możesz dodać zmianę pod oryginalnym pytaniem, aby wyświetlić zawartość pliku JSONP, którego używasz? – ironchefpython

+0

Twoja ścieżka do pliku .jsonp zakończy się niepowodzeniem - ukośniki odwrotne będą widoczne jako ucieczki i wątpię, aby użytkownik miał "c: dataactivity.jsonp" na swoim dysku. adresy plików używają ukośników do przodu. –

2

Można zrobić to podoba ... Wystarczy podać właściwą ścieżkę do pliku json ...

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript" src="abc.json"></script> 
      <script type="text/javascript" > 
       function load() { 
        var mydata = JSON.parse(data); 
        alert(mydata.length); 

        var div = document.getElementById('data'); 

        for(var i = 0;i < mydata.length; i++) 
        { 
         div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>"; 
        } 
       } 
     </script> 
    </head> 
    <body onload="load()"> 
    <div id= "data"> 

    </div> 
    </body> 
</html> 

Po prostu pobieranie danych i dołączanie do elementu div ... Początkowo drukowanie długości w stanie alertu.

Oto mój plik Json: abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]'; 
Powiązane problemy