簡體   English   中英

在Javascript中操作對象數組

[英]Manipulate Array of Objects in Javascript

我不太確定如何在這篇文章的標題中表達我的意圖,因此,如果標題誤導或太含糊,請原諒我。

我有一個通過oData調用創建的對象數組(這在SAPUI5應用程序中)。 實際的對象具有三個以上的鍵/值對,但為了使此示例簡單起見,我將其刪除。

[{
  "note_type_description": "General",
  "note_date": "/Date(872850505000)/",
  "note_text": "THIS IS A SUBSIDUARY OF THAT."
}, 
{
  "note_type_description": "General",
  "note_date": "/Date(873072000000)/",
  "note_text": "Say What Now?"
}, 
{
  "note_type_description": "General",
  "note_date": "/Date(891388800000)/",
  "note_text": "Say Who Now?"
},
{
  "note_type_description": "General",
  "note_date": "/Date(891993600000)/",
  "note_text": "Say When Now?"
},
{
  "note_type_description": "Interaction",
  "note_date": "/Date(909014400000)/",
  "note_text": "Say How Now?"
},
{
  "note_type_description": "Interaction",
  "note_date": "/Date(906422400000)/",
  "note_text": "Say Valentine Now?"
},
{
  "note_type_description": "Interaction",
  "note_date": "/Date(1485907200000)/",
  "note_text": "The latest interaction."
},
{
  "note_type_description": "Company Information",
  "note_date": "/Date(1477958400000)/",
  "note_text": "Some information about Person"
},
{
  "note_type_description": "Company Information",
  "note_date": "/Date(1483228800000)/",
  "note_text": "Are they private or public?"
},
{
  "note_type_description": "Company Information",
  "note_date": "/Date(1485907200000)/",
  "note_text": "Hope this is enough information!"
},
{
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1485993600000)/",
  "note_text": "Good!"
},
{
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1487116800000)/",
  "note_text": "Better!"
},
{
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1488412800000)/",
  "note_text": "Best!"
},
{
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1490918400000)/",
  "note_text": "Superb!"
}]

我想遍歷對象,並創建一個新的對象數組,其中包含最新條目(note_date)的每種類型(note_type_description)中的兩個,以便可以在UI中進行渲染。

我對JS還是有些陌生,因此我幾乎不清楚我將使用哪種數組方法來完成此工作。 我想這將從Array.map()開始並從那里開始。 任何援助將不勝感激! 我將繼續對此進行說明,並在發布過程中發布我的所有更新!

**更新**

我使用@Titus的示例,這是經過一些修改(從箭頭功能切換為常規功能)后的樣子:

var oArr = [{
  "note_type_description": "General",
  "note_date": "/Date(872850505000)/",
  "note_text": "THIS IS A SUBSIDUARY OF THAT."
}, {
  "note_type_description": "General",
  "note_date": "/Date(873072000000)/",
  "note_text": "Say What Now?"
}, {
  "note_type_description": "General",
  "note_date": "/Date(891388800000)/",
  "note_text": "Say Who Now?"
}, {
  "note_type_description": "General",
  "note_date": "/Date(891993600000)/",
  "note_text": "Say When Now?"
}, {
  "note_type_description": "Interaction",
  "note_date": "/Date(909014400000)/",
  "note_text": "Say How Now?"
}, {
  "note_type_description": "Interaction",
  "note_date": "/Date(906422400000)/",
  "note_text": "Say Valentine Now?"
}, {
  "note_type_description": "Interaction",
  "note_date": "/Date(1485907200000)/",
  "note_text": "The latest interaction."
}, {
  "note_type_description": "Company Information",
  "note_date": "/Date(1477958400000)/",
  "note_text": "Some information about Person"
}, {
  "note_type_description": "Company Information",
  "note_date": "/Date(1483228800000)/",
  "note_text": "Are they private or public?"
}, {
  "note_type_description": "Company Information",
  "note_date": "/Date(1485907200000)/",
  "note_text": "Hope this is enough information!"
}, {
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1485993600000)/",
  "note_text": "Good!"
}, {
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1487116800000)/",
  "note_text": "Better!"
}, {
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1488412800000)/",
  "note_text": "Best!"
}, {
  "note_type_description": "Relationship Strategy",
  "note_date": "/Date(1490918400000)/",
  "note_text": "Superb!"
}];

