JSON в HTML-код таблицы

2

Я пытаюсь извлечь данные JSON, а затем помещать данные в таблицу html, к сожалению, мне пока не повезло, и я надеялся получить некоторые указатели с тем, что я создал до сих пор.

Мне также хотелось бы показать только некоторые из результатов JSON, поэтому исключая некоторые данные.

Сайт результатов JSON = http://asc.thecoin.pw/index.php?page=api&action=public

Ниже я до сих пор не работаю :(

Код HTML: -

<!DOCTYPE html>
<html>
<body>

<h1>Asiccoin (ASC)</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://asc.thecoin.pw/index.php?page=api&action=public";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].pool_name +
        "</td><td>" +
        arr[i].hashrate +
        "</td><td>" +
        arr[i].workers +
        "</td></tr>"
        arr[i].shares_this_round +
        "</td></tr>" +
        arr[i].last_block +
        "</td></tr>" +
        arr[i].network_hashrate +
        "</td></tr>" +
        arr[i].fee +
        "</td></tr>" +
        arr[i].payout +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Любая помощь приветствуется.

  • 1
    Откройте консоль и прочитайте сообщение об ошибке, объясняющее, почему вы не можете это сделать. Затем Google "CORS Javascript".
  • 0
    http://asc.thecoin.pw/index.php?page=api&action=public возвращающий объект JOSN, а не массив!
Показать ещё 5 комментариев
Теги:
html-table

3 ответа

2

Поскольку ответом является объект JOSN, а не массив, вам не нужно его зацикливать. Используйте эту функцию:

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

        out += "<tr><td>" +
        arr['pool_name'] +
        "</td><td>" +
        arr['hashrate'] +
        "</td><td>" +
        arr['workers'] +
        "</td></tr>"
        arr['shares_this_round'] +
        "</td></tr>" +
        arr['last_block'] +
        "</td></tr>" +
        arr['network_hashrate'] +
        "</td></tr>" +
        arr['fee'] +
        "</td></tr>" +
        arr['payout'] +
        "</td></tr>";
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

ПРИМЕЧАНИЕ. Просто убедитесь, что каждый раз, когда ваш response является объектом JOSN или нет. Если он возвращает array то и выше метод не будет работать для ответа массива. Поэтому проверьте, является ли response массивом или нет, используя Array.isArray(response) и если он Array.isArray(response) массив, как вы делали выше, используйте мою логику.

  • 1
    typeof response никогда не вернет массив
  • 0
    Спасибо @RayonDabre! Чтобы проверить response - это массив или объект, который вы можете использовать: Array.isArray(response);
Показать ещё 2 комментария
0

Вы пытаетесь запустить массив в myFunction(). Но ваши JSON-данные представляют собой объект.

Попробуйте это для быстрого устранения этой проблемы: Изменить

var arr = JSON.parse(response);

к этому

var arr = [JSON.parse(response)];

Это поместит ваш объект (из JSON.parse) в массив, поэтому arr.length не будет undefined, и вы можете создать свою таблицу. Это работает так долго, как ваш JSON остается объектом. Если ваш ответ - массив, тогда ваш исходный код будет работать.

Вы можете расширить свое преобразование, используя простую альтернативу:

var arr = JSON.parse(response);

if (arr.length === undefined) {
    arr = [arr];
}

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

for(i = 0; i < arr.length; i++) {
    if (arr[i].workers <= 1) {
        continue;
    }
    //...
}

надеюсь, это поможет

  • 0
    Зачем оставлять unnecessary для цикла в коде .. Это может создать путаницу и в некоторых случаях будет трудно отлаживать.
  • 0
    Я изменил на 'var arr = [JSON.parse (response)];' но, к сожалению, это не исправило это.
Показать ещё 8 комментариев
-2

У меня есть прямой доступ к вашему ответу в переменной, потому что мы не можем получить дату от запроса. это работает правильно.

var xmlhttp = new XMLHttpRequest();
var url = "http://asc.thecoin.pw/index.php?page=api&action=public";
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.withCredentials = false;
xmlhttp.send();
   
function myFunction(response) {  
  out = "<table>";    
    out += "<tr><td>" +
        response.pool_name +
        "</td><td>" +
        response.hashrate +
        "</td><td>" +
        response.workers +
        "</td></tr>"
        response.shares_this_round +
        "</td></tr>" +
        response.last_block +
        "</td></tr>" +
        response.network_hashrate +
        "</td></tr>" +
        response.fee +
        "</td></tr>" +
        response.payout +
        "</td></tr>";         
  out += "</table>";
    document.getElementById("id01").innerHTML = out;  
 }     
</script>
   
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Asiccoin (ASC)</h1>
<div id="id01"></div>
  • 0
    jQuery не помечен и тоже не нужен!
  • 0
    О, так что вы используете данные, а не ссылку HTML? Как мне заставить его работать по ссылке?
Показать ещё 16 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню