Распарить ответ json в таблицу HTML?

usergeyv · 12 Сен 2018

Помогите реализовать, ответ вида:

HTML:

[
    {
        "status": "OK",
        "error": "0",
        "news": {
            "title": "Третий лишний 2 / Ted 2 (2015) WEB-DLRip | КПК | iTunes",
            "id_news": "7721",
            "size_file": "517.6 Mb",
            "magnet_link": "magnet:?xt=urn:btih:A81D96A3BD9DF266D8B9318DA9BB34C297D195F4&xl=542744672&dn=%D0%A2%D1%80%D0%B5%D1%82%D0%B8%D0%B9+%D0%BB%D0%B8%D1%88%D0%BD%D0%B8%D0%B9+2+%28Ted+2%29.+2015%D0%B3.+WEB-DLRip.mp4.torrent&tr=https%3A%2F%2Fmultitracker.info%3A2710%2Fannounce&tr=udp%3A%2F%2Fshubt.net%3A2710&tr=udp%3A%2F%2Fkaztorka.org%3A2710&tr=http%3A%2F%2Fretracker.local%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=http%3A%2F%2Ftracker.filetracker.pl%3A8089%2Fannounce&tr=http%3A%2F%2Ftracker2.wasabii.com.tw%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.grepler.com%3A6969%2Fannounce&tr=http%3A%2F%2F125.227.35.196%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.tiny-vps.com%3A6969%2Fannounce&tr=http%3A%2F%2F87.248.186.252%3A8080%2Fannounce&tr=http%3A%2F%2F210.244.71.25%3A6969%2Fannounce&tr=http%3A%2F%2F46.4.109.148%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2F%5B2001%3A67c%3A28f8%3A92%3A%3A1111%3A1%5D%3A2710&tr=udp%3A%2F%2Fipv6.leechers-paradise.org%3A6969&tr=udp%3A%2F%2F46.148.18.250%3A2710",
            "torrent_all_leechers": 988,
            "torrent_all_seeders": 976,
            "torrent_all_completed": 775
        }
    },
    {
        "status": "OK",
        "error": "0",
        "news": {
            "title": "Третий лишний 2 / Ted 2 (2015) WEBRip-AVC | Чистый звук",
            "id_news": "3384",
            "size_file": "744.67 Mb",
            "magnet_link": "magnet:?xt=urn:btih:52CE8DCC0135472B9955BFA693A5E6A2F42B055C&xl=780842777&dn=Ted+2.2015.D.WEBRip-AVC.mkv.torrent&tr=https%3A%2F%2Fmultitracker.info%3A2710%2Fannounce",
            "torrent_all_leechers": 1128,
            "torrent_all_seeders": 1692,
            "torrent_all_completed": 846
        }
    },
    {
        "status": "OK",
        "error": "0",
        "news": {
            "title": "Третий лишний / Ted (2012) HDRip-AVC",
            "id_news": "2799",
            "size_file": "745.87 Mb",
            "magnet_link": "magnet:?xt=urn:btih:B91C54211B380A938FFA9BA4DC65A02358444821&xl=782103238&dn=Ted.2012.HDRip-AVC.By.Olzhas41.mkv.torrent&tr=https%3A%2F%2Fmultitracker.info%3A2710%2Fannounce",
            "torrent_all_leechers": 933,
            "torrent_all_seeders": 1399,
            "torrent_all_completed": 699
        }
    },
    {
        "status": "OK",
        "error": "0",
        "news": {
            "title": "Третий лишний / Ted (2012) HDTVRip 1080p | Трейлер",
            "id_news": "8201",
            "size_file": "176.09 Mb",
            "magnet_link": "magnet:?xt=urn:btih:67E45FD80E767F78F2BF6B9B0946F2722F464BE5&xl=184643434&dn=Tretij.lishnij.trejler.2012.AVC.HDTVRip.%281080p%29.mp4.torrent&tr=https%3A%2F%2Fmultitracker.info%3A2710%2Fannounce&tr=udp%3A%2F%2Fshubt.net%3A2710&tr=http%3A%2F%2Fretracker.local%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&tr=udp%3A%2F%2Ftracker.publicbt.com%3A80%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337&tr=http%3A%2F%2Ftracker.filetracker.pl%3A8089%2Fannounce&tr=http%3A%2F%2Ftracker2.wasabii.com.tw%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.grepler.com%3A6969%2Fannounce&tr=http%3A%2F%2F125.227.35.196%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.tiny-vps.com%3A6969%2Fannounce&tr=http%3A%2F%2F87.248.186.252%3A8080%2Fannounce&tr=http%3A%2F%2F210.244.71.25%3A6969%2Fannounce&tr=http%3A%2F%2F46.4.109.148%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2F%5B2001%3A67c%3A28f8%3A92%3A%3A1111%3A1%5D%3A2710&tr=udp%3A%2F%2Fipv6.leechers-paradise.org%3A6969&tr=udp%3A%2F%2F46.148.18.250%3A2710",
            "torrent_all_leechers": 658,
            "torrent_all_seeders": 997,
            "torrent_all_completed": 970
        }
    },
    {
        "status": "OK",
        "error": "0",
        "news": {
            "title": "Третий лишний / TED (2012) HDRip | Точка Zрения",
            "id_news": "862",
            "size_file": "1.62 Gb",
            "magnet_link": "magnet:?xt=urn:btih:4EACBF2B5290C9897CC1EAD5568948EDE81BBBDA&xl=1742603350&dn=%D0%A2%D0%B5%D0%B4+%28ted%29+%D0%B2+%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC+%D0%BF%D0%B5%D1%80%D0%B5%D0%B2%D0%BE%D0%B4%D0%B5+%D0%9A%D0%B0%D0%BD%D0%B0%D0%BB%D0%B0+%D0%A2%D0%BE%D1%87%D0%BA%D0%B0+Z%D1%80%D0%B5%D0%BD%D0%B8%D1%8F.avi.torrent&tr=https%3A%2F%2Fmultitracker.info%3A2710%2Fannounce",
            "torrent_all_leechers": 287,
            "torrent_all_seeders": 431,
            "torrent_all_completed": 215
        }
    }
]

