Question

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

我从API调用获得的数据是：

[[236,1，“ 1537890525704.jpg”，“”，“住宅”，“出租”，1200]，[235,1，null，“”，“住宅”，“出租”，10000]]

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

我要显示的方式是针对数据的适当标签，例如：物业编号：236 卧室数量：1 物业类型：住宅等。

client.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>

client.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));
     }

    });

Answer 1

您需要在循环中构建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>

Answer 2

如果单个数组中有固定的数据集，则将其更改为..

then(function(data) {
   var text = "";
   var res = "";
   var i;
   for(var i=0; i<data.length; i++){
    var prop = data[i];
        $('#msgs').append($('<div>').text("Property Id:"+ prop[0]));
        $('#msgs').append($('<div>').text("No. of Bedrooms:"+ prop[j]));
});

这可能会对您有所帮助。

如何显示从API调用（二维数组）获取的数据

2 个答案: