如何根据输入json动态加载html元素？

时间：2018-10-07 13:52:17

标签： javascript jquery html json ecmascript-6

如何遍历对象的输入数组？

当前仅包含2个人信息。但是输入的信息超过50个人，需要遍历所有信息。

示例代码： 

const json = [
  {
    _id: "5af5cf0270d455a211200d4c",
    isActive: true,
    balance: "$3,507.97",
    picture: "http://placehold.it/32x32",
    age: 24,
    eyeColor: "brown",
    name: "Ahmed",
    gender: "male",
    company: "ATW",
    email: "atw@atw.com",
    phone: "+1 98908098",
    address: "661 Terrace Place, Elliott, Ohio, 9927",
    about:
      "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
    registered: "2014-12-10T07:18:10 +02:00",
    latitude: -84.359436,
    longitude: 156.008804,
    tags: [
      "excepteur",
      "eiusmod",
      "laboris",
      "fugiat",
      "minim",
      "dolor",
      "qui"
    ],
    friends: [
      {
        id: 0,
        name: "Shields Terrell"
      },
      {
        id: 1,
        name: "Hilary Bruce"
      },
      {
        id: 2,
        name: "Lorraine Torres"
      }
    ]
  },
  {
    _id: "5af5cf0254f91fa2d555e1ae",
    isActive: false,
    balance: "$2,219.42",
    picture: "http://placehold.it/32x32",
    age: 27,
    eyeColor: "blue",
    name: "Maisa",
    gender: "female",
    company: "INTERFIND",
    email: "aqr@qra.com",
    phone: "+1 9780989080980",
    address: "595 Foster Avenue, Villarreal, Massachusetts, 4604",
    about:
      "Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\r\n",
    registered: "2015-07-08T01:24:50 +03:00",
    latitude: -38.471736,
    longitude: -158.491974,
    tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"],
    friends: [
      {
        id: 0,
        name: "Dina Berger"
      },
      {
        id: 1,
        name: "Carmella Mckinney"
      },
      {
        id: 2,
        name: "Campbell Wooten"
      }
    ]
  }
];


document.getElementById("name").innerHTML = `${json[0].name}`;
document.getElementById("fullname").innerHTML = `${json[0].name}`;
document.getElementById("gender").innerHTML = `${json[0].gender}`;
document.getElementById("phone").innerHTML = `${json[0].phone}`;
document.getElementById("company").innerHTML = `${json[0].company}`;
document.getElementById("address").innerHTML = `${json[0].address}`;
document.getElementById("about").innerHTML = `${json[0].about}`;
document.getElementById("registered").innerHTML = `${json[0].registered}`;

HTML： 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Employee's Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>
    <h1><span id="name"></span></h1>
    <div class="container" style="border:1px solid #cecece;">

        <div class="flexcontainer">
            <div>
                <img src="" alt="Employee's Picture" id="picture">
            </div>
            <div>
                <ul>
                    <li>
                        <h3>Full name: <span id="fullname"></span></h3>
                    </li>
                    <li>
                        <h3>Gender: <span id="gender"></span></h3>
                    </li>
                    <li>
                        <h3>Phone number: <span id="phone"></span></h3>
                    </li>
                    <li>
                        <h3>Company: <span id="company"></span></h3>
                    </li>
                    <li>
                        <h3>Address: <span id="address"></span></h3>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <h3>About employee:</h3>
            <p><span id="about"></span></p>
        </div>

        <div>
            <h3>Employee was registered in the system: <span id="registered"></span></h3>
        </div>

    </div>
</body>
<script src="./assets/js/jsonlast.js"></script>



</html>

HTML页面（在我的问题中）通过一个表连接到另一个页面，该表包含json文件中人员的所有姓名。所需要的是，每当单击表中的name时，它都应该带我到employee.html（我在问题中包括的html页），但要包含该人的信息。

3 个答案:

答案 0 :(得分：1)

我假设您想遍历JSON并更新各个元素的innerHTML。请注意，尽管您必须确保HTML元素名称必须与JSON属性的名称匹配，但是下面的代码可以帮助您实现这一目标。例如该代码不适用于：

.centered{position:absolute; top:50%; left:50%;}

应该是：

document.getElementById("image").src = `${json[0].picture}`;

因此，在使用解决方案之前，请将图像元素更新为：

document.getElementById("picture").src = `${json[0].picture}`;

为了显示多个人使用此解决方案，我添加了两个循环，外部循环将遍历每个人的记录：

将您的<img src="" id="picture" /> 修改为<ul>...</ul> 

<ul id="personList">...</ul>
const json = [
  {
    _id: "5af5cf0270d455a211200d4c",
    isActive: true,
    balance: "$3,507.97",
    picture: "http://placehold.it/32x32",
    age: 24,
    eyeColor: "brown",
    name: "Ahmed",
    gender: "male",
    company: "ATW",
    email: "atw@atw.com",
    phone: "+1 98908098",
    address: "661 Terrace Place, Elliott, Ohio, 9927",
    about:
      "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
    registered: "2014-12-10T07:18:10 +02:00",
    latitude: -84.359436,
    longitude: 156.008804,
    tags: [
      "excepteur",
      "eiusmod",
      "laboris",
      "fugiat",
      "minim",
      "dolor",
      "qui"
    ],
    friends: [
      {
        id: 0,
        name: "Shields Terrell"
      },
      {
        id: 1,
        name: "Hilary Bruce"
      },
      {
        id: 2,
        name: "Lorraine Torres"
      }
    ]
      },
      {
    _id: "5af5cf0254f91fa2d555e1ae",
    isActive: false,
    balance: "$2,219.42",
    picture: "http://placehold.it/32x32",
    age: 27,
    eyeColor: "blue",
    name: "Maisa",
    gender: "female",
    company: "INTERFIND",
    email: "aqr@qra.com",
    phone: "+1 9780989080980",
    address: "595 Foster Avenue, Villarreal, Massachusetts, 4604",
    about:
      "Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\r\n",
    registered: "2015-07-08T01:24:50 +03:00",
    latitude: -38.471736,
    longitude: -158.491974,
    tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"],
    friends: [
      {
        id: 0,
        name: "Dina Berger"
      },
      {
        id: 1,
        name: "Carmella Mckinney"
      },
      {
        id: 2,
        name: "Campbell Wooten"
      }
    ]
  }
];

let i = 1;
for(var key in json[i]){
  if(key === "picture"){
    document.getElementById(key).src = json[i][key];
  } else {
    let spanElement = document.getElementById(key);
    if (spanElement){
      spanElement.innerHTML = json[i][key];
    }
  }
}

答案 1 :(得分：0)

如果您可以使用EMCAScript 5，则可以使用它来遍历json[0]对象。

Object.keys(json[0]).forEach(function(key) {
    var el = document.getElementById(key);
    var isImg = (el.nodeName.toLowerCase() === 'img');
    if (isImg) el.src = json[0][key];
    else el.innerHTML = json[0][key];
});

答案 2 :(得分：0)

尝试JSON.parse()，这是一个内置函数，可以将json格式转换为javascript对象。然后，您可以使用此对象更改您的内容。例如：

let JSON_object = "{\"name\": \"willem\", \"fullname\": \"van der Veen\" }"

const parsedObj = JSON.parse(JSON_object)

document.getElementById("name").innerHTML = parsedObj.name;
document.getElementById("fullname").innerHTML = parsedObj.fullname;
<div id="name">random</div>
<div id="fullname">random</div>

相关问题
最新问题