javascript - 在 jquery 中显示来自 json 的 Div 中的数据

Question

我使用 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 中的数据并显示它。

Answer 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>