Как все данные поместить в таблицу ?

2cher777 · 12 Сен 2018

Вот тут вроде то что тебе нужно расписано.

Скрытое содержимое доступно для зарегистрированных пользователей!

Код:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

У тебя блок входящих данных что безымянный?

Absolute · 12 Сен 2018

usergeyv написал(а):
Распарить ответ json в таблицу HTML?

HTML:

var table = '<table>';
yourArray.forEach(function(v){
    for(var i in v){
      table += '<tr><td>';
      table += i;
      table += '</td>';
      table += '<td>';
      if(typeof v[i] == 'object'){
        table += '<table>';
        for(var q in v[i]){
           table += '<tr><td>';
           table += q;
           table += '</td>';
           table += '<td>';
           table += v[i][q];
           table += '</td></tr>';
        }
        table += '</table>';
      } else {
      table += v[i];
      }
      table += '</td></tr>';
    }
})
table += '</table>';
document.body.innerHTML = table;

usergeyv · 16 Сен 2018

2cher777 написал(а):
У тебя блок входящих данных что безымянный?

{
"status": "OK",
"error": "0",
"limit": "4",
"news": [
{
"title": "Третий лишний 2 / Ted 2 (2015) WEB-DLRip | КПК | iTunes",
"id": "7721",
"size_file": "517.6 Mb",
"magnet_link": "magnet:?xt=urn:btih:A8",
"torrent_all_leechers": 988,
"torrent_all_seeders": 976,
"torrent_all_completed": 775
},
{
"title": "Третий лишний 2 / Ted 2 (2015) WEBRip-AVC | Чистый звук",
"id": "3384",
"size_file": "744.67 Mb",
"magnet_link": "magnet:?xt=urn:btih:52",
"torrent_all_leechers": 1128,
"torrent_all_seeders": 1692,
"torrent_all_completed": 846
},
{
"title": "Третий лишний / Ted (2012) HDRip-AVC",
"id": "2799",
"size_file": "745.87 Mb",
"magnet_link": "magnet:?xt=urn:btih:B91",
"torrent_all_leechers": 933,
"torrent_all_seeders": 1399,
"torrent_all_completed": 699
},
{
"title": "Третий лишний / Ted (2012) HDTVRip 1080p | Трейлер",
"id": "8201",
"size_file": "176.09 Mb",
"magnet_link": "magnet:?xt=urn:btih:67E",
"torrent_all_leechers": 799,
"torrent_all_seeders": 854,
"torrent_all_completed": 928
}
]
}

Делаю во так

HTML:

 <form method="post" id="ajax_form" action="" >
        <input type="text" name="title" id="email"  /><br>
        <input type="text" name="limit" id="email" /><br>
        <input type="submit" id="btn" value="ПОЛУЧИТЬ" />
    </form>


    <div id="result_form"></div>

HTML:

$( document ).ready(function() {
    $("#btn").click(
        function(){
            sendAjaxForm('result_form', 'ajax_form', 'http://site.ru/api');
            return false;
        }
    );
});
function sendAjaxForm(result_form, ajax_form, url) {
    $.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: $("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
            result = $.parseJSON(response);
     
        if (result.status == 'ERROR') {
                var errorTxt;
             
                if (result.error == 1) {
                    errorTxt = "ошибка 1."
                } else if (result.error == 2) {
                    errorTxt = "ошибка 2."
                } else if (result.error == 3) {
                    errorTxt = "ошибка 3."
                }
                $('#result_form').html('<font color="red">Код ошибки: ' + result.error +'</font>  Статус:  ' + errorTxt);
            } else if (result.status == 'OK') {
                $('#result_form').html('/////что мне тут нужно делать, что бы "news" данные попали в таблицу/////'); ///????????????????????????
         
            }

        },
        error: function(response) { // Данные не отправлены
            $('#result_form').html('Ошибка. Данные не отправлены.');
        }
     });
}

