在 jquery 中显示来自 json 的 Div 数据答案

【问题标题】：Display data in Div from json in jquery在 jquery 中显示来自 json 的 Div 数据
【发布时间】：2018-02-01 06:58:34
【问题描述】：

我使用ajax 代码在json 中有数据。现在我想在div中显示数据下面是我带来的代码

{  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

和 div。

<div id="dvTable">                       
</div>

下面的数据是代码。

function SearchInfo() {

        var textBoxValue = $('#addresSearch').val();

        $.ajax({
            type: "POST",
            url: "http://localhost:11181/Search/GetFilterSearch",
            data: JSON.stringify({ textBoxValue: textBoxValue }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                // display data in div here
            }
        })
    }

现在我应该如何在 div 中显示 json 中的数据并显示它。

【问题讨论】：

你想怎么显示？
@PatrickMlr：没试过，但我应该怎么做？？
@Eddie：表格格式会很好
不清楚你想如何呈现它。我认为 Table 可以有超过 1 项 - Table 数组中的所有对象是否具有完全相同的键？
循环数据并创建td标签并将所有td附加到table标签

标签： javascript jquery html css json

【解决方案1】：

你可以像这样循环：

$(document).ready(function(){
    /*
	var r = {  
	   "Table":[  
		  {  
			 "APP_MST_ID":321.0,
			 "APPLICATIONNAME":"R-Locator for Enterprise",
			 "PROJECTNO":"R4G-25-APD-006",
			 "VSS_FOLDER_LOC":null,
			 "CAT_ID":1.0,
			 "SPOC_APPUSRID":79.0,
			 "SUPPORT_TEAM":"0",
			 "REQUESTED_BY_APPUSRID":51.0,
			 "DELIVERY_MANAGER_APPUSRID":43.0,
			 "CREATEDBY_APPUSRID":null,
			 "CREATEDDATE":null,
			 "MODIFIEDBY_APPUSRID":null,
			 "MODIFIED_DATE":null,
			 "APPIMAGEPATH":null,
			 "PARENT_APP_ID":null,
			 "SERVER_LOCATION":null,
			 "USAGE_CATID":null
		  }
	   ]
	};
    */

    //Empty rows
    var r = {  
	   "Table":[]
	};
	
	var html = '';

    //Check if has data
    if ( r.Table.length !== 0 ) {
	html += '<table>';
	
	for ( var key in r.Table ) {
		var row = r.Table[key];

		//For the header
		if ( key == 0 ) {
		html += '<tr>';
		for ( var key2 in row ) {
			  html += '<th>';
			  html += key2;
			  html += '</th>';
		}
		html += '</tr>';
		}


		html += '<tr>';
		for ( var key2 in row ) {
			html += '<td>';
			html += row[key2];
			html += '</td>';
		}
		html += '</tr>';
	}
	
	html += '</table>';
   } else {
       //No data.
       html += "No data.";
   }
	
	$( "#dvTable" ).html( html );
	
	//console.log();
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="dvTable"></div>

【讨论】：

如果，我没有记录。我想显示为空表。如何使用您的代码显示它。请建议
可以通过r.Table.length === 0来测试r.Table是否为空
所以你可以将上面的代码包含在 if ( r.Table.length !== 0 )
Eddie，我需要将第一列值显示为可点击的链接。我可以吗？？
请至少回复还是我应该将其作为新问题发布？

【解决方案2】：

var table = $('#table_id');

for (i = 1; i < data.length; i++) {
    table.append('<tr>');
        table.find('tr:last-child').append(

        '<td>' + data[i]["APP_MST_ID"] + '</td>',
        '<td>' + data[i]["APPLICATIONNAME"] + '</td>'
        );
    }

<table class="GeneratedTable" align="center" id = "table_id">
    <tr>
        <th>APP_MST_ID</th>
        <th>APPLICATIONNAME</th>
    </tr>
</table>

【讨论】：

【解决方案3】：

这是许多可能的答案之一。您甚至可以使用 Object.keys 来实现，并与 DOM 函数连接...

let response = {  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

for(let k in response.Table[0]){
  window.document.getElementById("dvTable").innerHTML+=`<div>${response.Table[0][k]}</div>`;
}

<div id="dvTable">                       
</div>

【讨论】：

【解决方案4】：

这可能是一个可能的解决方案。

var json = '{"Table": [{"APP_MST_ID": 321.0,"APPLICATIONNAME": "R-Locator for Enterprise","PROJECTNO": "R4G-25-APD-006","VSS_FOLDER_LOC":null,"CAT_ID":1.0,"SPOC_APPUSRID":79.0,"SUPPORT_TEAM":"0","REQUESTED_BY_APPUSRID":51.0,"DELIVERY_MANAGER_APPUSRID":43.0,"CREATEDBY_APPUSRID": null,"CREATEDDATE": null,"MODIFIEDBY_APPUSRID": null,"MODIFIED_DATE": null,"APPIMAGEPATH": null,"PARENT_APP_ID": null,"SERVER_LOCATION": null,"USAGE_CATID": null}]}';
var objects = JSON.parse(json); // Parse the json
objects = objects.Table;        // Get the content of Table

var string = "";                // create a string
jQuery.each(objects[0], function(id, value) { // get all the id's and values
   string = string + value + " "; // Do something here with the values or id's
});

// create something where you add it, or do it inside the each()-function
var div = document.createElement('div'); 
div.innerHTML = string;
document.body.appendChild(div);
// ^ just to show the values in this example

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案5】：

您可以将格式化数据转储到 div，但由于难以复制 $.ajax 调用，我已将这些部分注释掉。

它会像这样工作：

var r =
`{
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
}`;

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html("<pre>" + r + "</pre>")
  //  }
  //})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

如果您正在寻找一张实际的桌子，那么您会这样做：

var r = {
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
};

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html(CreateTable(r).html())
  //  }
  //})
}

function CreateTable(data) {
  var data = data.Table;

  var table = $("<table><tr /></table>");

  $.each(data[0], function(key, value) {
    table.find("tr").append("<th>" + key + "</th>");
  });

  $.each(data, function() {
    var trHtml = $("<tr />");
    $.each(this, function(key, value) {
      trHtml.append("<td>" + value + "</td>");
    });
    table.append(trHtml);
  });

  return table;
}

th,
td {
  border: solid 1px black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

【讨论】：

【解决方案6】：

有多种方法，其中一种是在您的 div 中放置一个表格标签并在其中附加行，例如：

    $.each(r,function(index,value){
var html = '<td>'+
            '<tr>'+value.APP_MST_ID+'</tr>'+
'<tr>'+value.APPLICATIONNAME+'</tr>'+
'<tr>'+value.PROJECTNO+'</tr>'+
'<tr>'+value.VSS_FOLDER_LOC+'</tr>'+
'<tr>'+value.CAT_ID+'</tr>'+
'<tr>'+value.SPOC_APPUSRID+'</tr>'+
'<tr>'+value.SUPPORT_TEAM+'</tr>'+
'<tr>'+value.REQUESTED_BY_APPUSRID+'</tr>'+
'<tr>'+value.DELIVERY_MANAGER_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDBY_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDDATE+'</tr>'+
'<tr>'+value.MODIFIEDBY_APPUSRID+'</tr>'+
'<tr>'+value.MODIFIED_DATE+'</tr>'+
'<tr>'+value.APPIMAGEPATH+'</tr>'+
'<tr>'+value.PARENT_APP_ID+'</tr>'+
'<tr>'+value.value.SERVER_LOCATION+'</tr>'+
'<tr>'+value.USAGE_CATID+'</tr>'+
            '</td>'
    $('#table_id').append(html);
    })

等等。您可以根据需要格式化数据。

【讨论】：

非常努力。制作更多
这是因为我们错过了变量名之前的值。尝试更新答案。
好吧，你错过了两个;，它仍然无法工作。如果r是json，则需要先解析。