Как загружать HTML-элементы динамически на основе ввода JSON? - PullRequest
Новая
       4

Как загружать HTML-элементы динамически на основе ввода JSON?

0 голосов
/ 07 октября 2018

Как перебрать входной массив объекта?

В настоящее время включены только 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 голосов
/ 07 октября 2018

Я предполагаю, что вы хотите перебрать JSON и обновить innerHTML отдельных элементов.Приведенный ниже код может помочь вам в этом, но вы должны убедиться, что имя вашего HTML-элемента должно совпадать с именем свойства JSON.Ex.этот код не будет работать для: 

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];
    }
  }
}
<div class="flexcontainer">
    <div>
        <img src="" alt="Employee's Picture" id="picture">
    </div>
    <div>
        <ul>
          <li>
              <h3>Full name: <span id="name"></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>
0 голосов
/ 07 октября 2018

Попробуйте 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>
0 голосов
/ 07 октября 2018

Если вы можете использовать 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];
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...