var sortedArr = oArr.sort(function(a, b) {
  b.note_date.match(/\d+/)[0] - a.note_date.match(/\d+/)[0]
});
var toRender = [];

sortedArr.forEach(function(v) {
  if (toRender.filter(function(vv) {
      return v.note_type_description == vv.note_type_description
    }).length < 2) {
    toRender.push(v);
  }
});

toRender.forEach(function(oKey) {
  console.log(oKey.note_type_description + " | " + oKey.note_text);
});

*****更新#2 *****

只是為了完成此過程並提供上下文,這就是我最終得到的結果:

    _setNotes: function(oResponse) {
        if (typeof oResponse.results !== "undefined") {
            var aAllNotes = oResponse.results;
            var aTruncNotes = [];

            var sortedNotes = aAllNotes.sort(function(a, b) {
                a = new Date(a.note_date);
                b = new Date(b.note_date);
                return a>b ? -1 : a<b ? 1 : 0;
            });

            sortedNotes.forEach(function(v) {
                if (aTruncNotes.filter(function(vv) {
                        return v.note_type_description === vv.note_type_description;
                    }).length < 2) {
                    aTruncNotes.push(v);
                }
            });
        }
        this.getView().getModel("view").setProperty("/allNotes", aAllNotes);
        this.getView().getModel("view").setProperty("/truncNotes", aTruncNotes);
    }

現在,我可以在UI5 XML視圖中調用“ truncNotes”對象,並按以下方式返回該對象:

在此處輸入圖片說明

一種方法是note_date對數組進行note_date ,然后創建一個新數組,並僅向其中添加2個具有相同note_type_description值的對象。

這是一個例子:

 var arr = [{ "note_type_description": "General", "note_date": "/Date(872850505000)/", "note_text": "THIS IS A SUBSIDUARY OF THAT." }, { "note_type_description": "General", "note_date": "/Date(873072000000)/", "note_text": "Say What Now?" }, { "note_type_description": "General", "note_date": "/Date(891388800000)/", "note_text": "Say Who Now?" }, { "note_type_description": "General", "note_date": "/Date(891993600000)/", "note_text": "Say When Now?" }, { "note_type_description": "Interaction", "note_date": "/Date(909014400000)/", "note_text": "Say How Now?" }, { "note_type_description": "Interaction", "note_date": "/Date(906422400000)/", "note_text": "Say Valentine Now?" }, { "note_type_description": "Interaction", "note_date": "/Date(1485907200000)/", "note_text": "The latest interaction." }, { "note_type_description": "Company Information", "note_date": "/Date(1477958400000)/", "note_text": "Some information about Person" }, { "note_type_description": "Company Information", "note_date": "/Date(1483228800000)/", "note_text": "Are they private or public?" }, { "note_type_description": "Company Information", "note_date": "/Date(1485907200000)/", "note_text": "Hope this is enough information!" }, { "note_type_description": "Relationship Strategy", "note_date": "/Date(1485993600000)/", "note_text": "Good!" }, { "note_type_description": "Relationship Strategy", "note_date": "/Date(1487116800000)/", "note_text": "Better!" }, { "note_type_description": "Relationship Strategy", "note_date": "/Date(1488412800000)/", "note_text": "Best!" }, { "note_type_description": "Relationship Strategy", "note_date": "/Date(1490918400000)/", "note_text": "Superb!" }]; var sortedArr = arr.sort((a, b) => b.note_date.match(/\\d+/)[0] - a.note_date.match(/\\d+/)[0]); var toRender = []; sortedArr.forEach(v => { if(toRender.filter(vv => v.note_type_description == vv.note_type_description).length < 2){ toRender.push(v); } }); console.log(toRender); 

這不是最有效的方法,但是它將向您介紹JavaScript數組函數,例如sortfilterforEach

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM