How to filter array with specific key react native

Question

I have an array like below:

const data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
...
]

What I want to do is this. Suppose, I only want to see the conversation between user1 and user 2.

So I want to filter the array and make a new array which will contain only those data where sender is user1 and receiver is user2 or sender is user2 and receiver is user1.

I think, it can be done using map or stuff like that but I actually have no idea. I am new to React Native.

Question authors are not obligated to "accept" an answer. However, we prefer it if an author does accept an answer, since this removes the question out of the unanswered lists and API feeds. You don't need to worry about favouritism when accepting - just choose one thought was most helpful or explanatory. — halfer
– halfer, Commented Jun 28, 2020 at 13:04

AttemptedMastery · Accepted Answer · 2020-06-26 16:09:34Z

2

let result = []

getSenderRec = (user1, user2) => {
    data.filter(data => {
        if (user1 === data.sender && user2 === data.receiver || user2 === data.sender && user1 === data.receiver){
                result.push(data)
            }
        }   
    )
}
const data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
]

getSenderRec('user1', 'user2')

console.log(result)

Here is your console.log(result) output:

[ { id: '1', sender: 'user1', receiver: 'user2', msg: 'hello!' },
  { id: '2', sender: 'user2', receiver: 'user1', msg: 'yo!' } ]

edited Jun 26, 2020 at 16:09

answered Jun 26, 2020 at 16:06

AttemptedMastery

7686 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NothingtoSay Over a year ago

Thanks for the second quickest answer!! I am going to test it right now! I will vote up then :)

Kellen · Accepted Answer · 2020-06-26 16:09:55Z

2

Use Array.filter. The callback returns a boolean:

const data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
];

function filterData(data) {
    return data.filter((x) => (x.sender === 'user1' && x.receiver === 'user2') || (x.sender === 'user2' && x.receiver ===  'user2'));
}

const result = filterData(data);

answered Jun 26, 2020 at 16:09

Kellen

6117 silver badges19 bronze badges

2 Comments

NothingtoSay Over a year ago

Thanks :) Gonna test all and inform you all :D

NothingtoSay Over a year ago

snack.expo.io/@nothingtosay/courageous-orange this shows this worst error :(

AlexAV-dev · Accepted Answer · 2020-06-26 16:04:58Z

1

You need just use filter for array

const data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
]

const result = data.filter(rec => {
  if (rec.sender === 'user1' && rec.receiver === 'user2') {
    return rec
  }
  if (rec.sender === 'user2' && rec.receiver === 'user1') {
    return rec
  }
})

answered Jun 26, 2020 at 16:04

AlexAV-dev

1,1756 silver badges14 bronze badges

3 Comments

NothingtoSay Over a year ago

Thanks for the quickest reply! I am going to test it right now! :)

NothingtoSay Over a year ago

This shows Objects are not valid as react childs :(

NothingtoSay Over a year ago

this shows this worst error D: snack.expo.io/@nothingtosay/joyous-donut

Anku Singh · Accepted Answer · 2020-06-26 16:08:33Z

1

You need to use like below

 const data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
...
]

let filtereddata = data.filter((el)=>{
    return el.sender === "user1" && el.receiver === "user2"
    
})

here filtereddata will have only result which you wanted to show

answered Jun 26, 2020 at 16:08

Anku Singh

9546 silver badges12 bronze badges

7 Comments

NothingtoSay Over a year ago

Thanks!! Gonna test it and let you all know :)

NothingtoSay Over a year ago

This shows this horrible error: snack.expo.io/@nothingtosay/crabby-apple plz help :(

Anku Singh Over a year ago

the code you have sent is class based component and you cann't declare your const variable like that either move it to componentDidMount() or any other function that need to be declared inside your react class component it will work

NothingtoSay Over a year ago

Anku I made some updates, please check it now. it still shows the same

Anku Singh Over a year ago

You need to make a minor change when you are showing your data in render function you are printing the whole object i mean like this <Text>{this.state.data}</Text> but you need to extract some specific value from the array and print like {this.state.data[0].id}

|

Rajneesh · Accepted Answer · 2020-06-26 16:18:16Z

1

You can maintain an array of users and based on that you can filter the array:

var data = [
{"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
{"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
{"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
{"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
];
var users=['user1', 'user2'];

var result = data.filter(chat=>users.includes(chat.sender) && users.includes(chat.receiver));

console.log(result);

Or You can also have an array of filters maintained for keys of the object. It will short the code even more. Here it is:

var data = [
    {"id":"1", "sender":"user1", "receiver":"user2", "msg":"hello!"},
    {"id":"2", "sender":"user2", "receiver":"user1", "msg":"yo!"},
    {"id":"3", "sender":"user3", "receiver":"user1", "msg":"hi!!"},
    {"id":"4", "sender":"user1", "receiver":"user3", "msg":"hmm"},
];

var users=['user1', 'user2'];
var filters=['sender', 'receiver'];

var result = data.filter(chat=>filters.every(k=>users.includes(chat[k])));
console.log(result);

edited Jun 26, 2020 at 16:18

answered Jun 26, 2020 at 16:07

Rajneesh

5,3181 gold badge10 silver badges20 bronze badges

1 Comment

NothingtoSay Over a year ago

Uh!! This community is awesome!! I gonna test all these three and let you all know my votes :)

Collectives™ on Stack Overflow

How to filter array with specific key react native

5 Answers 5

1 Comment

2 Comments

3 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

3 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related