#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-таблицу , может быть, быстро