Javascript-對物件的多個物件的陣列進行排序

我嘗試對多個物件的陣列進行排序，但沒有成功。

這是我的資料庫：

var jsonDatas = [
    {
        "type": "Voiture",
        "items": [
            {
                "name": "Fiat Punto",
                "description": "Je suis une voiture",
                "price": 10000,
                "quantity": 2,
            }, 
            {
                "name": "Porsche 911",
                "description": "Je suis une belle voiture",
                "price": 80000,
                "quantity": 0,
            }, 
        ],
    },
    {
        "type": "Maison",
        "items": [
            {
                "name": "Villa sur la plage",
                "description": "Quelle belle vue",
                "price": 870000,
                "quantity": 1,
            }, {
                "name": "Maison à la campagne",
                "description": "Vive le calme",
                "price": 170000,
                "quantity": 3,
            }
        ],
    }

我試過這個例如：

function sortDatasASC(){
  database.forEach(element =>
     element.items.sort((a, b) => (a.name > b.name) ? 1 : -1)),
  catalogFiltered();

我試圖創建一個中間陣列來推送專案，然后與型別重新關聯，但它不起作用。

例如，這適用于一個復選框，如果有庫存則顯示產品，但不能復制它以進行排序

const choiceStock = document.getElementById('stockCheck').addEventListener('change', function () {

  let datas = [];

  if (this.checked) {

    let filter = [];
    database.forEach(element =>
      filter.push({ 'type': element.type, 'items': element.items.filter(test => test.quantity > 0) })
    );
    datas = filter;

  } else {
    datas = database;
  }
  showCatalog(datas);
});

如果你有什么想法！？

提前致謝。

uj5u.com熱心網友回復：

您的資料按型別分組，但由于您希望按名稱而不是按型別/名稱排序，我會將結構展平為物件陣列，然后應用上面的邏輯：

const flattened = jsonDatas.reduce((acc, entry) => {
  //since we dont want to lose the type information I'm cloning
  //each item and adding a type property to it.
  const items = entry.items.map(i => ({ ...i, type: entry.type }));
  return acc.concat(items);
}, []);

flattened.sort((a, b) => {
  if (a.name.toLowerCase() === b.name.toLowerCase()) {
    return 0;
  }
  return a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1;
});

//the type is retained so we can rebuild the structure:
const restructured = flattened.map(item => ({
  type: item.type,
  items: [item],
}));

console.log(flattened);
console.log(restructured);

我還假設您想要不區分大小寫的排序。如果不是這種情況，請繼續洗掉“toLowerCase”呼叫。

uj5u.com熱心網友回復：

首先，您需要制作一個平面陣列。為了能夠按type屬性排序，您需要向type每個元素添加 。您還可以根據屬性型別（字串/數字）更改排序功能。這只是一個簡單的例子：

const jsonDatas=[{type:"Voiture",items:[{name:"Fiat Punto",description:"Je suis une voiture",price:1e4,quantity:2},{name:"Porsche 911",description:"Je suis une belle voiture",price:8e4,quantity:0}]},{type:"Maison",items:[{name:"Villa sur la plage",description:"Quelle belle vue",price:87e4,quantity:1},{name:"Maison à la campagne",description:"Vive le calme",price:17e4,quantity:3}]}];

const flatData = jsonDatas.flatMap(({ items, type }) => items.map(item => ({ ...item, type })));

const sortBy = (arr, property, direction = 'asc') => {
  if (arr.length === 0) return [];
  const propertyType = typeof arr.at(0)[property];
  
  const sortCallbacks = {
    string: (e1, e2) => e1[property].localeCompare(e2[property]),
    number: (e1, e2) => e1[property] - e2[property],
  };
  
 const sortedAsc = arr.sort(sortCallbacks[propertyType]);
 if (direction === 'asc' ) return sortedAsc;
 return sortedAsc.reverse();
};

console.log(sortBy(flatData, 'name' ));
console.log(sortBy(flatData, 'type', 'dsc'));
console.log(sortBy(flatData, 'price', 'dsc'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

uj5u.com熱心網友回復：

我終于找到了解決方案，看看下面這是否可以幫助你們中的一些人：

function createArrayToSort(database) {
  let datas = [];
    database.forEach(element =>
      element.items.forEach(items =>
          datas.push({'type': element.type, 'items': [items]})  
    ))
    return datas;
};

 function sortByName(direction){
  let datas = createArrayToSort(database);
    if(direction == "ASC") {
        datas.sort((a, b) => (a.items[0].name > b.items[0].name) ? 1 : -1);
    } else {
        datas.sort((a, b) => (b.items[0].name > a.items[0].name) ? 1 : -1);
 }
  showCatalog(datas);
};

function sortByPrice(direction){
  let datas = createArrayToSort(database);
    if(direction == "ASC") {
        datas.sort((a, b) => (a.items[0].price > b.items[0].price) ? 1 : -1);
    } else {
        datas.sort((a, b) => (b.items[0].price > a.items[0].price) ? 1 : -1);
 }
  showCatalog(datas);
};
const nameASC = document.getElementById('nameASC').addEventListener('click', function () {
sortByName('ASC')
});

uj5u.com熱心網友回復：

您jsonDatas在問題的片段中與顯示的其他值的螢屏截圖不匹配（例如， Peugeot 205作為"type": "Voiture"條目）。這意味著除了您列出的物件之外，完整的物件還jsonDatas包含相同型別（Voiture或）的其他物件。Maison

如果這是jsonDatas結構的方式，那么要按照您的意愿對其進行排序，您需要做兩件事：

1. 第一：轉換jsonDatas成一個物件陣列，例如那些物件包含一個items只有一個元素的陣列。這將使您可以單獨管理記錄的順序。在我下面的代碼段中，這將是singleItem陣列中的結果。

2. 第二：將輸入轉換為singleItem樣式陣列后，您可以簡單地按陣列中唯一專案的名稱對該陣列進行排序items（即：）.items[0].name。

您可以在下面看到作業代碼。我使用了flatMap和map，因為這些是進行步驟 #1 轉換的便捷方法。

var jsonDatas = [
    {
        "type": "Voiture",
        "items": [
            {
                "name": "Fiat Punto",
                "description": "Je suis une voiture",
                "price": 10000,
                "quantity": 2,
            }, 
            {
                "name": "Porsche 911",
                "description": "Je suis une belle voiture",
                "price": 80000,
                "quantity": 0,
            }, 
        ],
    },
    {
        "type": "Maison",
        "items": [
            {
                "name": "Villa sur la plage",
                "description": "Quelle belle vue",
                "price": 870000,
                "quantity": 1,
            }, {
                "name": "Maison à la campagne",
                "description": "Vive le calme",
                "price": 170000,
                "quantity": 3,
            }
        ],
    }
]

var singleItem = jsonDatas.flatMap(t => t.items.map(i => { return { type: t.type, items: [ i ] } }))
var sorted = singleItem.sort((a, b) => a.items[0].name.localeCompare(b.items[0].name))
console.log(sorted)

uj5u.com熱心網友回復：

對于通過型別進行簡單排序就像是

jsonDatas.sort((a, b) => (a.type > b.type) ? 1 : -1)

標籤：javascript 数组 排序 目的 筛选

上一篇：結合不同的方法來計算嵌套串列中的元素

下一篇：如何根據ReactJS中的選擇更改表單初始值和欄位？