HTML-таблица JSON с использованием jquery

Question

HTML-таблица JSON с использованием jquery

0

Вот мой json, который я создаю, но как я могу получить его в html-таблицу?

[
    {
        "basicColor":"blue",
        "manufacturer": {
            "name":"lavalamp.com"
        },
        "costBook": {
            "unitPrice":10.99
        },
        "price":10.99
    },
    {
        "basicColor":"red",
        "manufacturer": {
            "name":"volcaniclava.net"
        },
        "costBook": {
            "unitPrice":15.99
        },
        "price":15.99
    },
    {
        "basicColor":"purple",
        "manufacturer": {},
        "costBook": { "unitPrice":12.99 },
        "price":12.99
    },
    {
        "basicColor":"yellow",
        "manufacturer": {},
        "costBook":{"unitPrice":9.99},
        "price":9.99
    }
]

я пытался

  $.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(data) {
{
    var tr;
    for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + data[i].LavaLamp + "</td>");
    tr.append("<td>" + data[i].Price + "</td>");
    tr.append("<td>" + data[i].Color + "</td>");
    tr.append("<td>" + data[i].CostBook + "</td>");
    tr.append("<td>" + data[i].Manufacturer + "</td>");
    $('table').append(tr);
    }
    };
    }

но он, похоже, не работает

user3311835 20 фев. 2014, в 21:18

Источник

1

откуда вы LavaLamp имя свойства LavaLamp ?
Roko C. Buljan 20 фев. 2014, в 20:04
0

в вашем коде немало ошибок
SpYk3HH 20 фев. 2014, в 20:08

Теги:

jquery

json

5 ответов

Ещё вопросы

откуда вы LavaLamp имя свойства LavaLamp ?

Roko C. Buljan · Answer 1 · 2014-02-20T17-11-00.000Z

1

var tr = "";
for (var i = 0; i < data.length; i++) {
  tr += "<tr>";
  tr += "<td>" + data[i].manufacturer.name + "</td>";
  tr += "<td>" + data[i].price + "</td>";
  tr += "<td>" + data[i].basicColor + "</td>";
  tr += "<td>" + data[i].costBook.unitPrice + "</td>";
  tr += "</tr>";
}

$('table').append(tr);

Посмотрите, если свойство объекта называется costBook вы не можете назвать это cost_book или costbook и т.д.,... надеюсь, что вы получили эту идею...

Если вам нравится, вы также можете сделать это таким образом, избегая новой строки с помощью \:

var tr="", d=data;
for (var i=0; i<d.length; i++) {      
   tr += "<tr><td>"+ d[i].manufacturer.name  +"</td> \
              <td>"+ d[i].price              +"</td> \
              <td>"+ d[i].basicColor         +"</td> \
              <td>"+ d[i].costBook.unitPrice +"</td></tr>";
}
$('table').append(tr);

Roko C. Buljan 20 фев. 2014, в 17:11

0

Нет, я действительно не вижу твоего беспокойства. На моей худшей работе (хуже, чем в большинстве позади технологии) для Ft. Ракер, мы использовали jQuery каждый день, так как это было предпочтительнее, так как они могли легко вызвать свежий взгляд, и каждый мог прочитать его. Хочешь поговорить о больших данных? Попробуйте потянуть JSON на компанию солдат. 1 Компания создаст более 10 тыс. Строк в формате JSON ... сжимается! Тем не менее никогда не занимало больше, чем секунда или 2, чтобы построить стол. Помимо того, что я не использовал vanilla, я застрял с использованием ASP внутри Sharepoint, что просто делает вещи еще медленнее ... до сих пор никогда не возникало проблем со скоростью или жалоб.
SpYk3HH 20 фев. 2014, в 21:46
0

Спасибо за обмен вашего опыта! Я согласен, что для хорошего рабочего процесса в компании, где не-JS люди должны читать / просматривать ваш jQ -> jQ-only, - это значительное решение (которое может сэкономить $ на времени отладки), но, учитывая, что сегодня JS является наиболее популярный в мире язык, я никогда не позволю никому с знанием только jQ просматривать чей-либо код. JQ хорош для экономии вашего рабочего времени, но когда дело доходит до чувствительных частей ... Я повторяю, что оба эти варианта не только сэкономят ваши деньги, но и сделают чертовски хороший продукт.
Roko C. Buljan 20 фев. 2014, в 21:56
0

Ну, это мило с твоей стороны, но я не только в jQ-Only . На самом деле, ни в одном из моих личных приложений нет ничего, кроме JS, потому что я хотел, чтобы они были короткими и простыми. Я использовал JS еще тогда, когда это было еще в Netscape . И, конечно же, я был ребенком из нетскрейпа. В конце концов, они забили MS на милю. Я хорошо знаю возможности JS, но когда вы используете lib в качестве языка кодирования, вы должны придерживаться его, если у вас нет «необходимости» отклоняться, в противном случае вы нарушите целостность своей работы.
SpYk3HH 20 фев. 2014, в 22:04
0