таблица вида:

HTML:

<table>
    <tr>
        <td>id</td>
        <td>title</td>
        <td>magnet_link</td>
        <td>size_file</td>
        <td>torrent_all_leechers</td>
        <td>torrent_all_seeders</td>
        <td>torrent_all_completed</td>
    </tr>
    <tr>
        <td>id</td>
        .........
    </tr>
</table>

в с ajax мне тяжело разобраться, помогите

usergeyv · 16 Сен 2018

Если я правильно понимаю,то можно сделать так

HTML:

$('#result_form').html('<table> <tr> <td>'+ result.news[0].id +'</td> <td>'+ result.news[0].title +'</td> <td>'+ result.news[0].magnet_link +'</td> <td>'+ result.news[0].size_file +'</td> <td>'+ result.news[0].torrent_all_leechers +'</td> <td>'+ result.news[0].torrent_all_seeders +'</td><td>'+ result.news[0].torrent_all_completed +'</td></tr><table> ');

ни и так далее <table> <tr> <td>'+ result.news[1 и до 3].id , а если "limit": "другой, 3 или 6" как автоматически генерировать таблицу?

2cher777 · 16 Сен 2018

Блин, покажи хоть как это выглядит у тебя если не секрет.
И не
$('#result_form').html , а
$('#result_form').innerHTML
Если это то о чем я подумал.

2cher777 · 16 Сен 2018

По идее, после того как распарсил данные и нарисовал внутреннее содержимое таблицы, вставляешь это в innerHTML по ID таблицы.
Таблицу сделай тупо пустой, и присвой ей имя (ID)

HTML:

<table id="result_table"></table>

Дальше

Код:

$('#result_table').innerHTML = '<tr> <td>'+ result.news[0].id +'</td> <td>'+ result.news[0..... ';

usergeyv · 16 Сен 2018

2cher777 написал(а):
Блин, покажи хоть как это выглядит у тебя если не секрет.

отправляю post на адрес Для просмотра ссылки Войди или Зарегистрируйся с параметрами "limit" и "title" получаю ответ:

usergeyv написал(а):

HTML:

{
"status": "OK",
"error": "0",
"limit": "4",
"news": [
{
"title": "Третий лишний 2 / Ted 2 (2015) WEB-DLRip | КПК | iTunes",
"id": "7721",
"size_file": "517.6 Mb",
"magnet_link": "magnet:?xt=urn:btih:A8",
"torrent_all_leechers": 988,
"torrent_all_seeders": 976,
"torrent_all_completed": 775
},
{
"title": "Третий лишний 2 / Ted 2 (2015) WEBRip-AVC | Чистый звук",
"id": "3384",
"size_file": "744.67 Mb",
"magnet_link": "magnet:?xt=urn:btih:52",
"torrent_all_leechers": 1128,
"torrent_all_seeders": 1692,
"torrent_all_completed": 846
},
{
"title": "Третий лишний / Ted (2012) HDRip-AVC",
"id": "2799",
"size_file": "745.87 Mb",
"magnet_link": "magnet:?xt=urn:btih:B91",
"torrent_all_leechers": 933,
"torrent_all_seeders": 1399,
"torrent_all_completed": 699
},
{
"title": "Третий лишний / Ted (2012) HDTVRip 1080p | Трейлер",
"id": "8201",
"size_file": "176.09 Mb",
"magnet_link": "magnet:?xt=urn:btih:67E",
"torrent_all_leechers": 799,
"torrent_all_seeders": 854,
"torrent_all_completed": 928
}
]
}

2cher777 · 16 Сен 2018

Ну так че, распарсил? Вывел в таблицу? А то уже со среды мучаешься.

Зачем тебе вообще такая визуализация? Клон рутрекера делаешь?

usergeyv · 16 Сен 2018

2cher777 написал(а):
Ну так че, распарсил? Вывел в таблицу?

вот что надо было, :glob:

,навел на мысль

HTML:

$(result.news).each(function(index, item) {
            $('#result_table').append('<tr><td>' + item.id + '</td><td>' + item.size_file + '</td></tr>');
              });

Распарить ответ json в таблицу HTML?

usergeyv

Знаток

2cher777

Постоялец

Absolute

Крокодил ;)

usergeyv

Знаток

usergeyv

Знаток

2cher777

Постоялец

2cher777

Постоялец

usergeyv

Знаток

2cher777

Постоялец

usergeyv

Знаток