Javascript 如何在表中显示json字符串的多维数组_Javascript_Php_Arrays_Json_Multidimensional Array

Javascript 如何在表中显示json字符串的多维数组

javascript php arrays json

Javascript 如何在表中显示json字符串的多维数组,javascript,php,arrays,json,multidimensional-array,Javascript,Php,Arrays,Json,Multidimensional Array,我通过ajax将从数据库获取的数据传递到html页面中显示。我设法从php脚本中以多维数组传递它。现在我得到了json字符串，但我不确定如何在html表中正确显示输出剧本 $("#submit").on("click",function() { $("#set_setting").submit(function(){ data = $(this).serialize() $.ajax({

我通过ajax将从数据库获取的数据传递到html页面中显示。我设法从php脚本中以多维数组传递它。现在我得到了json字符串，但我不确定如何在html表中正确显示输出

剧本

$("#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;

          });

        });

数据输出

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字符串？

类似于以下内容：

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');

这里有一些香草JS可以实现这个目的。可能值得一提的是，您正在返回一个结果数组，其中只有一个元素。这就是我的代码中出现

parsedResult[0]

的原因。如果您想返回多个html表的数据，那么就需要使用parsedResult[1]，parsedResult[2]等。这段代码并不能解释这种情况——我已经硬编码了它，以便只使用第一个表

结果：（如果愿意，请原谅html表格的文本格式）

代码：

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


“严格使用”；
函数newEl（tag）{returndocument.createElement（tag）；}
window.addEventListener（'load'，onDocLoaded，false）；
var dummyResultString='[{“类型”：[“飞车”、“3惠勒”、“怪胎车”、“奇迹车”、“塔塔车”、“see车”、“明星车”、“mn车”、“jkcar”、“汽车测试”、“婷”、“本田”]、“制造商”]：[“测试制造商”、“钻石车”、“红宝石车”、“不知道车”、“提提车”、“锯车”、“月亮车”、“ty车”、“ty车”、“ty车”、“汽车制造商测试”、“婷制造商”、“本田制造商”]]；
函数onDocLoaded（）
{
var ajaxResult=dummyResultString；
var tblOfResults=parseAndCreateTable（ajaxResult）；
文件.正文.附件（tblOfResults）；
}
函数parseAndCreateTable（inputString）
{
var rawResult=inputString；
var parsedResult=JSON.parse（rawResult）；
var表标题=[]；
//提取对象具有的属性的名称。
for（parsedResult[0]中的var属性）
{
if（parsedResult[0].hasOwnProperty（属性））
表标题。推送（属性）；
}
//摆桌子
var tbl=newEl（“表”）；
var tbody=newEl（“tbody”）；
tbl.附肢儿童（tbody）；
//制作第一行，其中包含标题
var tr=newEl（'tr'）；
变量i，n=表标题长度；
对于（i=0；ivar result=data；$.each（$.parseJSON（result），函数（k，v）{alert（k+'是'+v）；}）；那么这个问题是关于JS而不是PHP的？！是的，它是JS，但我仍然使用PHP来传递数组。如果我缺少一些东西，那么您显示的数据输出是无效的JSON。HondaHonda maker不应该在那里。@Vani-那么，您希望该表看起来像什么？您基本上返回了两个数组。您希望吗要有一个简单的2列表，每个数组都在其中一列中？它说，没有类型数据没有制造商数据可用测量数据[0]。类型和数据[0]。maker必须执行JSON。stringify（数据）并将文本粘贴到此处。我需要查看响应[{“Type”：[“4 wheeler”，“flying ycar”]，“maker”：[“Honda”，“AUdi”]，“rate”：[“1”，“89”]，[“1”，“70”]，[“1”，“57”]["2","78"],["2","56"],["2","34"]]}]我试过了，它输出了0、1、2、3、4、5、6、7。两次。但它是什么？我如何访问每个数组中的每个元素？我是否需要包含任何库才能使用此代码？我已将其复制粘贴到成功函数中，即使使用硬编码的值，它也不会显示任何内容。@Vani-no。此代码没有依赖项。我已更新了对的答案包括一个功能完整的示例。调试器告诉您问题出在哪里？实际上没有显示错误..但我在ajax的成功函数中包含了此代码，但您在head标记之前使用了此代码..这可能是原因吗？我试图将其包含在head部分并在success函数中调用该函数，但仍然看不到表..W你应该把Ajax调用的结果传递给<代码> PARSEDANDCRATETABLE 函数，然后将结果附加到所需的容器中。实际上，我的代码在头内。你可以考虑的其他东西是使用jQuery方法来设置EN元素的内层HTML——只需从函数调用中获取表，然后得到它。s html，然后使用jQuery方法附加它。即`var resultTable=parseAndCreateTable（数据）；var tblHTML=resultTable.outerHTML；**使用jQuery方法设置元素的内容**（我不使用jQuery，所以我不知道还有什么建议）我将您的函数包含在head中，并将数据传递到parseAndCreateTable函数中，然后像您提到的那样附加到容器中，它返回了表！谢谢！
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>