Я пытаюсь отображать данные каждую секунду из файла json, которые выглядят так:
{
"messages": [{
"time": "00:00:01",
"color": "#ff4500",
"nickname": "example1",
"message": "LOL"
}, {
"time": "00:00:02",
"color": "#5f9ea0",
"nickname": "example2",
"message": "WTFFFF"
}, {
"time": "00:00:05",
"color": "#5f9ea0",
"nickname": "example5",
"message": "hello"
}]}
и получить такой эффект в html:
Вы могли бы сделать что-то вроде этого
let data = {
"messages": [{
"time": "00:00:01",
"color": "#ff4500",
"nickname": "example1",
"message": "LOL"
}, {
"time": "00:00:02",
"color": "#5f9ea0",
"nickname": "example2",
"message": "WTFFFF"
}, {
"time": "00:00:05",
"color": "#5f9ea0",
"nickname": "example5",
"message": "hello"
}]
}
let msg = document.querySelector("#messages")
let display = ([x, ...rest]) => {
if (!x) return
setTimeout(_ => {
msg.innerHTML += `<p>
<span>${x.time}</span>
<b><span style = "color: ${x.color}">${x.nickname}</span></b>:
<span>${x.message}</span></p>`
display(rest)
}, 1000)
}
display(data.messages)
<div id = "messages"></div>