React Native Filter data - react-native

I'm making a chat app with N participants, and want to search according to first name.
const filteredData = this.state.rawData.filter(id =>
id.members[0].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
||
id.members[1].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
)
is not acceptable, as there are n members, not always two.
const filteredData = this.state.rawData.filter(id =>
id.members.forEach(element => {
element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
}
)
Returns me that undefined is not an object 'element.first_name.toUpperCase'
Why?
EDIT:
Sample data
rawData: [
{
new: 0,
id: '1',
members:
[
{
email: 'grantmarshall#test.com',
first_name: 'Grant',
last_name: 'Marshall',
id: "1",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'Grant Marshall',
user:'',
},
{
email: 'you#you.com',
first_name: 'youfn',
last_name: 'yousn',
id: "5ad0007828b1930043a5303d",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'youfn youfn',
user:'',
},
{ email: 'self#self.com' }],
messages:
[
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'roident est duis duis sit occaecat ea eiusmod laboris mollit', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'Should not display', time: '9:22', parse_mode: 'none' },
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'my second', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'my second Should not display', time: '9:22', parse_mode: 'none' },
]
},

It's because element.first_name is undefined in 3rd iteration of the array.
Change your condition to:
element.first_name && element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1

Related

Multiple filters / Filter inside filter - React Native

how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);

Why get "Mismatch between request payer account number and session" when use paypal smart button with multiple payee

Is it possible to pay to multiple payee with using login informations or smart button?
I tried the following
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
reference_id: 'reference1',
amount: {
value: 1,
currency: 'USD',
breakdown: {
item_total: {
currency_code: 'USD',
value: 1
}
}
},
description: 'description',
payee: {
email_address: 'example2#email.com'
},
items: [{
name: 'item1',
unit_amount: {
currency_code: 'USD',
value: 1
},
quantity: 1
}]
},
{
reference_id: 'referenceid1',
amount: {
value: 1,
currency: 'USD',
breakdown: {
item_total: {
currency_code: 'USD',
value: 1
}
}
},
description: 'The payment transaction description.',
payee: {
email_address: 'example2#email.com'
},
items: [{
name: 'item2',
unit_amount: {
currency_code: 'USD',
value: 1
},
quantity: 1
}]
}]
})
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!')
})
}
}).render('#paypal-button-container')
<script src="https://www.paypal.com/sdk/js?client-id=xxx"></script>
and get error
{
description: "Mismatch between request payer account number and session"
field: "/purchase_units/#reference_id==reference1"
issue: "PAYER_INVALID_FOR_PAYMENT"
}
with single purchase unit work correctly
Not possible, only a single purchase_unit can be approved in the Checkout flow

react-native fetch api response parse to specific format

Below is my code to fetch a response from an API -
fetch('http://34.215.9.246:9000/api/chat/get-chat-messages-for-participant?participantId='+this.state.participantId+'&projectId='+this.state.projectId)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson)
var reponseApi=responseJson.stringify;
console.log(reponseApi)
// console.log((responseJson.stringify.replace("\"customizedChatmessage\": \"",'')).replace("\"",""));
this._isMounted = true;
this.setState(() => {
return {
messages: require('../../assets/data/messages.js'),
//messages: (responseJson.replace("\"customizedChatmessage\": \"",'')).replace("\"","")
};
});
})
.catch((error) => {
console.error(error);
});
the reponse of this api is :
[ {
"customizedChatmessage": "{_id: Math.round(Math.random() * 1000000), text: HI,user: {_id: 5a91138ce4b01f2df36531a5, name: alok sharama sir}, },"
},
{
"customizedChatmessage": "{_id: Math.round(Math.random() * 1000000), text: Hello World,user: {_id: 5a91138ce4b01f2df36531a5, name: alok sharama sir}, },"
},
{
"customizedChatmessage": "{_id: Math.round(Math.random() * 1000000), text: test message,user: {_id: 5a91138ce4b01f2df36531a5, name: alok sharama sir}, },"
}
]
i want to modify the response into a specific format into something shown below:
[{
_id: 516152, text: 'Hi',user: {_id: 1, name: 'Alok Sharma'},
},
{
_id: 396263, text: 'how r u ',user: {_id: 1, name: 'Alok Sharma'},
},
{
_id: 652380, text: 'image is not fine. cahnge it',user: {_id: 1, name: 'Alok Sharma'},
},
{
_id: 186058, text: 'image is not fine. cahnge it',user: {_id: 1, name: 'Alok Sharma'},
},
{
_id: 104931, text: 'image is not fine. cahnge it',user: {_id: 1, name: 'Alok Sharma'},
}]
Help me out to solve this issue. Thanks

