按陣列屬性的屬性過濾物件陣列

我有一個這樣的陣列：

const array = [
    { id: 1, name: 'a1', props: [
        { name: 'b1', typeId: 1 },
        { name: 'b2', typeId: 1 },
        { name: 'b3', typeId: 5 },
        { name: 'b4', typeId: 5 },
    ] },
    { id: 2, name: 'a2', props: [
        { name: 'c1', typeId: 1 },
        { name: 'c2', typeId: 1 },
        { name: 'c3', typeId: 5 },
    ] },
    { id: 3, name: 'a3', props: [
        { name: 'd1', typeId: 5 },
        { name: 'd2', typeId: 5 },
    ] },
    { id: 4, name: 'a4', props: [
        { name: 'e1', typeId: 1 },
    ] }
];

我想通過 prop 的 typeId 屬性過濾這個陣列。例如：

如果typeId == 5，那么它應該回傳 id 為 1、2、3 且只有 props 的 typeId 等于 5 的專案。像這樣：

filteredArray = [
    { id: 1, name: 'a1', props: [
        { name: 'b3', typeId: 5 },
        { name: 'b4', typeId: 5 },
    ] },
    { id: 2, name: 'a2', props: [
        { name: 'c3', typeId: 5 },
    ] },
    { id: 3, name: 'a3', props: [
        { name: 'd1', typeId: 5 },
        { name: 'd2', typeId: 5 },
    ] }
];

或者如果typeId == 1，那么它應該回傳 id 為 1、2、4 的專案，只有 typeId 等于 1 的道具。像這樣：

    filteredArray = [
    { id: 1, name: 'a1', props: [
        { name: 'b1', typeId: 1 },
        { name: 'b2', typeId: 1 },
    ] },
    { id: 2, name: 'a2', props: [
        { name: 'c1', typeId: 1 },
        { name: 'c2', typeId: 1 },
    ] },
    { id: 4, name: 'a4', props: [
        { name: 'e1', typeId: 1 },
    ] }
];

我寫了這樣的東西，但它沒有按預期作業。它不過濾道具陣列。如果它的 props 陣列有一個 typeId 等于 的專案，則回傳一個專案typeId。

let typeId = 1;

let filteredArray = array.filter(x => {
  return x.props.some(y => {
    return y.typeId == typeId;
  });
});

uj5u.com熱心網友回復：

如果您不介意修改輸入資料，可以使用forEach：

array.forEach(
  (elt) => elt.props = elt.props.filter((subElt) => subElt.typeId === 5)
)

此外，您可能想要過濾具有elt.props空的元素：

const result = array.filter(elt => elt.props.length > 0)

uj5u.com熱心網友回復：

您可以通過檢查道具的 typeId 來使用 map 和 filter

const array = [{
    id: 1,
    name: 'a1',
    props: [{
        name: 'b1',
        typeId: 1
      },
      {
        name: 'b2',
        typeId: 1
      },
      {
        name: 'b3',
        typeId: 5
      },
      {
        name: 'b4',
        typeId: 5
      },
    ]
  },
  {
    id: 2,
    name: 'a2',
    props: [{
        name: 'c1',
        typeId: 1
      },
      {
        name: 'c2',
        typeId: 1
      },
      {
        name: 'c3',
        typeId: 5
      },
    ]
  },
  {
    id: 3,
    name: 'a3',
    props: [{
        name: 'd1',
        typeId: 5
      },
      {
        name: 'd2',
        typeId: 5
      },
    ]
  },
  {
    id: 4,
    name: 'a4',
    props: [{
      name: 'e1',
      typeId: 1
    }]
  }
];

const typeId = 5;

const result = array.map(({
  id,
  name,
  props
}) => ({
  id,
  name,
  props: props.filter(({
    typeId: t
  }) => t === typeId)
})).filter(({
  props
}) => props.length);

console.log(result);

uj5u.com熱心網友回復：

您可以使用 afilter來獲取想要typeId的 s，然后reduce在主陣列上使用 a 來僅保留相關專案。

此方法不會修改原始陣列。

const array = [
    { id: 1, name: 'a1', props: [
        { name: 'b1', typeId: 1 },
        { name: 'b2', typeId: 1 },
        { name: 'b3', typeId: 5 },
        { name: 'b4', typeId: 5 },
    ] },
    { id: 2, name: 'a2', props: [
        { name: 'c1', typeId: 1 },
        { name: 'c2', typeId: 1 },
        { name: 'c3', typeId: 5 },
    ] },
    { id: 3, name: 'a3', props: [
        { name: 'd1', typeId: 5 },
        { name: 'd2', typeId: 5 },
    ] },
    { id: 4, name: 'a4', props: [
        { name: 'e1', typeId: 1 },
    ] }
];
function filterBySubTypeId(baseArray, subprop, subpropValue) {
    return baseArray.reduce((acc, val) => {
    const props = val.props.filter(prop => prop[subprop] === subpropValue); // Keep track of filtered sub-properties
    return props.length > 0 ? [...acc, {...val, props}] : acc; // Return the accumulator or the concatenated accumulator with a modified copy of the item  
  }, [])
}

console.log(filterBySubTypeId(array, 'typeId', 1))
console.log(filterBySubTypeId(array, 'typeId', 5))
console.log(filterBySubTypeId(array, 'typeId', 2)) // []

標籤：有角度的

上一篇：node.jsexpress只回傳與用戶相關的元素

下一篇：子組件選擇器弄亂了父div行