Json Parse Socket.io в таблицу HTML - PullRequest
Новая
       6

Json Parse Socket.io в таблицу HTML

0 голосов
/ 07 сентября 2018

У меня есть образец из Socket.io, который является тикером цены криптовалюты. Я пытаюсь найти способ разобрать этот сокет в таблицу HTML, но все еще не могу найти ресурсы. Вот пример кода с использованием socket.io javascript: 

        <!DOCTYPE html>
    <html>

        <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
        </head>

        <body>
            <div id='trade'> open console </div>
        </body>

        <script type="text/javascript">
            var socket = io.connect('https://coincap.io');
            socket.on('trades', function (tradeMsg) {
                console.log(tradeMsg);
                document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg)
            })
        </script>

    </html>

Вот пример выходной строки из вышеуказанного кода:

{ "монета": "BTC", "exchange_id": "bitfinex", "market_id": "BTC_USD", "сообщение": { "монета": "BTC", "сообщение": { "cap24hrChange": 0.98, "длинный": "Bitcoin", "рыночной капитализации": +112062520162,10434 "перхлорэтилена": 0,98, "цена": 6454,5, "Shapeshift": правда, "короткий": "BTC", "предложение": 17254075, "usdVolume ": +4485870675,82," объем ": +4485870675,82," vwapData ": 6452,35557294237," vwapDataBTC ": +6452,35557294237}}," сообщение ": {" cap24hrChange ": 0,98," длинный ":" Биткойн " "рыночная капитализация": 112062520162,10434," перхлорэтилена ": 0,98," цена ": 6454,5," Shapeshift ": правда," короткий ":" BTC " "предложение": 17254075, "usdVolume": +4485870675,82, "объем": +4485870675,82, "vwapData": +6452,35557294237" vwapDataBTC ": 6452,35557294237}," NODE_ID ": 1," WORKER_ID ":" 3002" }

Я хочу разобрать указанное выше значение в таблицу HTML следующим образом: 

<table>
    <tr>
    <td>COIN</td>
    <td>EXCHANGE</td>
    <td>MARKET</td>
    </tr>
    <tr>
    <td>value coin here</td>
    <td>value exchange here</td>
    <td>value market here</td>
    </tr>
    </table>

Есть идеи, как разобрать JSON из сокета в HTML-таблицу? спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

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

<!DOCTYPE html>
<html>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    </head>

    <body>
        <div id='trade'></div>
    </body>

    <script type="text/javascript">

  function toTable( data ) {
  document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
  document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.coin + "</td><td>" + data.exchange_id.toUpperCase() + "</td><td> " + data.market_id + "</td><td>" + data.message.msg.price + "</td></tr>";
}

        var socket = io.connect('https://coincap.io');
        socket.on('trades', function (tradeMsg) {
            console.log(tradeMsg);
            //document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg);
            toTable(tradeMsg);


        })

    </script>

</html>

<table  border="1" id="results"></table>
0 голосов
/ 07 сентября 2018

Простой анализ таблицы HTML довольно прост. Обратите внимание, что в следующем коде используются строки шаблона. Он также не имеет проверок для проверки сообщения или существования таблицы. Так что вам может понадобиться добавить их. 

function toTable( msg ) {
  document.getElementById( 'results' )
          .insertAdjacentHTML( 'beforeend',
            `<tr><td>${msg.coin}</td><td>${msg.exchange_id}</td><td>${msg.market_id}</td></tr>`
          );
}

toTable( {"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"} );
<table id="results">
  <tr>
    <th>COIN</th>
    <th>EXCHANGE</th>
    <th>MARKET</th>
  </tr>
</table>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...