show comments like facebook with express

I have the next Schema:
var eventSchema = mongoose.Schema({
title: 'string',
propietary_id: 'String',
comments : [{
text: 'string',
user: { type : mongoose.Schema.Types.ObjectId, ref : 'users' },
createdAt: {type: Date, default: Date.now }
}]
});
my query:
Event.find().populate('comments.user').exec(function(err, doc){
console.log(err);
console.log(doc);
});
it's possible return object with events information, 2 comments and total number of comments (like facebook) ?
I would do it like this:
var NBR_OF_COMMENTS = 2;
Event.find().populate('comments.user').exec(function(err, event){
var comments = event.comments;
var totalNbrOfComments = comments.length;
comments.splice(NBR_OF_COMMENTS, totalNbrOfComments - NBR_OF_COMMENTS);
event.comments = {
count: comments.length,
total: totalNbrOfComments,
items: comments,
};
res.json(event);
});
For example, this should return the following:
{
title: 'test',
property_id: '123',
comments: {
count: 2,
total: 5,
items: [
{
text: 'comment 1',
...
},
{
text: 'comment 2',
...
},
],
}
}

How to map hierarchical Json to ItemFileWriteStore?

I have Json data that has children elements. I need to bind the store to an editable grid and have the edits populated to the store.
The data tree does get populated into the ItemFileWriteStore. The datagrid displays only the parent data and none of the children data.
SAMPLE.TXT
{
"items": [
{
"profileId": "1",
"profileName": "ABC",
"profileType": "EmailProfile",
"profilePreferences": [
{
"profilePreferenceId": "1",
"displayText": "Bob",
"address": "primary#some.com"
},
{
"profilePreferenceId": "2",
"displayText": "Sally",
"address": "secondary#some.com"
},
{
"profilePreferenceId": "3",
"displayText": "Joe",
"address": "alternate#some.com"
}
]
}
]
}
javascript
var sampleLayout = [
[
{ field: 'profileName', name: 'profileName', width: '100px' },
{ field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
{ field: 'profilePreferences.address', name: 'address', width: '100px' }
]];
function populateGrid() {
var url = "sample.txt"; //Will be replaced with endpoint URL
dojo.xhrGet({
handleAs: 'json',
url: url,
error: function (e) {
alert("Error: " + e.message);
},
load: showJsonData
});
}
function showJsonData(response, ioArgs) {
var profileStore = new dojo.data.ItemFileWriteStore({
data: {
items: response.items
}
});
var sampleGrid = dijit.byId("sampleGrid");
sampleGrid.store = profileStore;
sampleGrid.startup();
}
you need to be using dojox.grid.TreeGrid or 'fake' the JSON to present every even row with a blank profileName. Two samples follows, one for TreeGrid another on DataGrid - not tested in working environment though.
Given Hierachial JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin',
profilePreferences: [
{ id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
{ id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
]
}, {
id: '2',
profileName: 'Visitor',
profilePreferences: [
{ id: '2_1', displayText: 'Foo', address: 'Texas' }
{ id: '2_2', displayText: 'Bar', address: 'Indiana' }
]
}]
}
TreeGrid Structure:
{
cells: [
[
{ field: "profileName", name: "profileName", width: "100px" },
{ field: "profilePreferences",
children: [
{ field: "displayText" name: "displayText", width: "100px" },
{ field: "address" name: "address", width: "100px" }
]
]
]
}
reference: dojo docs
Given flattened 'fake-children' JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin', preferenceText: '', preferenceAddr: ''
}, {
id: '2',
profileName: '', preferenceText: 'John', preferenceAddr: 'NY'
}, {
id: '3',
profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
}, {
id: '4', // Not with '.' dot seperator like so
profileName: '', preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
} ]
DataGrid structure:
[[
{'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
{'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
{'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]
reference dojo docs