如何在表中顯示json字符串的多維數組

我通過ajax從數據庫中提取的數據傳遞給html頁面。我設法從php腳本中將它傳遞給一個多維數組。現在我得到了json字符串，但我不確定如何正確顯示html表格中的輸出。數據如何在表中顯示json字符串的多維數組

腳本

$("#submit").on("click",function() 
    { 

      $("#set_setting").submit(function(){    

      data = $(this).serialize() 
      $.ajax({ 
       type: "POST", 
       dataType: "html", 
       url: "submit_setting.php", //Relative or absolute path to response.php file 
       data: data, 
       success: function(data) { 
        alert(data); 
       //hide the form 
       $("#set_setting").slideUp("slow"); 
       //show the result 
      /* for (i = 0; i < data.length; i++) { 
        console.log(data); 
        $(".the-return").html(data); 
       }*/ 

       console.log(data); 
       $(".the-return").html(data); 

       } 

      }); 
      return false; 

      }); 

     });

php腳本

$json=array(); 
array_push($json,array("type"=>$carType,"maker"=>$carMaker)); 
echo json_encode($json);

輸出

HondaHonda maker[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","Honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","Honda maker"]}]

如何顯示HTML表格這個JSON字符串？

來源

2015-07-21 112233

那你試過嗎？ – donald123

var result = data; （$。parseJSON（result），function（k，v）{alert（k +'is'+ v）; }）; – 112233

那麼這個問題是關於** JS **而不是** PHP ** ?! – donald123

下面是一些香草JS會做的伎倆。可能值得一提的是，您返回的結果數組只包含一個元素。這是我的代碼中parsedResult[0]的原因。如果你想返回多個html表的數據，你會有parsedResult [1]，parsedResult [2]等等，這個代碼沒有考慮到這種情況 - 我已經硬編碼它的工作只是第一個。

結果：（原諒一個HTML表格的文本格式，如果你願意）

type maker 
flying car test maker 
3 wheleer diamond car 
weird car ruby car 
miracle car dont know car 
tata car titi car 
see car saw car 
star car moon car 
mn car ty car 
jkcar ty car 
car test car maker test 
ting ting maker 
Honda Honda maker

代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function newEl(tag){return document.createElement(tag);} 

window.addEventListener('load', onDocLoaded, false); 

var dummyResultString = '[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","Honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","Honda maker"]}]'; 

function onDocLoaded() 
{ 
    var ajaxResult = dummyResultString; 
    var tblOfResults = parseAndCreateTable(ajaxResult); 
    document.body.appendChild(tblOfResults); 
} 

function parseAndCreateTable(inputString) 
{ 
    var rawResult = inputString; 
    var parsedResult = JSON.parse(rawResult); 
    var tableHeadings = []; 

    // extract the name of the properties that the object has. 
    for (var property in parsedResult[0]) 
    { 
     if (parsedResult[0].hasOwnProperty(property)) 
      tableHeadings.push(property); 
    } 

    // make the table 
    var tbl = newEl('table'); 
    var tbody = newEl('tbody'); 
    tbl.appendChild(tbody); 

    // make the first row, with headings in it 
    var tr = newEl('tr'); 
    var i, n = tableHeadings.length; 
    for (i=0; i<n; i++) 
    { 
     var th = newEl('th'); 
     th.innerText = tableHeadings[i]; 
     tr.appendChild(th); 
    } 
    tbody.appendChild(tr); 

    // now for the 'fun' part - the body itself. 
    var curRowIndex, curColIndex, nRows = parsedResult[0][tableHeadings[0]].length, nCols = tableHeadings.length; 
    for (curRowIndex=0; curRowIndex<nRows; curRowIndex++) 
    { 
     var tr = newEl('tr'); 
     for (curColIndex=0; curColIndex<nCols; curColIndex++) 
     { 
      var td = newEl('td'); 
      td.innerText = parsedResult[0][ tableHeadings[curColIndex] ][curRowIndex]; 
      tr.appendChild(td); 
     } 
     tbody.appendChild(tr); 
    } 

    return tbl; 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
</body> 
</html>

來源

2015-07-21 07:46:13 enhzflep

我需要包括此代碼工作的任何庫？我已經複製粘貼這個在我的成功函數，它並沒有顯示任何東西，即使硬編碼值。 – 112233

@Vani - 不。這段代碼沒有依賴關係。我已經更新了我的答案，以包含一個功能完整的示例。你的調試器告訴你什麼是問題？ – enhzflep

實際上沒有顯示錯誤。但是，我將這個代碼包含在ajax的成功函數中，但是您在頭標記之前使用了...可能是這個原因嗎？我試圖將它包含在head部分中，並且在成功函數中調用函數，但仍然無法看到表格 – 112233

像這樣也許：

var typeMsg = '' 
var makers = '' 
if(data && data[0].type) {    //considering data is your response object 
    for(var c in data[0].type) { 
     typeMsg += c + ', '; 
    } 
} 
if(data && data[0].maker) { 
    for(var c in data[0].maker) { 
     makers += c + ', '; 
    } 
} 

$('#elementForType').text(typeMsg && typeMsg.trim().replace(/,$/, "") + "." || 'No Type data available'); 
$('#elementForMakers').text(makers && makers.trim().replace(/,$/, "") + "." || 'No makers data available');

來源

2015-07-21 06:45:18 Amit

它說，沒有可用的類型數據沒有可用的製造商數據 – 112233

嘗試數據[0] .type和data [0] .maker – Amit

嘗試但相同：（ – 112233

如何在表中顯示json字符串的多維數組

回答

相關問題