javascript - 如何迭代按日期排序的对象？

Question

我遇到了烦人的问题。我为此苦苦挣扎了好几个小时。

我需要渲染按值 date 排序的数据(通过 ajax 调用获取)

所以 JSON 看起来像

user_a: 
   { message: 
      { text: 'Hello',
        date: 1547093749649,
       },
  user_b: 
   { message: 
      { text: 'Hi',
        date: 1547093749639,
        }
   }

当我的 JSON 来自数据库时，带有 text: Hello 的对象始终位于顶部。但令人惊讶的是，当我想用​​一些 HTML 显示数据时，渲染是随机显示的。有时 user_b 先来，其他时候这是 user_a。

我也尝试过通过基于js排序方法生成一个新的对象来重建对象

sortable.sort(function(a,b){
          return b - a
        })

但没有效果。

可能和我的迭代方法有关

var html = '<div>'

Object.keys(object).map((node,i) => {

html =+ '<p>'+object[node]['message']['text']+'</p>'

})

html =+ </div>

我很困惑，我不知道如何强制 HTML 以与 JSON 对象相同的顺序呈现对象键/值。

Answer 1

使用Object.entries , Array#map , Array#sort , Template literals和 destructuring .

首先根据日期降序对它们进行排序以保留顺序。

const data={user_a:{message:{text:"Hello",date:1547093749649}},user_b:{message:{text:"Hi",date:1547093749639}}};

const res = Object
.entries(data)
.sort(([,a], [,b])=>b.message.date - a.message.date)
.map(([user,{message}])=>{
  return `
    <div>
      <p>${user}; ${message.text}; ${message.date}</p>
    </div>
  `
}).join("");

document.body.innerHTML = res;