filter array in object and another object attribute at the same time

Question

this is the problem, I need to filter "header" attribute and content at the same time, this is data structure:

const testData = [
        {
            header: '公众号',
            content: [{ name: '系統公告'}],
        },
        {
            header: '我的群聊',
            content: [{ name: 'test01'}, { name: '下'}, { name: '公级用户'}],
        },
        {
            header: '上级用户',
            content: [{ username: 'root' }],
        },
        {
            header: '下级用户',
            content: [{ name: 'test0301'}, { name: '1234'},],
        },
    ];

and if I input something like "下", data should show like this:

const testData = [
        {
            header: '我的群聊',
            content: [{ name: '下'}],
        },
        {
            header: '下级用户',
            content: [{ name: 'test0301'}, { name: '1234'},],
        },
    ];

if I input something like "我", data should show like this:

const testData = [
        {
            header: '我的群聊',
            content: [{ name: 'test01'}, { name: '下'}, { name: '公级用户'}],
        },
];

i just spend ten hours to think this, but i dont have any ideas......

in your first case 下, you want content like filter (means do not add other name accept 下). but in your second case you need both content other name also. i think you not clear what you want. — Mohit Sharma
– Mohit Sharma, Commented Jul 12, 2022 at 14:11

nem0z · Accepted Answer · 2022-07-12 15:02:47Z

Here is a solution that should solve your probleme :

const input = '下';

let result = testData.filter(data => {
    return (
        data.header.includes(input)
         || 
        data.content.some( el => Object.keys(el).map(key => el[key].includes(input) ).some(el => el === true) )
    );
});

console.log(result);

// Output
// [
//  {
//         "header": "我的群聊",
//         "content": [ { "name": "test01" }, { "name": "下" },  { "name": "公级用户" } ]
//     },
//     {
//         "header": "下级用户",
//         "content": [ { "name": "test0301" }, { "name": "1234" } ]
//     }
// ]

or using 2 function :

let filterHeader = function(data, input) {
    return data.filter(d => d.header.includes(input));
}

let filterContent = function(data, input) {
    return data.filter(d => d.content.some( el => Object.keys(el).map(key => el[key].includes(input) ).some(el => el === true) ));
}

console.log(filterHeader(testData, input));
console.log(filterContent(testData, input));

R4ncid · Accepted Answer · 2022-07-12 14:20:06Z

you can do something like this using Array.reduce

const filterData = (data, search) => data.reduce((res, item) => {
  if(item.header.includes(search)){
    return [
      ...res,
      item
    ]
  }
  const content = item.content.filter(({name}) => name && name.includes(search))
  
  if(content.length > 0){
    return [
     ...res,
     {...item, content}
    ]
  }
  
  
  return res

}, [])



const testData = [
        {
            header: '公众号',
            content: [{ name: '系統公告'}],
        },
        {
            header: '我的群聊',
            content: [{ name: 'test01'}, { name: '下'}, { name: '公级用户'}],
        },
        {
            header: '上级用户',
            content: [{ username: 'root' }],
        },
        {
            header: '下级用户',
            content: [{ name: 'test0301'}, { name: '1234'},],
        },
    ];
    
 console.log(filterData(testData, '下' ))
 console.log(filterData(testData, '我' ))

can i have two function , first function filter testData, and second function filter testData.content
@nem0z look it product two data, but i only need pass one filter in my component

Collectives™ on Stack Overflow

filter array in object and another object attribute at the same time

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related