И я люблю jQuery, потому что, давайте посмотрим правде в глаза, это ЛУЧШАЯ JS LIB на планете. А с сегодняшними стандартами в технологии, он более чем хорошо оборудован в своем мини-состоянии, чтобы справиться с любой работой, включая приложения. Я уверен, что когда я сделаю приложение для публичного использования, я буду использовать в нем jQuery, а не vanilla
SpYk3HH 20 фев. 2014, в 22:06

Показать ещё 2 комментария

shmyq · Answer 2 · 2014-02-20T18-35-00.000Z

Похоже, что большинство ваших значений в главном объекте являются самими объектами, и, следовательно, значения не получают доступ правильно. Пример для производителя, вам нужно получить доступ к значению как таковому:

tr.append("<td>" + data[i].manufacturer.name + "</td>");

Также не кажется, что значение в вашем объекте для значения "LavaLamp"?

José Antonio Postigo · Answer 3 · 2014-02-20T18-06-00.000Z

Попробуй это:

$( document ).ready(function() 
{
    // ... 

    $.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(json) 
    {
        $.each(json, function(i, x) 
        {
            var $tr = $('<tr/>').appendTo('table');

            $tr.append('<td>' + x.basicColor + '</td>');
            $tr.append('<td>' + x.manufacturer['name'] + '</td>');
            $tr.append('<td>' + x.costBook['unitPrice'] + '</td>');
            $tr.append('<td>' + x.price + '</td>');
        });
    });   
});

SpYk3HH · Answer 4 · 2014-02-20T17-52-00.000Z

Существует много, что может быть сделано лучше о вашем коде, однако я могу показать вам более jQuery способ переписать и показать некоторые возможные ошибки.

Возможные проблемы:

$.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(data) {
{ <- EXTRA BRACKET
    var tr;
    for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    THERE IS REALLY NO NEED TO REWRITE APPEND EVERYTIME
    YOU CAN INSTEAD USE JQUERY CHAINING |OR|
    SIMPLY USE A COMMA BETWEEN EACH ELEMENT TO APPEND

    tr.append("<td>" + data[i].LavaLamp + "</td>"); <-- WHERE IS THIS PROPERTY COMING FROM?

    tr.append("<td>" + data[i].Price + "</td>");
    tr.append("<td>" + data[i].Color + "</td>");

    THE FOLLOWING ARE OBJECTS AND CANT BE USED AS TEXT
    tr.append("<td>" + data[i].CostBook + "</td>"); 
    tr.append("<td>" + data[i].Manufacturer + "</td>");
    $('table').append(tr);
    }
    };<-- MISSING CLOSING ')' FOR 'getJSON()'
    }

Рабочее решение

$.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(data) {
    $.each(data, function(i) {
        $('<tr />').append(
            $('<td />', { text: data[i].LavaLamp }),
            $('<td />', { text: data[i].price }),
            $('<td />', { text: data[i].basicColor }),
            $('<td />', { text: data[i].costBook.unitPrice }),
            $('<td />', { text: data[i].manufacturer.name })
        ).appendTo($('table'));
    });
});

jsFiddle

Если вы хотите сделать это еще дальше, я бы предложил короткую функцию для установки текста в случае, если значение не найдено. Что-то вроде:

/* setText('String value', 'Alternate String value in case first one is empty'); */
function setText(a,b){return a?a:"string"==typeof b?b:"N/A"};

$.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(data) {
    $.each(data, function(i) {
        $('<tr />').append(
            $('<td />', { text: setText(data[i].LavaLamp) }),
            $('<td />', { text: setText(data[i].price) }),
...
            $('<td />', { text: setText(data[i].manufacturer.name, 'Manufacturer Not Found') })
...

jsFiddle

Смотрите также:

pwnyexpress · Answer 5 · 2014-02-20T18-15-00.000Z

Кажется, что нет открытия tr

$.getJSON('/home/jlpourt1/workspace/LavaLamp/lava.json', function(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr>');
        tr.append("<td>" + data[i].LavaLamp + "</td>");
        tr.append("<td>" + data[i].Price + "</td>");
        tr.append("<td>" + data[i].Color + "</td>");
        tr.append("<td>" + data[i].CostBook + "</td>");
        tr.append("<td>" + data[i].Manufacturer + "</td>");
        tr.append("</tr>");
        $('table').append(tr);
    }
 });

Это действительно должен быть комментарий. tr = $('<tr/>') создает элемент tr который содержит оба тега.