We Keep Coding

Display problem in a table that contains an object with an array in react

I have a problem with an object containing an array in its view on a table. I want where I have an array in the column. It will split it.
For example
itemsToSend = "Orders": [
{
"date": {
"$date": "2022-06-09"
},
"OrderNumber": "333333",
"City": "xxxxxx",
"Address": "yyyyyyy",
"Phone": "6666666",
"Name": "xxxxxx",
"Trackingnumber": "1",
"ZipCode": 00000,
"Province": "xxxx",
"Quantity": [
2,
1
],
"Product_Name": [
"Nine pants 1",
"Nine pants 2"
],
"SKU": [
"CJNSXZHL",
"CJNS"
],
"_id": {
"$oid": "62a1fc431d9acc4a65df50e1"
}
},
{
"date": {
"$date": "2022-06-09"
},
"OrderNumber": "7488404",
"City": "Colorad",
"Address": " xxx",
"Phone": "3232323",
"Name": "xxxxxx",
"Trackingnumber": "1",
"ZipCode": ooooo,
"Province": "yyyyy",
"Quantity": [
1
],
"Product_Name": [
"Feet harem pants "
],
"SKU": [
"CJNSXZHL"
],
"_id": {
"$oid": "62a1fc431d9acc4a65df50e3"
}
}
]
Now I do to the object map And sends it by props
<>
{itemsToSends.map((itemsToSend,i)=>(
<Posreturn key ={i} post={itemsToSend}
/>
<tr>
<td>{post.OrderNumber}</td>
<td>{post.Name }</td>
<td>{post.SKU}</td>
<td>{post.Phone}</td>
<td>{post.Address}</td>
<td>{post.Country}</td>
<td>{post.Province}</td>
<td>{post.ZipCode}</td>
<td>{post.Quantity}</td>
</tr>
You can see in the first array there is in Quantity, there is an array
And when I display it in the table, I get it in one unsplit cell. Is there any way to split the cell by array
I added a screenshot of what I get
screenshot
You can see that the first line is incorrect
Both in SKU and in quantity
Thanks for the helpers

how to remove this object from array inside of object in array?

I am not sure how to form this question, but I will do my best.
I don't know how to remove object by _id from 'list:' part.
So, I have one array, and inside of that array I have list of objects,inside of these objects I have again array with objects, so I want to remove one object from that last array, how I can do that?
Cannot fix it for 2 days, I'm stucked!
Thanks!
[
{
"_id": "599a1344bf50847b0972a465",
"title": "British Virgin Islands BC",
"list": [],
"price": "1350"
},
{
"_id": "599a1322bf50847b0972a38e",
"title": "USA (Nevada) LLC",
"list": [
{
"_id": "599a1322bf50847b0972a384",
"title": "Nominee Member",
"service": "nominee-service",
"price": "300"
},
{
"_id": "599a1322bf50847b0972a385",
"title": "Nominee Manager & General Power of Attorney (Apostilled)",
"service": "nominee-service",
"price": "650"
},
{
"_id": "599a1322bf50847b0972a386",
"title": "Special Power of Attorney",
"service": "nominee-service",
"price": "290"
}
],
"price": "789"
},
{
"_id": "599a12fdbf50847b0972a2ad",
"title": "Cyprus LTD",
"list": [
{
"_id": "599a12fdbf50847b0972a2a5",
"title": "Nominee Shareholder",
"service": "nominee-service",
"price": "370"
},
{
"_id": "599a12fdbf50847b0972a2a6",
"title": "Nominee Director & General Power or Attorney (Apostilled)",
"service": "nominee-service",
"price": "720"
},
{
"_id": "599a12fdbf50847b0972a2ab",
"title": "Extra Rubber Stamp",
"service": "other-service",
"price": "40"
}
],
"price": "1290"
}
]

Using Vanilla JS:
function findAndRemove(data, id) {
data.forEach(function(obj) { // Loop through each object in outer array
obj.list = obj.list.filter(function(o) { // Filter out the object with unwanted id, in inner array
return o._id != id;
});
});
}
var data = [{
"_id": "599a1344bf50847b0972a465",
"title": "British Virgin Islands BC",
"list": [],
"price": "1350"
},
{
"_id": "599a1322bf50847b0972a38e",
"title": "USA (Nevada) LLC",
"list": [{
"_id": "599a1322bf50847b0972a384",
"title": "Nominee Member",
"service": "nominee-service",
"price": "300"
},
{
"_id": "599a1322bf50847b0972a385",
"title": "Nominee Manager & General Power of Attorney (Apostilled)",
"service": "nominee-service",
"price": "650"
},
{
"_id": "599a1322bf50847b0972a386",
"title": "Special Power of Attorney",
"service": "nominee-service",
"price": "290"
}
],
"price": "789"
},
{
"_id": "599a12fdbf50847b0972a2ad",
"title": "Cyprus LTD",
"list": [{
"_id": "599a12fdbf50847b0972a2a5",
"title": "Nominee Shareholder",
"service": "nominee-service",
"price": "370"
},
{
"_id": "599a12fdbf50847b0972a2a6",
"title": "Nominee Director & General Power or Attorney (Apostilled)",
"service": "nominee-service",
"price": "720"
},
{
"_id": "599a12fdbf50847b0972a2ab",
"title": "Extra Rubber Stamp",
"service": "other-service",
"price": "40"
}
],
"price": "1290"
}
];
// Empty almost all of list, except middle one
findAndRemove(data, "599a1322bf50847b0972a384");
findAndRemove(data, "599a1322bf50847b0972a386");
findAndRemove(data, "599a12fdbf50847b0972a2a5");
findAndRemove(data, "599a12fdbf50847b0972a2a6");
findAndRemove(data, "599a12fdbf50847b0972a2ab");
console.log(data);
Cleared everything except middle list, just for better visualization.

#Abhijit Kar your one is working perfectly, thanks mate!
How I can later splice this list?
When I was working with objects from first array, I did it like this :
var inventory = jsonArrayList;
for (var i = 0; i < inventory.length; i++) {
if (inventory[i]._id == deleteProductById) {
vm.items.splice(i, 1);
break;
}
}
It would be very helpful, thanks alot!

You can use Array.map and Array.filter to accomplish this. Detailed explanation in comments:
PS: This snippet uses ES6 arrow functions and spread operator
function removeById(arr, id) {
// Array.map iterates over each item in the array,
// and executes the given function on the item.
// It returns an array of all the items returned by the function.
return arr.map(obj => {
// Return the same object, if the list is empty / null / undefined
if (!obj.list || !obj.list.length) return obj;
// Get a new list, skipping the item with the spedified id
const newList = obj.list.filter(val => val._id !== id);
// map function returns the new object with the filtered list
return { ...obj, list: newList };
});
}
const oldArray = <YOUR_ORIGINAL_ARRAY>;
const newArray = removeById(arr, "599a12fdbf50847b0972a2a5");

Checking a value in a nested JSON using Postman

I have a nested JSON returned from an API that I am hitting using a GET request, in POSTMAN chrome app. My JSON looks like this
"result": [
{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [
{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
},
I am trying to test whether my response body has "name":"India" and the "game" with "some_game_id1" contains the "name":"cricket".
I went through this link where the answer is to have an array for "name"created and then check within the array whether the array contains the value. I tried this but my code fails.
Also, I tried searching the element by the index within the JSON body using this -
var searchJSON = JSON.parse(responseBody);
tests["name contains India"] = searchJSON.result.name[0]==="India";
But this also fails. I tried using the .value appended with the second line of above code, but it also fails. How can I check this thing?

You need to put [0] after result (which is an array) rather than name (which is a string).
Also, use a regular expression to check whether the name contains 'India', because using === only checks if the name is exactly India.
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
Demo Snippet:
var responseBody = `{
"result": [{
"_id": "some_id",
"name": "India",
"code": "IN",
"link": "http://www.india.info/",
"closingTime": "2017-02-25T01:12:17.860Z",
"openingTime": "2017-02-25T06:12:17.205Z",
"image": "image_link",
"status": "online",
"serverStatus": "online",
"games": [{
"_id": "some_game_id1",
"name": "Cricket"
},
{
"_id": "some_another_id1",
"name": "Baseball"
},
{
"_id": "some_another_id_2",
"name": "Basketball"
}
]
},
{
"_id": "some_id",
"name": "Australia",
"code": "AUS",
"link": "https://www.lonelyplanet.com/aus/adelaide",
"closingTime": "2017-02-28T05:13:38.022Z",
"openingTime": "2017-02-28T05:13:38.682Z",
"image": "some_image_url",
"status": "offline",
"serverStatus": "online",
"games": [{
"_id": "some_game_id_2",
"name": "Cricket"
},
{
"_id": "some_another_id_3",
"name": "Kho-Kho"
},
{
"_id": "some_another_id_4",
"name": "Badminton"
},
{
"_id": "some_another_id_5",
"name": "Tennis"
}
]
}
]
}`
var tests = {}
var searchJSON = JSON.parse(responseBody)
tests["name contains India"] = /India/.test(searchJSON.result[0].name)
console.log(tests) //=> { "name contains India": true }

How can I Implement recursive join using loopback self relations?

How to create parent child hierarchy using self-join in strongloop. I have created model name as menu.
menu.json
{
"name": "Menu",
"base": "PersistedModel",
"strict": false,
"idInjection": false,
"options": {
"validateUpsert": true
},
"properties": {
"MenuID": {
"type": "Number",
"id": true,
"required": true
},
"Name": {
"type": "string"
},
"ParentMenuID": {
"type": "Number"
}
},
"validations": [],
"relations": {
"menus": {
"type": "hasMany",
"model": "Menu",
"foreignKey": "ParentMenuID",
}
},
"acls": [],
"methods": {}
}
Table data like:
menuId Name ParentID
1 parent 0
2 child 1
3 grandchild 2
I tried REST API call using filter but I am getting one level of data like
http://localhost:3000/api/Menus/?filter[include]=menus
[
{
"MenuID": 1,
"Name": "parent",
"ParentMenuID": 0,
"menus": [
{
"MenuID": 2,
"Name": "child",
"ParentMenuID": 1
}
]
},
{
"MenuID": 2,
"Name": "child",
"ParentMenuID": 1,
"menus": [
{
"MenuID": 3,
"Name": "grandchild",
"ParentMenuID": 2
}
]
},
{
"MenuID": 3,
"Name": "grandchild",
"ParentMenuID": 2,
"menus": []
}
]
BUT I needed output like:
[
{
"MenuID": 1,
"Name": "parent",
"ParentMenuID": 0,
"menus": [
{
"MenuID": 2,
"Name": "child",
"ParentMenuID": 1,
"menus": [
{
"MenuID": 3,
"Name": "grandchild",
"ParentMenuID": 2
}
]
}
]
}
]
Please suggest any idea or example.

After you create your model with slc loopback:model, just run slc loopback:relation and create the selfjoin as a relation.
As you now have done in your updated question. To include another you use an include filter, http://localhost:3000/api/Menus/?filter[include]=menus and to include two levels you can do like this: http://localhost:3000/api/Menus/?filter[include][menus]=menus

Suppose you have a model review, images, and the relation that you want between them is review should have multiple images. Then you have to define this relation in the json files for both the models
Review.json
"relations": {
"images": {
"type": "hasMany",
"model": "Image",
"foreignKey": ""
}
}
Image.json
"relations": {
"hotelReview": {
"type": "belongsTo",
"model": "HotelReview",
"foreignKey": ""
}
}
You can also accomplish the same using slc loopback:relation after you create both the models.
Now in order to extract the data using this relation or join, you can use the filter api's provided by loopback, and in particular use the include provide by loopback.
Sample links for loopback include and filter api
https://docs.strongloop.com/display/public/LB/Include+filter
https://docs.strongloop.com/display/public/LB/Querying+data
sample filter api, using include :-
localhost:3000/api/Review?filter[where][email]=xyz#abc.com&filter[include]=images

Displaying json data using AngularJS

When my program gets a JSON response like this:
[
{
"index": 1,
"name": "Samantha",
"rarity": "Scarborough",
"email": "maureen#sykes.mk"
},
{
"index": 2,
"name": "Amanda",
"rarity": "Vick",
"email": "jessica#livingston.mv"
}
]
AngularJS is showing ng-repeat dupes error. I also tried using: track by $index.
But if my JSON response is like this:
{"items":
[
{
"index": 1,
"name": "Samantha",
"rarity": "Scarborough",
"email": "maureen#sykes.mk"
},
{
"index": 2,
"name": "Amanda",
"rarity": "Vick",
"email": "jessica#livingston.mv"
}
]
}
I can easily display the JSON using ng-repeat = "name in variable.items"
Why does AngularJS behave like this?