jQuery и JSON: разбить объект на таблицу - PullRequest
Новая
       8

jQuery и JSON: разбить объект на таблицу

0 голосов
/ 16 мая 2011

Мне нужно немного помочь с навигацией по этому объекту:

{"COLUMNS":["ID","TYPE","NAME"],"DATA":[[1,"Image","My Image"],[2,"Text","My Text"],[3,"Video","My Video"],[4,"video","test"],[5,"Image","testName"],[6,"Image","testName"],[7,"Image","testName"],[8,"Image","testName"],[9,"Image","testName"],[10,"Image","testName"]]}

Как лучше всего обойти этот объект, чтобы отобразить его так: 

ID  | Type   | Name
1     Video    My Video
...   ...      ...

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

Ответы [ 2 ]

3 голосов
/ 16 мая 2011 
headers = obj["COLUMNS"];
$(headers).each(function(index,item){ /* do something interesting */ });
data    = obj["DATA"];
$(data).each(function(index,item){ /* do something interesting */ });

«Что-то интересное» в этом случае будет означать создание новых элементов TH и TD из заголовков, элементов TR и TD из строк данных.

(Конечно, вы могли бы сделать 

$(obj["COLUMNS"]).each(...)

если вам не нужны заголовки и данные отдельно позже. Иногда я думаю, что люди идут за борт с функциональной моделью, жертвуя ясностью.)

0 голосов
/ 16 мая 2011

Итак, благодаря Чарли Мартину, я собрал симпатичную маленькую функцию, которая возьмет результат запроса и создаст таблицу, используя jQuery: 

function createTable(result) {

    var headers = result["COLUMNS"];
    var data = result["DATA"];      
    var tableHeader = "<table><thead><tr>";
    var tableBody = "<tbody>";
    var endTable = "</table>";

    $(headers).each(function(index,item){
        //alert("HEADER: " + item);

        tableHeader += "<th>" + item + "</th>";     

    });

    tableHeader += "</tr></thead>";
    $(tableHeader).appendTo("#placeholder");

    $(data).each(function(index,item){
        //alert("DATA: " + item);

        tableBody += "<tr>";

        $(item).each(function(index, secitem) {
            tableBody += "<td>" + secitem + "</td>";
        });

        tableBody += "</tr>";

    });

    tableBody += "</tbody>";

    $(tableBody).appendTo("#placeholder");              
    $(endTable).appendTo("#placeholder");

}
...