Как получить данные на html-странице

#javascript #html #node.js #reactjs #fetch-api

Вопрос:

 var axios = require('axios')
var data = JSON.stringify({ pair: 'ADA/LCX' })

var config = {
  method: 'post',
  url: 'https://exchange-api.lcx.com/order/book',
  headers: {
    'Content-Type': 'application/json',
  },
  data: data,
}

axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data))
  })
  .catch(function (error) {
    console.log(error)
  })
 

я хочу вставить этот код в таблицу html.
когда я запускаю cmd, я получаю результат, мне нужно скопировать файл alwys на свой рабочий стол, или я не могу отправить результат в html-копию файла json?

Комментарии:

1. Например, смотрите этот учебник: gawdiseattle.gitbook.io/wdi/05-node-express/00readme-1/…

Ответ №1:

Вы задали широкий вопрос, вот его реализация с использованием React JS и Fetch API, код может быть дополнительно оптимизирован и может быть изменен в соответствии с вашими потребностями.

App.js

 import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [buy, setBuy] = useState();
  const [sell, setSell] = useState();

  useEffect(() => {
    const pairData = { pair: "ADA/LCX" };
    fetch("https://exchange-api.lcx.com/order/book", {
      method: "POST",
      header: "Content-Type: application/json",
      body: JSON.stringify(pairData)
    }).then(function (response) {
      response.json().then(function (data) {
        setBuy(data.data.buy);
        setSell(data.data.sell);
      });
    });
  }, [buy]);

  return (
    <>
      <table className="customers">
        <tr>
          <th>Buy - Start</th>
          <th>Buy - End</th>
        </tr>
        {buy
          ? Object.entries(buy).map(([make, type]) => {
              return (
                <tr>
                  <td>{type[0]}</td>
                  <td>{type[1]}</td>
                </tr>
              );
            })
          : null}
      </table>
      <table className="customers">
        <tr>
          <th>Sell - Start</th>
          <th>Sell - End</th>
        </tr>
        {sell
          ? Object.entries(sell).map(([make, type]) => {
              return (
                <tr>
                  <td>{type[0]}</td>
                  <td>{type[1]}</td>
                </tr>
              );
            })
          : null}
      </table>
    </>
  );
}
 

Style.css

 .customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

.customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

.customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

.customers tr:hover {
  background-color: #ddd;
}

.customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #04aa6d;
  color: white;
}
 

Живая демонстрация:
https://codesandbox.io/s/charming-jennings-ol4vl

Комментарии:

1. Если вы считаете, что вопрос слишком широк, то лучше не отвечать на него. Обратите внимание, что ОП не пометил вопрос ни react тем, ни fetch-api другим . На самом деле, операция специально использует node.js и аксиос.

2. У него также не было тега nodejs, поэтому я ответил на него в react, и я также не знаю, как избежать ответов на общие вопросы, спасибо @Boaz

3. я использую вот так : узел ADALCX.js > ADALCX ;; чтобы сохранить вывод json, мне нужно выполнять эту команду каждую секунду для обновления цены

4. вот почему я хочу вставить скрипт в html-таблицу , может быть, быстро