时间戳

首页 > 解决方案 > 无法在 div 上显示循环的 JSON 数据

javascript - 无法在 div 上显示循环的 JSON 数据

问题描述

在我使用 fetch 从模拟 API 中提取数据后，我设法循环数据并将其发布到我的控制台上。我无法将数据发布到要在页面上显示的 div 上。帮助将不胜感激。提前致谢！

$(document).ready(function() {
  const fetchData = async() => {
    const response = await fetch('https://n161.tech/api/dummyapi/user?limit=5&page=1');
    const data = await response.json();
    //  items = JSON.stringify(data);
    console.log(data);
    for (var i = 0; i < data.data.length; i++) {
      var obj = data.data[i];
      console.log(obj);
    }
  }
  fetchData();
});

html 供参考（尚未使用 CSS 设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pictures&users</title>

    <link rel="stylesheet" href="main.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- <script scr="fetch.js"></script> -->
    <script src="fetch.js"></script>
</head>
<body>
        <div class="container-fluid">
                <div class="row">
                  <div class="col div1">Column</div>
                  <div class="col">Column</div>
                </div>
              </div>
</body>
</html>

基本上我希望其中一个 DIV 从获取的 JSON 中发布某些值。另一个将用于硬编码图像。我当然会添加

我需要特定的值。我在香草 JS 中无法实现这一点。

用于参考的 JSON

{
  "data": [
    {
      "id": 6,
      "nameTitle": "ms",
      "firstName": "Madeleine",
      "lastName": "Brown",
      "image": "https://randomuser.me/api/portraits/women/65.jpg"
    },
    {
      "id": 7,
      "nameTitle": "mr",
      "firstName": "Akseli",
      "lastName": "Ruona",
      "image": "https://randomuser.me/api/portraits/men/90.jpg"
    },
    {
      "id": 8,
      "nameTitle": "ms",
      "firstName": "Jennifer",
      "lastName": "West",
      "image": "https://randomuser.me/api/portraits/women/53.jpg"
    },
    {
      "id": 9,
      "nameTitle": "mrs",
      "firstName": "Carlucia",
      "lastName": "Das neves",
      "image": "https://randomuser.me/api/portraits/women/52.jpg"
    },
    {
      "id": 10,
      "nameTitle": "mrs",
      "firstName": "Silviane",
      "lastName": "Peixoto",
      "image": "https://randomuser.me/api/portraits/women/76.jpg"
    }
  ],
  "total": 5,
  "page": 1,
  "limit": 5
}

标签： javascriptjqueryhtmljson

解决方案

基本思想是将 html 构建为字符串，然后将其附加到 html，因此您需要添加id到主 div

 <body>
     <div class="container-fluid">
        <div id="row" class="row">
          <div id="test" class="col div1">Column</div>
          <div class="col">Column</div>
          </div>
      </div>
</body>

然后更新你的js

$(document).ready(function() {
  const fetchData = async() => {
    const response = await fetch('https://n161.tech/api/dummyapi/user?limit=5&page=1');
    const data = await response.json();
    //  items = JSON.stringify(data);
    console.log(data);
    div = document.getElementById('row');
    for (var i = 0; i < data.data.length; i++) {
        var str ='<div>'+data.data[i].nameTitle +' '+data.data[i].firstName +' '+ data.data[i].lastName+ '</div>';
        str +='<img src="'+data.data[i].image+'" alt="'+data.data[i].firstName + data.data[i].lastName+'">';
        div.insertAdjacentHTML( 'beforeend', str );
    }
  }
  fetchData();

您可以根据需要轻松修改输出，还可以使用引导程序类 演示

推荐阅读