Related
Can someone help me regarding my code I already search but had no luck on logic.
i am trying to get a nested drop but i get the same result on 3-child hierarchy.
this is the data from my API.
{
"data": [
{
"id": "1",
"name": "Metro Manila",
"parent": null
},
{
"id": "101",
"name": "Manila",
"parent": "1"
},
{
"id": "10101",
"name": "Malate",
"parent": "101"
},
{
"id": "10102",
"name": "Ermita",
"parent": "101"
},
{
"id": "10103",
"name": "Binondo",
"parent": "101"
},
{
"id": "102",
"name": "Makati",
"parent": "1"
},
{
"id": "10201",
"name": "Poblacion",
"parent": "102"
},
{
"id": "10202",
"name": "Bel-Air",
"parent": "102"
},
{
"id": "10203",
"name": "San Lorenzo",
"parent": "102"
},
{
"id": "10204",
"name": "Urdaneta",
"parent": "102"
},
{
"id": "103",
"name": "Marikina",
"parent": "1"
},
{
"id": "10301",
"name": "Sto Nino",
"parent": "103"
},
{
"id": "10302",
"name": "Malanday",
"parent": "103"
},
{
"id": "10303",
"name": "Concepcion I",
"parent": "103"
},
{
"id": "2",
"name": "CALABARZON",
"parent": null
},
{
"id": "201",
"name": "Laguna",
"parent": "2"
},
{
"id": "20101",
"name": "Calamba",
"parent": "201"
},
{
"id": "20102",
"name": "Sta. Rosa",
"parent": "201"
},
{
"id": "202",
"name": "Cavite",
"parent": "2"
},
{
"id": "20201",
"name": "Kawit",
"parent": "202"
},
{
"id": "203",
"name": "Batangas",
"parent": "2"
},
{
"id": "20301",
"name": "Lipa",
"parent": "203"
},
{
"id": "20302",
"name": "Tanauan",
"parent": "203"
},
{
"id": "3",
"name": "Central Luzon",
"parent": null
},
{
"id": "301",
"name": "Bulacan",
"parent": "3"
},
{
"id": "302",
"name": "Nueva Ecija",
"parent": "3"
},
{
"id": "303",
"name": "Tarlac",
"parent": "3"
},
{
"id": "304",
"name": "Pampanga",
"parent": "3"
}
]
}
this.data = result.body.data;
let parents = this.data.filter(x => x.parent == null);
let child_id = [];
let child_id2 = [];
for (let i = 0; i < parents.length; i++) {
let _myTreelist = new ParentData();
_myTreelist.data.parent = parents[i].name;
child_id = this.data.filter(x => x.parent == parents[i].id); //get child-1 with id
_myTreelist.data.child.child1 = child_id.map((item) => {
return item.name
})
for (let e = 0; e < child_id.length; e++) { //10 ids
child_id2 = this.data.filter(a => a.parent === child_id[e].id); //get child-2 with id
_myTreelist.data.child.child.child2 = child_id2.map((item) => {
return item.name
})
}
this.parentList.push(_myTreelist);
}
this is the image output I get.
it works the first and 2nd nested but in the 3rd it display same
make a recursive function
getChild(element:any,data:any[])
{
element.children=data.filter((x:any)=>x.parent==element.id)
if (element.children.length)
element.children.forEach((x:any)=>this.getChild(x,data))
else
element.children=null;
return element
}
then
treeData=this.data.filter(x=>!x.parent)
.map(x=>this.getChild(x,this.data))
stackblitz
If you use an API and an observable use pipe map
treeData$=this.service.getData().pipe(
map((data:any[])=>{
return data.filter(x=>!x.parent).map(x=>this.getChild(x,data))
})
)
This is my first question on stack overflow. I am attempting to map an array that is housed within an object. My question is more regarding the targeting than the actual mapping process itself (I think). The goal of my code is to map an array to this target:
var target = {
"id": 1, //as an int
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters": "all of the batter types as a string",
"ingredients": [],//a copy of all the toppings
"countOfFillings": 0
}
the object in question is:
var bakery = {
"items":
{
"item":
[
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0002",
"type": "donut",
"name": "Raised",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0003",
"type": "donut",
"name": "Old Fashioned",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0004",
"type": "bar",
"name": "Bar",
"ppu": 0.75,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
]
},
"topping":
[
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
],
"fillings":
{
"filling":
[
{ "id": "7001", "name": "None", "addcost": 0 },
{ "id": "7002", "name": "Custard", "addcost": 0.25 },
{ "id": "7003", "name": "Whipped Cream", "addcost": 0.25 }
]
}
},
{
"id": "0005",
"type": "twist",
"name": "Twist",
"ppu": 0.65,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
]
},
"topping":
[
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
]
},
{
"id": "0006",
"type": "filled",
"name": "Filled",
"ppu": 0.75,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
]
},
"topping":
[
{ "id": "5002", "type": "Glazed" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
],
"fillings":
{
"filling":
[
{ "id": "7002", "name": "Custard", "addcost": 0 },
{ "id": "7003", "name": "Whipped Cream", "addcost": 0 },
{ "id": "7004", "name": "Strawberry Jelly", "addcost": 0 },
{ "id": "7005", "name": "Rasberry Jelly", "addcost": 0 }
]
}
}
]
}
}
And this is my attempt at mapping. I'm able to get the array generated but only from the first item in the array as indicated with the [0]. Any feedback or advice would be greatly appreciated!
var exampleTest = bakery.items.item.map(mapCake);
function mapCake (aCake)
{
let newType = `${bakery.items.item[1].type}`
let result = {id: `${bakery.items.item[0].id}`,
type: newType,
name: `${bakery.items.item[0].name}`,
ppu: `${bakery.items.item[0].ppu}`,
batters: [`${bakery.items.item[0].batters.batter}`],
ingredients: `${bakery.items.item[0].topping}`,
countOfFillings: `${bakery.items.item[0].fillings}`.length};
return result
}
Try this:
function mapCake(aCake) {
let newType = `${aCake.type}`;
let result = {
id: `${aCake.id}`,
type: newType,
name: `${aCake.name}`,
ppu: `${aCake.ppu}`,
batters: [`${aCake.batters.batter}`],
ingredients: `${aCake.topping}`,
countOfFillings: `${aCake.fillings}`.length
};
return result;
}
Looks like in your function you're directly indexing a specific bakery item each time.
Your aCake parameter wasn't yet being used, at each iteration, aCake refers to the current item that is being iterated over - so that's what you want to be populating your result values with.
Hi I am Having following array. I want to filter this array depending on user input.I have search it on internet gone through many solutions on stack overflow i have also gone through documentation of array but i didn't get any solution. Please Help...
{
"data": [
{
"categoryId": "1",
"categoryName": "Pens",
"subcat": [
{
"SubCatId": "1",
"SubCategoryName": "Classic Cakes",
"item": [
{
"DisplayName": "Excellent 500gms",
"ItemData": {
"ItemName": "Excellent"
}
},
{
"DisplayName": "choco vanila 500gms",
"ItemData": {
"Id": "26",
"ItemName": "choco vanila "
}
}
]
},
{
"SubCatId": "2",
"SubCategoryName": "Classic Cakes2",
"item": [
{
"DisplayName": "xyz 500gms",
"ItemData": {
"ItemName": "xyz"
}
},
{
"DisplayName": "abc 500gms",
"ItemData": {
"Id": "26",
"ItemName": "abc vanila "
}
}
]
}
]
},
{
"categoryId": "2",
"categoryName": "Markers",
"subcat": [
{
"SubCatId": "2",
"SubCategoryName": "Premium Cakes I",
"item": [
{
"DisplayName": "choco caramel 500gms",
"ItemData": {
"Id": "65",
"ItemName": "choco caramel"
}
},
{
"DisplayName": "choco almond 500gms",
"ItemData": {
"Id": "52",
"ItemName": "choco almond "
}
}
]
}
]
}
]
}
I want to apply filter on 'categoryName' , 'SubCategoryName' , 'DisplayName' , 'ItemName'
for example if I search 'choco almond' (which is 'ItemName') then the resultant array should be like
{
"data": [
{
"categoryId": "2",
"categoryName": "Markers",
"subcat": [
{
"SubCatId": "2",
"SubCategoryName": "Premium Cakes I",
"item": [
{
"DisplayName": "choco almond 500gms",
"ItemData": {
"Id": "52",
"ItemName": "choco almond "
}
}
]
}
]
}
]
}
if i search 'Pens' (which is 'categoryName') then thw resultant array should be like
{
"data": [
{
"categoryId": "1",
"categoryName": "Pens",
"subcat": [
{
"SubCatId": "1",
"SubCategoryName": "Classic Cakes",
"item": [
{
"DisplayName": "Excellent 500gms",
"ItemData": {
"ItemName": "Excellent"
}
},
{
"DisplayName": "choco vanila 500gms",
"ItemData": {
"Id": "26",
"ItemName": "choco vanila "
}
}
]
},
{
"SubCatId": "2",
"SubCategoryName": "Classic Cakes2",
"item": [
{
"DisplayName": "xyz 500gms",
"ItemData": {
"ItemName": "xyz"
}
},
{
"DisplayName": "abc 500gms",
"ItemData": {
"Id": "26",
"ItemName": "choco vanila "
}
}
]
}
]
}
]
}
What you can do is do a filter inside a filter.
var filter = "Pens";
var result = d["data"].filter(c=>
c.categoryName==filter ||
c.subcat.filter(s => s.SubCategoryName == filter).length > 0 ||
c.subcat.filter(i => i.item.filter(it => it.ItemData.ItemName == filter).length > 0).length > 0
);
console.log(result)
Where variable "d" is the json/object.
I'm working on a project where I need to get all the vacant classrooms for the day and basically filter out the ones being in use.
I get all the data from the school's own API with JSON response body that looks like this:
{
"status": "success",
"reservations": [
{
"id": "18935",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:51",
"startDate": "2017-04-27T11:00:00",
"endDate": "2017-04-27T13:00:00",
"resources": [
{
"id": "50",
"type": "room",
"code": "A440.5",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A440.5"
},
{
"id": "2995",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2267",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20362",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T11:00:00",
"endDate": "2017-04-27T14:00:00",
"resources": [
{
"id": "51",
"type": "room",
"code": "A450.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A450.1"
},
{
"id": "2402",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3064",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20237",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T11:15:00",
"endDate": "2017-04-27T13:00:00",
"resources": [
{
"id": "45",
"type": "room",
"code": "A420.4",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A420.4"
},
{
"id": "2433",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3058",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20888",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:57",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "62",
"type": "room",
"code": "A520.5",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A520.5"
},
{
"id": "3092",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2444",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "22586",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:48",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "52",
"type": "room",
"code": "A450.3",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A450.3"
},
{
"id": "3004",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2294",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "525",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18816",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:58",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "41",
"type": "room",
"code": "A340.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A340.1"
},
{
"id": "2989",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "795",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "599",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "20431",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:56",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "40",
"type": "room",
"code": "A320.7",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A320.7/8"
},
{
"id": "2416",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2386",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18588",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:49",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "25",
"type": "room",
"code": "A130.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A130.1"
},
{
"id": "26",
"type": "room",
"code": "A130.3",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A130.3"
},
{
"id": "2979",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "582",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "18940",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:53",
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "2996",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "2267",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "2268",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "31",
"type": "room",
"code": "A210.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A210.2"
}
],
"description": ""
},
{
"id": "12041",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:04:53",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "2510",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "775",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "23",
"type": "room",
"code": "A520.7",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A520.7"
}
],
"description": ""
},
{
"id": "24630",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:05",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "3277",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "42",
"type": "room",
"code": "A340.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A340.2"
}
],
"description": ""
},
{
"id": "27205",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:07",
"startDate": "2017-04-27T14:15:00",
"endDate": "2017-04-27T17:00:00",
"resources": [
{
"id": "35",
"type": "room",
"code": "A240.2",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A240.2"
},
{
"id": "775",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "3384",
"type": "realization",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "25917",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:00",
"startDate": "2017-04-27T15:15:00",
"endDate": "2017-04-27T16:00:00",
"resources": [
{
"id": "36",
"type": "room",
"code": "A240.4",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A240.4"
},
{
"id": "593",
"type": "realization",
"code": "",
"name": ""
},
{
"id": "595",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
},
{
"id": "21932",
"subject": "subjectName",
"modifiedDate": "2017-04-27T06:05:06",
"startDate": "2017-04-27T16:00:00",
"endDate": "2017-04-27T18:00:00",
"resources": [
{
"id": "43",
"type": "room",
"code": "A350.1",
"parent": {
"id": "2",
"type": "building",
"code": "A",
"name": "buildingA"
},
"name": "A350.1"
},
{
"id": "2464",
"type": "student_group",
"code": "",
"name": ""
},
{
"id": "2747",
"type": "student_group",
"code": "",
"name": ""
}
],
"description": ""
}
]
}
In order to get the JSON response I need to put startDate (the moment user searches the vacant rooms, in this situation it is: 2017-04-27T10:55) and endDate (set to end of the day, 2017-04-27T22:00). The result for this query is the JSON response above.
The problem is that the API I'm using doesn't contain any data for the vacant rooms but only for the ones booked for certain times so I made a list of all the rooms in the building and compared it to the booked ones to filter them out:
var rooms = ['A120.3', 'A130.1', 'A130.3', 'A140.1', 'A140.2', 'A140.4', 'A250.1', 'A240.4', 'A240.2', 'A220.5', 'A220.3',
'A220.1', 'A210.2', 'A320.2', 'A320.6', 'A320.7', 'A320.8', 'A340.1', 'A340.2', 'A350.1', 'A350.3', 'A440.5', 'A450.3','A450.1',
'A440.4', 'A440.2', 'A420.6', 'A420.5', 'A420.4', 'A420.2', 'A510.2', 'A520.5', 'A510.4', 'A520.6', 'A520.7','A540.1', 'A540.2'];
var data = JSON.parse(responseText);
var booking = Object.create(null);
var free;
data.reservations.forEach(function (reservation) {
reservation.resources.some(function (resource) {
if (resource.type === 'room') {
booking[resource.code] = booking[resource.code] || [];
booking[resource.code].push({ startDate: reservation.startDate, endDate: reservation.endDate });
return true;
}
});
});
free = rooms.filter(function (a) {
return !booking[a];
});
console.log(free);
Results:
A210.3
A220.5
A320.2
A520.6
A510.4
This only returns the ones that are not being used at all during the day but I need to get the ones that are vacant for hour or two.
For this booked class for example:
"startDate": "2017-04-27T13:15:00",
"endDate": "2017-04-27T16:00:00",
"type": "room",
"code": "A520.5"
for this I would need to print out:
A520.5 - 2 hours 20 minutes
So I need to get the room / time from the startDate of the search (2017-04-27T10:55) and compare it to the startDate of the booked room (2017-04-27T13:15:00) to get the time remaining for that room to be vacant.
TO CLARIFY:
I have all the data for booked rooms starting from 2017-04-27T10:55
until 2017-04-27T22:00 as you can see from the JSON response above.
I need to somehow compare the startDate of the JSON query when the user
searches for the rooms (2017-04-27T10:55) and compare it to the booked
rooms startDate to get the time how long the room stays vacant.
This is how I'm doing my startDate and endDate for the JSON query:
// Timestamp needs to be formed (YYYY-MM-DDTxx:xx) in order for JSON query to work
var todaysDate = new Date();
function convertDate(date) {
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth() + 1).toString();
var dd = date.getDate().toString();
var mmChars = mm.split('');
var ddChars = dd.split('');
return yyyy + '-' + (mmChars[1] ? mm : "0" + mmChars[0]) + '-' + (ddChars[1] ? dd : "0" + ddChars[0]);
}
// Current time when user searches for vacant rooms
var currentTime = new Date();
var time = "T" + currentTime.getHours() + ":" + currentTime.getMinutes();
// variables for the JSON query
var startDate = convertDate(todaysDate) + time;
var endDate = convertDate(todaysDate) + ("T22:00");
// JSON-query
var getRooms = {
"startDate": startDate,
"endDate": endDate
};
I'm trying to display a Kendo treeview thanks to a HierarchicalDataSource.
It's a simple region, country, city hierarchy but the difficulty comes with the fact that we have 3 possible levels of regions and countries can appear at the second or at the third level.
Basically,
- First level of regions contains only other regions
- Second level of regions contains other regions or countries
- Third level of regions contains only countries
Here are my schemas:
var portsSchema = {
schema: {
data: "PortList",
model: {
id: "Code"
}
}
};
var countrySchema = {
schema: {
data: "CountryList",
model: {
id: "Code",
children: portsSchema
}
}
};
var regionCountrySchema = {
schema: {
data: "RegionList",
model: {
id: "id",
children: countrySchema
}
}
};
var regionSchema = {
schema: {
data: "RegionList",
model: {
id: "id",
children: regionCountrySchema
}
}
};
Depending on the fact that the region has countries or not, I would like to specify a specific type of children (regionSchema or regionCountrySchema).
var tvDataSource = new kendo.data.HierarchicalDataSource({
data: regions,
schema: {
model: function (data) {
**how to return the right children schema ?**
}
}
});
Returning { children: regionSchema } or {children: regionCountrySchema } triggers a js kendo error.
Any idea to achieve this ? Thank you.
JSON data sample below.
[
{
"Id": 1,
"Name": "MIDDLE EAST AND RED SEA",
"RegionList": [
{
"Id": 12,
"Name": "MIDDLE EAST",
"RegionList": [
{
"Id": 45,
"Name": "M. EAST",
"RegionList": [
],
"CountryList": [
{
"Id": 12007,
"Code": "AE",
"Name": "UAE",
"PortList": [
{
"Id": 6005,
"Code": "AEJEA",
"Name": "JEBEL ALI"
},
{
"Id": 16014,
"Code": "AEAJM",
"Name": "AJMAN"
},
{
"Id": 16015,
"Code": "AEAUH",
"Name": "ABU DHABI"
},
{
"Id": 15109,
"Code": "AEKLF",
"Name": "KHOR AL FAKKAN"
},
{
"Id": 15001,
"Code": "AERKT",
"Name": "RAS AL KHAIMAH"
},
{
"Id": 16018,
"Code": "AESHJ",
"Name": "SHARJAH"
},
{
"Id": 14863,
"Code": "AEQIW",
"Name": "UMM AL QAIWAIN"
},
{
"Id": 15647,
"Code": "AEFJR",
"Name": "AL - FUJAYRAH"
}
]
},
{
"Id": 12018,
"Code": "OM",
"Name": "OMAN",
"PortList": [
{
"Id": 6011,
"Code": "OMSLL",
"Name": "SALALAH"
},
{
"Id": 16218,
"Code": "OMSOH",
"Name": "SOHAR"
}
]
},
{
"Id": 10069,
"Code": "BH",
"Name": "BAHRAIN",
"PortList": [
{
"Id": 15345,
"Code": "BHKBS",
"Name": "BAHRAIN"
}
]
},
{
"Id": 62292,
"Code": "IQ",
"Name": "IRAQ",
"PortList": [
{
"Id": 15383,
"Code": "IQBSR",
"Name": "BASRA"
},
{
"Id": 14673,
"Code": "IQUQR",
"Name": "UMM QASR PT"
}
]
},
{
"Id": 62291,
"Code": "IR",
"Name": "IRAN, ISLAMIC REPUBLIC OF",
"PortList": [
{
"Id": 15250,
"Code": "IRBKM",
"Name": "BANDAR KHOMEINI"
},
{
"Id": 15249,
"Code": "IRBND",
"Name": "BANDAR ABBAS"
},
{
"Id": 14973,
"Code": "IRBUZ",
"Name": "BUSHEHR"
},
{
"Id": 14671,
"Code": "IRKHO",
"Name": "KHORRAMSHAHR"
}
]
},
{
"Id": 62306,
"Code": "KW",
"Name": "KUWAIT",
"PortList": [
{
"Id": 15810,
"Code": "KWSAA",
"Name": "SHUAIBA"
},
{
"Id": 15811,
"Code": "KWSWK",
"Name": "SHUWAIKH"
}
]
},
{
"Id": 12002,
"Code": "SA",
"Name": "SAUDI ARABIA",
"PortList": [
{
"Id": 15039,
"Code": "SAJUB",
"Name": "JUBAIL"
},
{
"Id": 16147,
"Code": "SADMM",
"Name": "AD DAMMAM"
}
]
},
{
"Id": 62364,
"Code": "QA",
"Name": "QATAR",
"PortList": [
{
"Id": 15739,
"Code": "QADOH",
"Name": "DOHA"
},
{
"Id": 14795,
"Code": "QAMES",
"Name": "MESAIEED"
}
]
}
]
}
],
"CountryList": [
]
},
{
"Id": 30,
"Name": "RED SEA",
"RegionList": [
{
"Id": 65,
"Name": "RED SEA",
"RegionList": [
],
"CountryList": [
]
}
],
"CountryList": [
{
"Id": 12002,
"Code": "SA",
"Name": "SAUDI ARABIA",
"PortList": [
{
"Id": 6003,
"Code": "SAKAC",
"Name": "KING ABDULLAH PORT"
},
{
"Id": 15731,
"Code": "SAJED",
"Name": "JEDDAH"
}
]
},
{
"Id": 10114,
"Code": "DJ",
"Name": "DJIBOUTI",
"PortList": [
{
"Id": 8059,
"Code": "DJJIB",
"Name": "DJIBOUTI"
}
]
},
{
"Id": 10122,
"Code": "ER",
"Name": "ERITREA",
"PortList": [
{
"Id": 15031,
"Code": "ERMSW",
"Name": "MASSAWA"
}
]
},
{
"Id": 62300,
"Code": "JO",
"Name": "JORDAN",
"PortList": [
{
"Id": 14801,
"Code": "JOAQJ",
"Name": "AL \u0027AQABAH"
}
]
},
{
"Id": 50001,
"Code": "SD",
"Name": "sd",
"PortList": [
{
"Id": 15734,
"Code": "SDPZU",
"Name": "PORT SUDAN"
}
]
},
{
"Id": 62425,
"Code": "YE",
"Name": "YEMEN",
"PortList": [
{
"Id": 15302,
"Code": "YEHOD",
"Name": "HODEIDAH"
},
{
"Id": 15304,
"Code": "YEMKX",
"Name": "MUKALLA"
},
{
"Id": 15300,
"Code": "YEADE",
"Name": "ADEN"
}
]
},
{
"Id": 10118,
"Code": "EG",
"Name": "EGYPT",
"PortList": [
{
"Id": 16030,
"Code": "EGSOK",
"Name": "SOKHNA PORT"
}
]
}
]
}
],
"CountryList": [
]
}
]