jak używać pliku json w kodzie html

Mam plik json mydata.json, w tym pliku są niektóre dane zakodowane przez json. Aby uzyskać te dane w pliku index.html, chcę uzyskać te dane w JavaScript. Ale nie wiesz jak połączyć plik connect.json w pliku .html?jak używać pliku json w kodzie html

Powiedz mi proszę. Oto moja json file:

{ 
    "items": [ 
     { 
      "movieID": "65086", 
      "title": "The Woman in Black", 
      "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg" 
     }, 
     { 
      "movieID": "76726", 
      "title": "Chronicle", 
      "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg" 
     } 
    ] 
}

myśląc, że jestem coraz plik json z serwera, jak wykorzystać ten plik w moim html, tak że mogę wyświetlić dane w tabelach w stronę html. Używam JavaScript do parsowania pliku json. Jestem nowy w tej dziedzinie. Pomóżcie proszę.

Źródło

2012-08-22 saikiran

Hi, można rozważyć dodanie więcej szczegółów do Twojego pytania. Czy korzystasz z jakichkolwiek frameworków JavaScript? (tj: jQuery) Co już próbowałeś? Jaki jest pożądany efekt końcowy? Dobre pytanie z jasnym celem pomoże uzyskać dobre odpowiedzi i przykłady od społeczności! Użyj linku "edytuj" pod swoim pytaniem, aby to poprawić. – BenSwayne

spójrz na link, który również podaje przykłady również http://api.jquery.com/jQuery.getJSON/ –

Nie jestem w stanie uzyskać przykładu. Proszę opracuj go ... – saikiran

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> 

<script> 

    $(function() { 


    var people = []; 

    $.getJSON('people.json', function(data) { 
     $.each(data.person, function(i, f) { 
      var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
      "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>" 
      $(tblRow).appendTo("#userdata tbody"); 
    }); 

    }); 

}); 
</script> 
</head> 

<body> 

<div class="wrapper"> 
<div class="profile"> 
    <table id= "userdata" border="2"> 
    <thead> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>City</th> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 

</div> 
</div> 

</body> 
</html>

mój plik json

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "job": "Reporter", 
      "roll": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "job": "Playboy", 
      "roll": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "job": "Photographer", 
      "roll": 40 
     } 
    ] 
}

Dostałem succeded w integratig plik json HTML tabeli po pracy dziennie na nim !!!

Źródło

2012-08-23 12:03:36 saikiran

co, jeśli jest to lokalny plik json? –

people.json to tylko lokalny json. podaj absolutny URL twojego lokalnego jsona do $ .getJSON – saikiran

wykorzystanie jQuery $.getJSON

$.getJSON('mydata.json', function(data) { 
    //do stuff with your data here 
});

Źródło

2012-08-23 05:19:51

jak połączyć jquery w moim pliku html ... proszę, pomóżcie mi! chcę pełnego kodu. Chcę wyświetlić moje dane w tabeli na mojej stronie html. podać przykładowy kod. więc mogę łatwo zrozumieć. dziękując w oczekiwaniu. – saikiran

dziękuję, mam odpowiedź ... – saikiran

Można użyć JavaScript jak ... 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>

Wystarczy uzyskaniu danych i dołączenie jej do div ... Początkowo drukowanie długość w stanie gotowości.

Oto mój plik Json: abc.json

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

Źródło

2017-07-31 19:53:57 javed

, że abc.json nie jest prawidłowym plikiem json, jego rzeczywistym javascript, więc tutaj właśnie wywołujesz plik javascript "abc.json" i ładuję go ... –

Jeśli chcesz załadować tablicę do zmiennej JavaScript z tego "JSON" możesz po prostu usunąć zewnętrzne pojedyncze cudzysłowy. W tym przypadku 'data' będzie tablicą zawierającą obiekty o właściwości' name'. W tym przypadku nie ma potrzeby stosowania 'JSON.parse()'. –

jak używać pliku json w kodzie html

Odpowiedz

Powiązane problemy