堆棧內存溢出
  簡體   English   中英

如何在html代碼中使用json文件

[英]how to use json file in html code

 原文  2012-08-22 09:57:04  5   5    javascript/ jquery/ html/ json/ get

問題描述

我有 json 文件mydata.json ，在這個文件中有一些 json 編碼的數據。

我想在文件index.html中獲取這些數據並在 JavaScript 中處理這些數據。 但是不知道如何在 .html 文件中連接.json 文件？

請告訴我。 這是我的json文件：

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

認為我正在從服務器獲取 json 文件，如何在我的 html 中使用該文件，以便我可以在 html 頁面的表格中顯示數據。 我正在使用 JavaScript 來解析 json 文件。 我是這個領域的新手。 請幫忙。

5 個解決方案

解決方案1
 67 已采納  2012-08-23 12:03:36

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

我的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
       }
   ]
}

經過一天的工作，我成功地將JSON文件集成到HTML表中！！！

解決方案2
 26  2012-08-23 05:19:51

使用 jQuery 的$.getJSON

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

解決方案3
 12  2017-07-31 19:53:57

您可以使用 JavaScript，例如...只需提供 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>

只需獲取數據並將其附加到 div... 最初在警報中打印長度。

這是我的 Json 文件：abc.json

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

解決方案4
 11  2022-01-20 04:23:44

您可以輕松地做到這一點，而無需像下面那樣使用 Jquery 或 AJAX。 在這里，我使用了 fetch API（內置）。

索引.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>

數據.json

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

解決方案5
 1  2022-06-06 10:58:49

以下是使用純 JavaScript 的方法。

索引.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>

我的數據.json

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 html 中使用 JSON 文件？ 如何在 VS Code 中使用 Libman json 文件？ 如何在當前 html 代碼中使用外部 html 文件 如何提取嵌入在html文件中的javascript代碼中的JSON對象？ 如何在我的HTML網頁中使用JSON文件 如何使用 JSON 文件作為 HTML、CSS 和 Vanilla Z686155AF75A60A0F6EZED8 項目的數據庫 如何在 Angular 8 中使用來自 HTML 輸入的 JSON 文件？ 將json代碼集成到d3 html文件中 如何在HTML中使用JSON數據 如何在html中使用可緩存的json
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM