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

Question

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

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

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

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

我要显示的方式是针对数据的适当标签，例如：属性ID：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 个解决方案

解决方案1
2 已采纳 2018-11-22 09:32:03

解决方案2
0 2018-11-22 09:42:06

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-11-22 09:32:03

解决方案2 0 2018-11-22 09:42:06

解决方案1
2 已采纳 2018-11-22 09:32:03

解决方案2
0 2018-11-22 09:42:06