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 obj相同的顺序呈现对象键/值。

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;

Answer 2

sort将属性放入数组，然后在它们上循环：

var obj = {
  user_a: {
    message: {
      text: 'Hello',
      date: 1547093749649,
    }
  },
  user_b: {
    message: {
      text: 'Hi',
      date: 1547093749639,
    }
  }
};

var html = '<div>';
var props = Object.keys(obj).sort((a, b) => obj[a].message.date - obj[b].message.date);
props.forEach(x => html += '<p>'+obj[x].message.text+'</p>')
html += '</div>';

console.log(html);

Answer 3

您可以将users对象的值提取到数组中，并按date属性对其进行排序：

const users = { 
    user_a: {
        message: {
           text: 'Hello',
           date: 1547093749649,
        } 
    },
    user_b: {
        message: { 
           text: 'Hi',
           date: 1547093749639,
        }
    }
};

const sortedUsers = Object.values(users).sort((userA, userB) => userA.message.date - userB.message.date);

console.log(sortedUsers)

Answer 4

您应该将对象转换为数组，然后进行排序

const obj = {
  user_a: {
    message: {
      text: 'Hello',
      date: 1547093749649,
    },
  },
  user_b: {
    message: {
      text: 'Hi',
      date: 1547093749639,
    }
  }
};

const objArray = Object.keys(obj).map((key) => {
  // Merge the key (user_a) into the inner object as a name property
  return {...obj[key], name: key};
});

// Now sort the array by date or whatever else you need
console.log(objArray.sort((a,b) => a.message.date - b.message.date));

Answer 5

尝试一下：

var html = '<div>';
 Object.keys(obj).sort((node1, node2) => {
        return obj[node1]['message']['date'] - obj[node2]['message'];['date']
    })
    .map((node,i) => {
        html =+ '<p>'+object[node]['message']['text']+'</p>'
    });
    html =+ </div>;

Answer 6

我终于找到了解决方法。

我将对象转换为数组

[
   { text: 'Hello',
     date: 1547093749619,
     user:b
   },
   { text: 'Hi',
     date: 1547093749639,
     user:a
   },
]

然后我使用sort

重建了阵列

                   var sortable = []


                    for(var i = 0; i < array.length; i++){
                      sortable.push(array[i]['date'])
                    }



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

                   var new_array = []

                   for(var i = 0; i < sortable.length; i++){
                    for(var j = 0; j < array[i].length; j++){
                     if(sortable[i] === array[j]['date']){
                       new_array.push(array[j])
                     }
                    }
                  }

该解决方案解决了我的问题。我发现javascript Object是随机排序的，我无能为力。但是对于Array来说，总是以正确的顺序显示是不同的。

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

6 个答案: