wie man eine json-Datei im html-Code verwendet

Question

wie man eine json-Datei im html-Code verwendet

Gefragt el 22 de August, 2012: Wann wurde die Frage gestellt
391450 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe eine json-Datei mydata.json und in dieser Datei befinden sich einige json-kodierte Daten.

Ich möchte diese Daten in einer Datei erhalten index.html und verarbeiten diese Daten in JavaScript. Aber ich weiß nicht, wie ich die Datei connect.json in eine html-Datei einbinden kann?

Sagen Sie es mir bitte. Hier ist mein json Datei:

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

Wenn ich denke, dass ich eine json-Datei vom Server erhalte, wie kann ich diese Datei in meiner Html-Datei verwenden, so dass ich die Daten in Tabellen auf der Html-Seite anzeigen kann. Ich verwende JavaScript zum Parsen der json-Datei. Ich bin neu auf diesem Gebiet. Helfen Sie mir bitte.

Gefragt el 22 de August, 2012 von saikiran

Answer 1

5 Antworten

Answer 2

73voto

saikiran Punkte 2106

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

Meine JSON Datei:

{
   "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
       }
   ]
}

Es ist mir gelungen, eine JSON Datei zu HTML Tisch nach einem Tag Arbeit daran!!!

Beantwortet el 23 de August, 2012 von saikiran (2106 Punkte )

Answer 3

27voto

Nicolas Brown Punkte 1486

Verwenden jQuery's $.getJSON

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

Beantwortet el 23 de August, 2012 von Nicolas Brown (1486 Punkte )

Answer 4

21voto

Sathnindu Kottage Punkte 1033

Sie können dies ganz einfach tun, ohne Jquery oder AJAX zu verwenden (siehe unten). Hier habe ich fetch API (Built-in) verwendet.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<div id="myData"></div>
<script type="text/javascript">
    fetch('data.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        let mainContainer = document.getElementById("myData");
        for (let i = 0; i < data.length; i++) {
            let div = document.createElement("div");
            div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;
            mainContainer.appendChild(div);
        }
    }
</script>
</body>
</html>

data.json

[
  {
    "id": "1",
    "firstName": "John",
    "lastName": "Doe"
  },
  {
    "id": "2",
    "firstName": "Mary",
    "lastName": "Peterson"
  },
  {
    "id": "3",
    "firstName": "George",
    "lastName": "Hansen"
  }
]

Beantwortet el 20 de Januar, 2022 von Sathnindu Kottage (1033 Punkte )

Answer 5

18voto

Javed Punkte 1464

Sie können JavaScript verwenden wie... Geben Sie einfach den richtigen Pfad zu Ihrer json-Datei an...

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

Einfach die Daten abrufen und an ein Div anhängen... Zunächst wird die Länge in alert ausgedruckt.

Hier ist meine Json-Datei: abc.json

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

Beantwortet el 31 de Juli, 2017 von Javed (1464 Punkte )

Answer 6

9voto

Sahan0710 Punkte 84

Hier sehen Sie, wie man das in einfachem JavaScript macht.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Test Page</title>
    </head>
    <body>
        <h2>Movie List</h2>
        <table id = "tb1" border = "1">
            <tr>
                <th>movieID</th>
                <th>title</th>
                <th>poster</th>
            </tr>
        </table>
        <script>
            fetch("mydata.json")
                .then(response => response.json())
                .then(data => {
                    for (var i = 0; i<data.items.length; i++){
                        let vmovieID = data.items[i].movieID;
                        let vtitle = data.items[i].title;
                        let vposter = data.items[i].poster;
                            document.querySelector("#tb1").innerHTML += `
                                <tr>
                                    <td>${vmovieID}</td>
                                    <td>${vtitle}</td>
                                    <td>${vposter}</td>
                                </tr>`;
                    }
                })
        </script>
    </body>
</html>

mydata.json

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

Beantwortet el 6 de Juni, 2022 von Sahan0710 (84 Punkte )

wie man eine json-Datei im html-Code verwendet

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

wie man eine json-Datei im html-Code verwendet

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: