时间戳

首页 > 解决方案 > 如何将 Json 数据插入 Html Divs？

javascript - 如何将 Json 数据插入 Html Divs？

问题描述

这是我的 json 文件“contact.json”

[
   {
      "name":"Alice",
      "surname":"Smith"
   },
   {
     "name":"Bob",
      "surname":"Walter"
   }
]

我试图实现的是用javascript（+jquery）读取这个文件填充html div（基于联系人的数量）并将名字和姓氏放在div中。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <meta name="description" content="Test">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="people.json"></script>
    </head>
    <body>

     <section id="contacs">
       <div class="grid-3">               
            <div class="box">
                   <h3 class="name"></h3>
                   <h3 class="surnamename"></h3>                         
             </div>                               
       </div>
     </section>  
  </body>
</html>

这是我到目前为止所写的；

load();

function load(){

var name=document.querySelector(".name");
var surname=document.querySelector(".surname");

    $.getJSON("contact.json", function (data) {
    $.each(data, function (index, value) {
       console.log(value);
       name.innerHTML= value.name;
       surname.innerHTML= value.surname;


    });
});

所以我可以让联系人在控制台中写入它们，但我无法将它们传递到 innerHTML 并且不知道如何填充名为“box”的 Html div。

标签： javascripthtmljson

解决方案

将 Id 给父div说容器，创建动态h3元素并将其附加到父级div

HTML：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <meta name="description" content="Test">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="people.json"></script>
    </head>
    <body>

     <section id="contacs">
       <div class="grid-3" id="container">               
            <div class="box">
                   <h3 class="name"></h3>
                   <h3 class="surnamename"></h3>                         
             </div>                               
       </div>
     </section>  
  </body>
</html>

查询：

var data = [
   {
      "name":"Alice",
      "surname":"Smith"
   },
   {
     "name":"Bob",
      "surname":"Walter"
   }
];

load();

function load(){

var name=document.querySelector(".name");
var surname=document.querySelector(".surname");

    $.each(data, function (index, value) {
        var parent = document.createElement('div');
      parent.className = 'box';
      var $name = $('<h3 class="name">').text(value.name);
      var $surname = $('<h3 class="surname">').text(value.surname);
      $name.appendTo(parent);
      $surname.appendTo(parent);
      $(parent).appendTo($('#container'));
    });
}

JSFiddle

推荐阅读