Проблема построить таблицу из файла JSON под div

Question

Мне нужно получить довольно сложные данные JSON из (большого) файла JSON в таблицу в определенной части страницы. Каким-то образом, когда я запустил свой код, ничего не происходит.

Снимок файла покупки.json -

{ "Таблица": { "покупки": [ { «Имя»: «Джо», «Фамилия»: «Дженсон», «Продукт»: «Нетбук Компьютер», «Цена»: «356», «Дата покупки»: «04.04.2011», «Количество единиц»: «1», «Тип»: «Компьютер», «Дата возвращения»: «05.03.2011», «Seq. No.»: «0» }, { «Имя»: «Кристи», «Фамилия»: «Дэвис», «Продукт»: «iPad», «Цена»: «656», «Дата покупки»: «04.07.2011», «Количество единиц»: «1», «Тип»: «Компьютер», «Дата возвращения»: «05.06.2011», "Seq. No.": "10" }, { «Имя»: «Джастин», «Фамилия»: «Жабра», «Продукт»: «Рукав для ноутбука», «Цена»: «699», «Дата покупки»: «04.02.2011», «Количество единиц»: «1», «Тип»: «Компьютерная оценка», «Дата возвращения»: «01.05.2011», "Seq. No.": "20" } ] } }

HTML-файл - JSON к столу

получить файл json "purchase.json"

Разобрать массив в таблицу и загрузить его в AJAXDiv

Заголовок таблицы должен быть извлечен из ключа в паре ключ: значение, найденной в JSON.

Код JavaScript, который у меня есть, - $ (документ) .ready (function () { // Получить данные JSON с сервера с помощью AJAX $ ('# AJAXButton'). Click (function () { $ .getJSON ('data / purchase.json', function (data) { processJSON (данные); }); });

//Process and display the JSON data
function processJSON(jsondata) {
    var output = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"><thead><tr>';

    // retrieve the keys and place into an array
    var keys = objKeys(jsonData.table.loans[0]).join("|");          
    var keyData = splitString(keys);

    // print header
    for (var i = 0; i < keyData.length; i++)
    {
        output += "<th>" + keyData[i] + "</th>"; 
    }           
    output += "</thead></tr><tfoot>";

    // print footer
    for (var i = 0; i < keyData.length; i++)
    {
        output += "<th>" + keyData[i] + "</th>"; 
    }   
    output += "</tfoot></tr><tbody>";   

    // print content of the json array in tbody
    for(var j=0, jj = jsonData.table.loans.length; j < jj; j++)
    {
        for (var k = 0, kk = keyData.length; k < kk; k++)
        {
            var current = keyData[k];
            output +="<td>" + jsonData.table.loans[j][current] + "</td>"; 
        }
        output += "</tr>";
    }

    output += "</tbody></tr></table>";
    //Loop through the Languages 

    $('#AJAXDiv').html(output);
}


// get json keys
function objKeys(obj) 
{
    var keys = [];
    var i = 0;
    for (var z in obj) 
    {
        if (obj.hasOwnProperty(z)) {
            keys[i++] = z;
        }
    }
    return keys;
}

// split string into array
function splitString(myString)
{
    var mySplitResult = myString.split("|");
    return mySplitResult;
}

});

Answer 1

Вы также можете использовать эту библиотеку: Json-To-Html-Table

Answer 2

Я использую этот скрипт, который я написал сам, он действительно строит любую таблицу json из результата mysql o независимо от того, что выводит MySQL, вы можете переименовать имена столбцов с помощью собственных меток в порядке вывода. Также, если вы не дадите ни одного, будут сгенерированы имена по умолчанию. Он использовал плагин $ post Jquery, который можно легко добавить с помощью 1 строки кода.

все, что вам нужно, это div с table_result:

  function dyna_query(label){

        $.post("your_mysql_query.php",{post_limit:15},function(e){
        if(e=="fail"|| e=="" ||e=="[]"){return;}


        var obj=JSON.parse(e);
        //get default column names based on the associative object JSON
    var column_n=Object.keys(obj[0]).length/2;
    var c_names=Object.keys(obj[0]).splice(column_n,column_n);
        //if there are labels, then these will replace others.

      if( label){c_names=label.split(",");}

        var table_row="";
        //initialize table 
        var table_format="<table  border=0><tr>"; 

      for(var r=0; r<c_names.length;r++){
        table_row+="<td class=table_h>"+c_names[r]+"</td>";}
        table_row+="</tr>";

      for(var i=0; i<obj.length;i++){table_row+="<tr>";
      for(var c=0; c<c_names.length;c++){table_row+="<td class='table_bb'>"+obj[i][c]+"     </td>";}table_row+="</tr>";}

        //get all the other fields and rows
        table_format+=table_row+"</table>";
        //buld the html for the div with the id table_result
        $("#table_result").html(table_format);

    });
    }

теперь просто вызовите dyna_query ("c1, c2, c3"); // переименовывает имена столбцов по умолчанию или же dyna_query (); для полного вывода с метками по умолчанию

Answer 3

Возможно, у вас отсутствует переменная, есть

function processJSON(jsondata)

Но вы позже используете

jsonData.table.loans[0] //etc....

Я предлагаю использовать отладчик, такой как Firebug или DevTools, он создает такие проблемы, какэто намного легче поймать.