Related
I tried to display products to a screen and what i get is that error,here is my code:
{productsCtg.length > 0 ? (
<View style={styles.listContainer}>
{productsCtg.map((item) => {
console.log(item);
return(
<ProductList
navigation={props.navigation}
key={item.id}
item={item}
/>
);
})}
</View>
) : (
<View style={[styles.center, { height: height / 2}]}>
<Text style={{fontFamily: 'nunito_semi_bold'}}>No products found</Text>
</View>
)}
And i fetch data from an api using useFocusEffect and useCallBack and axios,when app starts products shows but when i try to save any file in the project without making any changes that error appears and when i save again products show up again, i need help and here is another codes:
const [products, setProducts] = useState([]);
const [productsFiltered, setProductsFiltered] = useState([]);
const [focus, setFocus] = useState();
const [categories, setCategories] = useState([]);
const [productsCtg, setProductsCtg] = useState([]);
const [active, setActive] = useState();
const [initialState, setInitialState] = useState([]);
const [loading, setLoading] = useState(true)
useFocusEffect((
useCallback(
() => {
setFocus(false);
setActive(-1);
// Products
axios
.get(`${baseURL}products`)
.then((res) => {
setProducts(res.data);
setProductsFiltered(res.data);
setProductsCtg(res.data);
setInitialState(res.data);
setLoading(false);
//console.log(res.data)
})
.catch((error) => {
console.log('Api call error')
})
//Categories
axios
.get(`${baseURL}categories`)
.then((res) => {
setCategories(res.data);
//console.log(res.data);
})
.catch((error) => {
console.log('Api call error')
})
return () => {
setProducts([]);
setProductsFiltered([]);
setFocus();
setCategories([]);
setActive();
setInitialState();
// setProductsCtg([]);
};
},
[],
)
))
when i console.log before return() the first five arrays are empty and the rest contains repeated data, each array contains six products(objects),and and when i console.log inside a map function all the arrays have repeated data like below(but all),the output of console.log is:
Array []
Array []
Array []
Array []
Array []
Array [
Object {
"brand": "Arusha",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 45,
"dateCreated": "2022-06-04T06:32:06.300Z",
"description": "Mtama mzuri sana kutoka arusha",
"id": "629afc66e400878b161e437b",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/21fe5b14-3eee-4218-b554-9a3d17bd801b.jpg-
1654333522641.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Mtama",
"numReviews": 0,
"price": 42000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dodoma",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 27,
"dateCreated": "2022-06-04T08:59:36.678Z",
"description": "Good quality maize in Dodoma,place your order now.",
"id": "629b1ef89e9b9401aba2ba54",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/fffe96ff-4558-42db-a6b4-7b5b289995be.jpg-
1654333175940.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 76000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Mbeya",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 16,
"dateCreated": "2022-06-05T10:04:19.040Z",
"description": "Mchele mzuri kutoka mbeya,weka oda yako sasa",
"id": "629c7fa3342fe22635019648",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/8c107f75-31e0-4a6c-9835-27a8f6ada063.jpg-
1654423458901.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Rice",
"numReviews": 0,
"price": 80000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Tanga",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:39:52.196Z",
"description": "Quality beans available,place your order anytime",
"id": "629c87f8499c526723a96979",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/291ee0f1-369e-45a1-8b43-38756c0d866b.jpg-
1654425591386.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Beans",
"numReviews": 0,
"price": 85000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Kilimanjaro",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:43:04.778Z",
"description": "Karibu upate ndizi kubwa na zenye ubora wa hali ya
juu,weka oda yako sasa",
"id": "629c88b8499c526723a9698c",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/4e10f2a7-9ee0-4735-bd8b-75b1af2d48e4.jpg-
1654425784444.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Ndizi",
"numReviews": 0,
"price": 31500,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dar es salaam",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 133,
"dateCreated": "2022-06-05T10:47:48.391Z",
"description": "Tunauza mahindi kwa jumla,weka oda yako mapema,karibu
sana",
"id": "629c89d4499c526723a969a5",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/6895e399-6254-4c46-a757-2d10a0b188b2.jpg-
1654426067682.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 73500,
"rating": 0,
"richDescription": "undefined",
},
]
Array [
Object {
"brand": "Arusha",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 45,
"dateCreated": "2022-06-04T06:32:06.300Z",
"description": "Mtama mzuri sana kutoka arusha",
"id": "629afc66e400878b161e437b",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/21fe5b14-3eee-4218-b554-9a3d17bd801b.jpg-
1654333522641.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Mtama",
"numReviews": 0,
"price": 42000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dodoma",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 27,
"dateCreated": "2022-06-04T08:59:36.678Z",
"description": "Good quality maize in Dodoma,place your order now.",
"id": "629b1ef89e9b9401aba2ba54",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/fffe96ff-4558-42db-a6b4-7b5b289995be.jpg-
1654333175940.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 76000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Mbeya",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 16,
"dateCreated": "2022-06-05T10:04:19.040Z",
"description": "Mchele mzuri kutoka mbeya,weka oda yako sasa",
"id": "629c7fa3342fe22635019648",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/8c107f75-31e0-4a6c-9835-27a8f6ada063.jpg-
1654423458901.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Rice",
"numReviews": 0,
"price": 80000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Tanga",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:39:52.196Z",
"description": "Quality beans available,place your order anytime",
"id": "629c87f8499c526723a96979",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/291ee0f1-369e-45a1-8b43-38756c0d866b.jpg-
1654425591386.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Beans",
"numReviews": 0,
"price": 85000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Kilimanjaro",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:43:04.778Z",
"description": "Karibu upate ndizi kubwa na zenye ubora wa hali ya
juu,weka oda yako sasa",
"id": "629c88b8499c526723a9698c",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/4e10f2a7-9ee0-4735-bd8b-75b1af2d48e4.jpg-
1654425784444.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Ndizi",
"numReviews": 0,
"price": 31500,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dar es salaam",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 133,
"dateCreated": "2022-06-05T10:47:48.391Z",
"description": "Tunauza mahindi kwa jumla,weka oda yako mapema,karibu
sana",
"id": "629c89d4499c526723a969a5",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/6895e399-6254-4c46-a757-2d10a0b188b2.jpg-
1654426067682.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 73500,
"rating": 0,
"richDescription": "undefined",
},
]
Array [
Object {
"brand": "Arusha",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 45,
"dateCreated": "2022-06-04T06:32:06.300Z",
"description": "Mtama mzuri sana kutoka arusha",
"id": "629afc66e400878b161e437b",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/21fe5b14-3eee-4218-b554-9a3d17bd801b.jpg-
1654333522641.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Mtama",
"numReviews": 0,
"price": 42000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dodoma",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 27,
"dateCreated": "2022-06-04T08:59:36.678Z",
"description": "Good quality maize in Dodoma,place your order now.",
"id": "629b1ef89e9b9401aba2ba54",
"image": "http://2fa0-197-250-230-
109.eu.ngrok.io/public/uploads/fffe96ff-4558-42db-a6b4-7b5b289995be.jpg-
1654333175940.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 76000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Mbeya",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 16,
"dateCreated": "2022-06-05T10:04:19.040Z",
"description": "Mchele mzuri kutoka mbeya,weka oda yako sasa",
"id": "629c7fa3342fe22635019648",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/8c107f75-31e0-4a6c-9835-27a8f6ada063.jpg-
1654423458901.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Rice",
"numReviews": 0,
"price": 80000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Tanga",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:39:52.196Z",
"description": "Quality beans available,place your order anytime",
"id": "629c87f8499c526723a96979",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/291ee0f1-369e-45a1-8b43-38756c0d866b.jpg-
1654425591386.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Beans",
"numReviews": 0,
"price": 85000,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Kilimanjaro",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 12,
"dateCreated": "2022-06-05T10:43:04.778Z",
"description": "Karibu upate ndizi kubwa na zenye ubora wa hali ya
juu,weka oda yako sasa",
"id": "629c88b8499c526723a9698c",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/4e10f2a7-9ee0-4735-bd8b-75b1af2d48e4.jpg-
1654425784444.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Ndizi",
"numReviews": 0,
"price": 31500,
"rating": 0,
"richDescription": "undefined",
},
Object {
"brand": "Dar es salaam",
"category": Object {
"__v": 0,
"_id": "62925a7db9e8b1361367c733",
"color": null,
"icon": null,
"name": "food crops",
},
"countInStock": 133,
"dateCreated": "2022-06-05T10:47:48.391Z",
"description": "Tunauza mahindi kwa jumla,weka oda yako mapema,karibu
sana",
"id": "629c89d4499c526723a969a5",
"image": "http://1063-197-250-224-
205.eu.ngrok.io/public/uploads/6895e399-6254-4c46-a757-2d10a0b188b2.jpg-
1654426067682.jpeg",
"images": Array [],
"isFeatured": false,
"name": "Maize",
"numReviews": 0,
"price": 73500,
"rating": 0,
"richDescription": "undefined",
},
]
check type of productsCtg if it is Object;
This error means productsCtg is not a array
Try:
console.log(productsCtg)
in my code below i'm showing data from API for all flats in one page, but i couldn't figure out how to show the floor_number in each flat, below is my JSON body :
{
"response": [
{
"floors": [
{
"flats": [
{
"status": "",
"price": "80000",
"currency": "USD",
"end_date": "Not Set",
"buyer": " ",
"buyer_phone_number": "07701879915",
"receipt_number_field": "058329",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe2e",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "",
"payment": {
"installment_payment": {
"installments": [
{
"amount": "12000.00",
"date": "2022-02-12",
"is_paid": true
},
{
"amount": "12000.00",
"date": "2023-03-03",
"is_paid": false
},
{
"amount": "16000.00",
"date": "2023-08-19",
"is_paid": false
},
{
"amount": "0.00",
"date": "2022-02-20",
"is_paid": false
},
{
"amount": "342",
"date": "2022-03-12",
"is_paid": false
}
],
"remaining": "67316"
},
"paid_amount": "12684"
},
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "176.25",
"directions": " ",
"createdAt": "2022-01-18T13:12:53.212Z",
"updatedAt": "2022-02-12T12:19:43.862Z",
"__v": 0
},
{
"status": "",
"price": "Not set",
"currency": "USD",
"end_date": "2022-02-16",
"buyer": "Not Set",
"buyer_phone_number": "Not Set",
"receipt_number_field": "Not Set",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe2f",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "",
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "176.25",
"directions": " ",
"createdAt": "2022-01-18T13:12:53.446Z",
"updatedAt": "2022-02-13T07:42:26.750Z",
"__v": 0
},
{
"status": "",
"price": "27441",
"currency": "USD",
"end_date": "2022-02-17",
"buyer": "new",
"buyer_phone_number": "7544112",
"receipt_number_field": "0432516",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe30",
"flat_number": 3,
"description": "This is a newly created flat.",
"city": "",
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "132",
"directions": "",
"createdAt": "2022-01-18T13:12:53.447Z",
"updatedAt": "2022-02-14T15:18:33.228Z",
"__v": 0
},
{
"status": "",
"price": "Not set",
"currency": "USD",
"end_date": "Not Set",
"buyer": "Not Set",
"buyer_phone_number": "Not Set",
"receipt_number_field": "Not Set",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe31",
"flat_number": 4,
"description": "This is a newly created flat.",
"city": "",
"payment": null,
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "184",
"directions": " ",
"createdAt": "2022-01-18T13:12:53.447Z",
"updatedAt": "2022-01-18T13:12:53.447Z",
"__v": 0
},
{
"status": "",
"price": "Not set",
"currency": "USD",
"end_date": "Not Set",
"buyer": "Not Set",
"buyer_phone_number": "Not Set",
"receipt_number_field": "Not Set",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe32",
"flat_number": 5,
"description": "This is a newly created flat.",
"city": "",
"payment": null,
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "184",
"directions": " ",
"createdAt": "2022-01-18T13:12:53.447Z",
"updatedAt": "2022-01-18T13:12:53.447Z",
"__v": 0
},
{
"status": "ava",
"price": "Not set",
"currency": "USD",
"end_date": "Not Set",
"buyer": "Not Set",
"buyer_phone_number": "Not Set",
"receipt_number_field": "Not Set",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe33",
"flat_number": 6,
"description": "This is a newly created flat.",
"city": "city",
"payment": null,
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "132",
"directions": "south",
"createdAt": "2022-01-18T13:12:53.447Z",
"updatedAt": "2022-02-12T17:31:21.171Z",
"__v": 0
}
],
"_id": "61e6bccba5da17be7a90fe2d",
"floor_number": 1,
"description": "This is a newly created floor.",
"createdAt": "2022-01-18T13:12:53.447Z",
"updatedAt": "2022-01-18T13:12:53.447Z",
"__v": 0
},
P.s: i have 6 flats in each floor
<b-card-body class="px-lg-5 py-lg-5" v-for="flat in flats" :key="flat._id"> // flats API where i have all flats
<div class="text-center text-muted mb-4 border-dash">
<p class="city">{{flat.city}}</p>
<span v-for="(building,index) in buildings" :key="index"> //JSOn body provided above
<p class="iconB" v-if="building._id.includes(flat.building)">{{building.building_number}} building number </p>
<h3>{{building.floor_number}} floor</h3> //not working
</span>
<h2>{{flat.buyer}} <i class="fas fa-user"></i> </h2>
<h3 class="mb-5">flat no ({{flat.flat_number}})</h3>
in my code above every thing is showing except the floor :\
any help?
I just tooked your code and passed it and all i did was this from your response array because your floor_number is not inside the flat but at the same level of it :
<div v-for="floor in floors">
{{floor.floor_number}}
</div>
I have 2 api:
Having bank details
Other having user account detail.
User can have more than 1 account with 1 bank. I have to fetch bank name and logo from bank api, and show all the user accounts with name, amount banks name and logo.
Two api data looks like below :
Bank API:
[
{
"id": 2,
"name": "KlikBCA",
"bank_code": "KlikBCA",
"country_code": "ID",
"country_name": "India",
"logo": "url",
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
},
{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
]
User API:
[
{
"id": "sdf",
"bankId": "7",
"data": [
{
"accountId": “1234”,
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
},
{
"accountId": “2345”,
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
}
]
},
{
"id": "f230",
"bankId": "3",
"data": [
{
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
}
}
]
}
]
i need data to be like this..so that I can use it in my next component, which will take each account with all the bank details.
[
{
"id": "sdf",
"bankId": "7",
"data":
{
"accountId": “1234”,
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
},
"bank":{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
},
{"id": "sdf",
"bankId": "7",
"data": {
"accountId": “2345”,
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
},
"bank":{
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
},
{
"id": "f230",
"bankId": "3",
"data": {
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
},
"bank":{
"name": "Mandiri",
"bank_code": "Mandiri",
"country_code": "ID",
"country_name": "India",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}
}
}
]
You can use loop to merge two api json into one,
this is my code.
hope I can help u.
const banks = [{
"id": 2,
"name": "KlikBCA",
"bank_code": "KlikBCA",
"country_code": "ID",
"country_name": "India",
"logo": "url",
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}, {
"id": 3,
"name": "Mandiri",
"bank_code": "Mandiri",
"country_code": "ID",
"country_name": "India",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}, {
"id": 7,
"name": "BNI Internet Banking",
"bank_code": "BNI Internet Banking",
"country_code": "ID",
"country_name": "Indis",
"primary_color": "url",
"logo": null,
"createdAt": null,
"updatedAt": "2021-07-26T14:58:03.000+00:00",
"channels": null
}]
const users = [{
"id": "sdf",
"bankId": "7",
"data": [{
"accountId": "1234",
"accountHolder": "John Doe",
"accountNumber": "587-2673-989",
"balances": {
"available": 500000,
}
}, {
"accountId": "2345",
"accountHolder": "John Doe",
"accountNumber": "987-0675-789",
"balances": {
"available": 7500000
}
}]
}, {
"id": "f230",
"bankId": "3",
"data": [{
"accountId": "9876",
"accountHolder": "Charls",
"accountNumber": "765-6543-345",
"balances": {
"available": 200000
}
}]
}]
let resultApi = users.map(u => {
const t = banks.find(b => b.id == u.bankId) || {}
return {
...u,
...t
}
})
console.log(resultApi);
first of all, a feedback, you should write json inside code blocks for readability.
your question seems incomplete as what you want to achieve? you want to show these data in UI (html) or create a new json? and how far have you tried?
try to share a codesandbox/codepen link.
remember, you need to loop through both the arrays and first store bank data inside user's account by matching user.bankId === bank.id and then with the new data set you can show it wherever you want. give it a try first and then let us know in comments if you're unable to achieve.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
[{
"id": "5f283e239b81681618b19b5d",
"listItemId": 3,
"formData": {
"name": "הבית שלנו בחיפה ",
"address": "הגולן 150",
"geo": "ישראל",
"currency": "NIS",
"productPrice": "150000",
"expectedRevenue": "6955"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:41:07.691Z",
"updatedAt": "2020-08-03T16:42:49.407Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.022,
"worth": {
"currency": "ILS",
"value": 150000
},
"yieldPer": 0
}
}, {
"id": "5f283e499b81681618b19b5e",
"listItemId": 4,
"formData": {
"name": "הבית שלנו בארהבב",
"address": "רבי מלוביץת 10",
"geo": "ארהב",
"currency": "USD",
"productPrice": "1500000",
"expectedRevenue": "699"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:41:45.317Z",
"updatedAt": "2020-08-03T16:41:45.317Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.761,
"worth": {
"currency": "ILS",
"value": 5261700
},
"yieldPer": 0
}
}, {
"id": "5f283e699b81681618b19b5f",
"listItemId": 5,
"formData": {
"name": "דירהב אירופה",
"address": "אירוהפם 2",
"geo": "אירופה",
"currency": "NIS",
"productPrice": "1500000",
"expectedRevenue": "6000"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:42:17.087Z",
"updatedAt": "2020-08-03T16:42:17.087Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.761,
"worth": {
"currency": "ILS",
"value": 5261700
},
"yieldPer": 0
}
}]
hey, how to Map this array to get a calculated sum of all the summry.worth.value property in side each object...
can someone pls help me figure how to do it?
Use Array.prototype.reduce().
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.
var total = array.reduce((accumulator, current_value)=> {
return accumulator + current_value.summary.worth.value;
}, 0);
Example:
var array = [{
"id": "5f283e239b81681618b19b5d",
"listItemId": 3,
"formData": {
"name": "הבית שלנו בחיפה ",
"address": "הגולן 150",
"geo": "ישראל",
"currency": "NIS",
"productPrice": "150000",
"expectedRevenue": "6955"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:41:07.691Z",
"updatedAt": "2020-08-03T16:42:49.407Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.022,
"worth": {
"currency": "ILS",
"value": 150000
},
"yieldPer": 0
}
},
{
"id": "5f283e499b81681618b19b5e",
"listItemId": 4,
"formData": {
"name": "הבית שלנו בארהבב",
"address": "רבי מלוביץת 10",
"geo": "ארהב",
"currency": "USD",
"productPrice": "1500000",
"expectedRevenue": "699"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:41:45.317Z",
"updatedAt": "2020-08-03T16:41:45.317Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.761,
"worth": {
"currency": "ILS",
"value": 5261700
},
"yieldPer": 0
}
},
{
"id": "5f283e699b81681618b19b5f",
"listItemId": 5,
"formData": {
"name": "דירהב אירופה",
"address": "אירוהפם 2",
"geo": "אירופה",
"currency": "NIS",
"productPrice": "1500000",
"expectedRevenue": "6000"
},
"productId": 1,
"formId": 1,
"createdAt": "2020-08-03T16:42:17.087Z",
"updatedAt": "2020-08-03T16:42:17.087Z",
"summary": {
"appreciationPer": 0,
"sumYieldPer": 0,
"portfolioPer": 0.761,
"worth": {
"currency": "ILS",
"value": 5261700
},
"yieldPer": 0
}
}
];
var total = array.reduce((accumulator, current)=> accumulator+current.summary.worth.value, 0);
console.log(total);
I'm filtering a list using a const queryModifier = {price: "lessThan", weight: "greaterThan"}
const queryKeys = keys: {
price: '1000',
weight: '1000'
}
const list = [
{
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-11-05 10:48:18",
"createdBy": "test#test.com",
"deliveryDate": "2019-11-08 10:46:37",
"driver": "",
"dropOff": "Kögel Trailer GmbH & Co. KG, Am Kögel-Werk, Burtenbach, Germany",
"height": 0,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "7e249529-d089-47bb-b0ad-470f850dd8cf",
"notes": "",
"orderId": "",
"pickUp": "Altenberge, Germany",
"price": 500,
"quantity": 1,
"trailer": "einzeln",
"vehicle": "Sattel",
"vehicleClass": "engl. Anschlüsse",
"vehicleId": "505123",
"vehicleReadyDate": "2019-11-05 10:47:57",
"weight": 0
},
{
"additionalPrices": 0,
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-10-14 16:32:12",
"createdBy": "test#test.com",
"deliveryDate": "2019-10-19 16:26:35",
"driver": "",
"dropOff": "Marville-Moutiers-Brûlé, France",
"height": 600,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "9b7f57fd-f95e-4038-b120-a0301fdf3f31",
"notes": "",
"orderId": "",
"pickUp": "Altenberge, Germany",
"price": 0,
"quantity": 1,
"trailer": "2er Pack",
"vehicle": "Anhänger",
"vehicleClass": "50",
"vehicleId": "123",
"vehicleReadyDate": "2019-10-16 16:31:26",
"weight": 12000
},
{
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-10-14 16:25:54",
"createdBy": "test#test.com",
"deliveryDate": "2019-10-19 16:24:13",
"driver": "",
"dropOff": "Vendenheim, France",
"height": 0,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "7e4f233f-695b-40eb-a0ca-fd78f3fa43cd",
"notes": "",
"orderId": "",
"pickUp": "Altenberge, Germany",
"price": 793,
"quantity": 1,
"trailer": "einzeln",
"vehicle": "Sattel",
"vehicleClass": "Standard",
"vehicleId": "3340731",
"vehicleReadyDate": "2019-10-15 16:24:58",
"weight": 0
},
{
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-09-26 18:32:18",
"createdBy": "test#test.com",
"deliveryDate": "2019-09-20 18:31:45",
"driver": "Michal Kucharski",
"dropOff": "Logroño, Spain",
"height": 0,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "388113f5-3927-4fe3-80d5-f2fcf1c7cedd",
"notes": "",
"orderId": "",
"pickUp": "16671 Butano Place, Fontana, CA, USA",
"price": 0,
"quantity": 1,
"trailer": "2er Pack",
"vehicle": "Sattel",
"vehicleClass": "Standard",
"vehicleId": "efgefg",
"vehicleReadyDate": "2019-09-27 18:32:08",
"weight": 0
},
{
"additionalPrices": 0,
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-09-06 22:57:55",
"createdBy": "test#test.com",
"deliveryDate": "2019-09-07 22:57:03",
"driver": "Eugeniusz Galinski",
"dropOff": "12345 Lamplight Village Avenue, Austin, TX, USA",
"height": 32,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "ac3cf14e-b43b-45e4-9168-ad4997b6415d",
"notes": "Nzube I am adding notes here",
"pickUp": "16671 Butano Place, Fontana, CA, USA",
"price": 100,
"quantity": 3,
"trailer": "einzeln",
"vehicle": "Sattel",
"vehicleClass": "Mega",
"vehicleId": "123",
"vehicleReadyDate": "2019-09-26 22:57:36",
"weight": 12
},
{
"additionalPrices": 0,
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-09-06 22:46:25",
"createdBy": "test#test.com",
"deliveryDate": "2019-09-06 22:45:45",
"driver": "Michal Kucharski",
"dropOff": "QEW, Niagara Falls, ON, Canada",
"height": 67,
"isPreparingTrailer": false,
"isSmsSent": false,
"isTrailerReady": false,
"key": "d0ec3b82-2279-4d11-8e35-a9307713ae5a",
"notes": "This is coming along",
"pickUp": "Avenida Callao 1234, Buenos Aires, Argentina",
"price": 100,
"quantity": 1,
"trailer": "2er Pack",
"vehicle": "Sattel",
"vehicleClass": "Mega",
"vehicleId": "123",
"vehicleReadyDate": "2019-09-25 22:45:57",
"weight": 12
},
{
"additionalPrices": 0,
"clientOrderNumber": "N / A",
"companyName": "Test Company",
"createdAt": "2019-09-04 18:06:18",
"createdBy": "test#test.com",
"deliveryDate": "2019-09-05 18:05:51",
"driver": "Chibuzo ilogu",
"dropOff": "Asda Park Royal Superstore, Western Road, London, UK",
"height": 453,
"isPreparingTrailer": true,
"isSmsSent": true,
"isTrailerReady": true,
"key": "96ee9410-4d70-4bbc-8016-5d7c9e5ecec1",
"notes": "ewriupoi ",
"pickUp": "Avenida Juan Bautista Alberdi 1233, Buenos Aires, Argentina",
"price": 234,
"quantity": 1,
"trailer": "3er Pack",
"vehicle": "Anhänger",
"vehicleClass": "50",
"vehicleId": "543",
"vehicleReadyDate": "2019-09-21 18:06:03",
"weight": 453
},
{
"additionalPrices": 0,
"companyName": "Test Company",
"completeDate": "2019-09-04 18:02:27",
"createdAt": "2019-09-04 18:01:30",
"createdBy": "test#test.com",
"deliveryDate": "2019-09-04 18:01:09",
"driver": "Chibuzo ilogu",
"dropOff": "La Cabaña 123, Las Condes, Chile",
"height": 123,
"isPreparingTrailer": false,
"isSmsSent": true,
"isTrailerReady": true,
"key": "bcd50f43-0644-49a7-8bdc-009a4572341b",
"notes": "qewqe",
"pickUp": "La Cabaña 123, Las Condes, Chile",
"price": 123,
"trailer": "einzeln",
"vehicle": "Sattel",
"vehicleClass": "Standard",
"vehicleId": "123",
"vehicleReadyDate": "2019-10-02 18:01:19",
"weight": 123
}
];
export const handleFilterModifier = (value, compareValue, modifier) => {
if (modifier === 'lessThan') {
return value > compareValue;
}
if (modifier === 'equals') {
return value === compareValue;
}
if (modifier === 'greaterThan') {
return value < compareValue;
}
return null;
};
const resultList = list.filter(
item => Object.entries(queryModifiers).every(([filterKey, filterVal]) => {
const compareValue = item[filterKey];
const value = Object.values(queryKeys);
const result = handleFilterModifier(
parseFloat(value),
compareValue,
filterVal
);
return result;
})
);
This operation fails when either of the queryModifiers has "equals" in its value pair. Anything else returns the actual true result. I don't understand why it fails on "equals".
I feel like there should be a forEach somewhere but I don't know where to put it and maybe there's something wrong with the code. I need help figuring it out.
I think you should replace this
const queryKeys = keys: {
price: '1000',
weight: '1000'
}
with
const queryKeys = {
price: '1000',
weight: '1000'
}
and replace this
const value = Object.values(queryKeys);
with
const value = queryKeys[filterKey];