时间戳

首页 > 解决方案 > 如何显示从 API 调用获取的数据，这是一个二维数组

javascript - 如何显示从 API 调用获取的数据，这是一个二维数组

问题描述

我正在尝试调用 API 并以列表形式显示数据，我面临的问题是我能够拆分列表并将其显示在HTML页面中，但我需要针对数据显示适当的标签。非常感谢这方面的任何帮助。谢谢你。

我从 API 调用中得到的数据是：

[[236,1,"1537890525704.jpg","","Residential","Rent",1200], 
[235,1,null,"","Residential","Rent",10000]]

我在HTML页面上显示数据的方式是：

在此处输入图像描述

我要显示的方式是针对数据的适当标签，例如：

Property Id : 236
No. of Bedrooms: 1 
Property Type : Residential

等等..

客户端.html

<html>
    <head>
        <title>Test client application</title>
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
              <script src="cleint.js"></script> 
             <style>
                .card {
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                    transition: 0.3s;
                    width: 40%;
                }

                .card:hover {
                    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                }

                .container {
                    padding: 2px 16px;
                }
                </style>

    </head>

    <body>


        <p id="msgs" class="card container"></p>

客户端.js

$(document).ready(function() {   
    $.ajax({
       url: "http://192.168.1.5:8000/fetch",
       success: function(data){        
          var c=data;
         }
    }).then(function(data) {
       var text = "";
       var res = "";
       var i;
       for(var i=0; i<data.length; i++){
        var prop = data[i];
           for(var j=0;j<prop.length;j++){
            $('#msgs').append($('<div>').text(prop[j]));

           }

       }



    });

    function display(str) {
        $('#msgs').append($('<div>').text(str));
     }

    });

标签： javascriptjqueryhtmlrestapi

解决方案

您需要在循环中构建 HTML 输出。由于每个属性都包含在数组中，因此您需要通过索引直接访问它，而不是通过另一个内部循环。试试这个：

var data = [
  [236, 1, "1537890525704.jpg", "", "Residential", "Rent", 1200],
  [235, 1, null, "", "Residential", "Rent", 10000]
]

data.forEach(function(prop) {
  var html = `<p>Property Id: ${prop[0]}</p><p>No. of Bedrooms: ${prop[1]}</p><p>Property Type: ${prop[4]}</p>`;
  $('#msgs').append(`<div>${html}</div>`);
});
#msgs div {
  border: 1px solid #C00;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msgs"></div>

推荐阅读