Develop Reference

How to rearrange an array based on priority? [duplicate]

This question already has answers here:
Multiple sorting in JavaScript
(4 answers)
Closed 10 months ago.
I have an array of clothing sizes coming back from an API but in random order. I would want to sort it by having first few values(if they exist) being: XXS, XS, S, M, L, XL, XXL, XXXL, and then the rest of the values in whatever order they are coming down from the API.
I want to rearrange the values array of objects to the above sorting order.
values.label is what is supposed to be used here to do that.
let apiResponse = {
"id":"filter.v.option.size",
"label":"Size",
"type":"LIST",
"values":[
{
"id":"filter.v.option.size.1",
"label":"1",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"1\"}}"
},
{
"id":"filter.v.option.size.2",
"label":"2",
"count":5,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"2\"}}"
},
{
"id":"filter.v.option.size.3",
"label":"3",
"count":6,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3\"}}"
},
{
"id":"filter.v.option.size.3-5",
"label":"3.5",
"count":16,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3.5\"}}"
},
{
"id":"filter.v.option.size.4",
"label":"4",
"count":161,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"4\"}}"
},
{
"id":"filter.v.option.size.4-5",
"label":"4.5",
"count":156,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"4.5\"}}"
},
{
"id":"filter.v.option.size.5",
"label":"5",
"count":316,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5\"}}"
},
{
"id":"filter.v.option.size.5-5",
"label":"5.5",
"count":285,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5.5\"}}"
},
{
"id":"filter.v.option.size.6",
"label":"6",
"count":408,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6\"}}"
},
{
"id":"filter.v.option.size.6-5",
"label":"6.5",
"count":363,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6.5\"}}"
},
{
"id":"filter.v.option.size.7",
"label":"7",
"count":556,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7\"}}"
},
{
"id":"filter.v.option.size.7-125",
"label":"7.125",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7.125\"}}"
},
{
"id":"filter.v.option.size.7-25",
"label":"7.25",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7.25\"}}"
},
{
"id":"filter.v.option.size.7-5",
"label":"7.5",
"count":538,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7.5\"}}"
},
{
"id":"filter.v.option.size.8",
"label":"8",
"count":694,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"8\"}}"
},
{
"id":"filter.v.option.size.8-5",
"label":"8.5",
"count":668,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"8.5\"}}"
},
{
"id":"filter.v.option.size.9",
"label":"9",
"count":709,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"9\"}}"
},
{
"id":"filter.v.option.size.9-5",
"label":"9.5",
"count":658,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"9.5\"}}"
},
{
"id":"filter.v.option.size.10",
"label":"10",
"count":676,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"10\"}}"
},
{
"id":"filter.v.option.size.10-5",
"label":"10.5",
"count":605,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"10.5\"}}"
},
{
"id":"filter.v.option.size.11",
"label":"11",
"count":623,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"11\"}}"
},
{
"id":"filter.v.option.size.11-5",
"label":"11.5",
"count":507,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"11.5\"}}"
},
{
"id":"filter.v.option.size.12",
"label":"12",
"count":601,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"12\"}}"
},
{
"id":"filter.v.option.size.12-5",
"label":"12.5",
"count":62,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"12.5\"}}"
},
{
"id":"filter.v.option.size.13",
"label":"13",
"count":476,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"13\"}}"
},
{
"id":"filter.v.option.size.13-5",
"label":"13.5",
"count":8,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"13.5\"}}"
},
{
"id":"filter.v.option.size.14",
"label":"14",
"count":191,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"14\"}}"
},
{
"id":"filter.v.option.size.14-5",
"label":"14.5",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"14.5\"}}"
},
{
"id":"filter.v.option.size.15",
"label":"15",
"count":86,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"15\"}}"
},
{
"id":"filter.v.option.size.16",
"label":"16",
"count":12,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"16\"}}"
},
{
"id":"filter.v.option.size.17",
"label":"17",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"17\"}}"
},
{
"id":"filter.v.option.size.18",
"label":"18",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"18\"}}"
},
{
"id":"filter.v.option.size.30",
"label":"30",
"count":7,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"30\"}}"
},
{
"id":"filter.v.option.size.32",
"label":"32",
"count":12,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"32\"}}"
},
{
"id":"filter.v.option.size.34",
"label":"34",
"count":7,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"34\"}}"
},
{
"id":"filter.v.option.size.36",
"label":"36",
"count":16,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"36\"}}"
},
{
"id":"filter.v.option.size.36-5",
"label":"36.5",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"36.5\"}}"
},
{
"id":"filter.v.option.size.37",
"label":"37",
"count":5,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"37\"}}"
},
{
"id":"filter.v.option.size.37-5",
"label":"37.5",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"37.5\"}}"
},
{
"id":"filter.v.option.size.38",
"label":"38",
"count":6,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"38\"}}"
},
{
"id":"filter.v.option.size.38-5",
"label":"38.5",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"38.5\"}}"
},
{
"id":"filter.v.option.size.39",
"label":"39",
"count":4,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"39\"}}"
},
{
"id":"filter.v.option.size.40",
"label":"40",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"40\"}}"
},
{
"id":"filter.v.option.size.41",
"label":"41",
"count":12,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"41\"}}"
},
{
"id":"filter.v.option.size.42",
"label":"42",
"count":9,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"42\"}}"
},
{
"id":"filter.v.option.size.43",
"label":"43",
"count":9,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"43\"}}"
},
{
"id":"filter.v.option.size.44",
"label":"44",
"count":14,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"44\"}}"
},
{
"id":"filter.v.option.size.45",
"label":"45",
"count":8,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"45\"}}"
},
{
"id":"filter.v.option.size.46",
"label":"46",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"46\"}}"
},
{
"id":"filter.v.option.size.48",
"label":"48",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"48\"}}"
},
{
"id":"filter.v.option.size.59",
"label":"59",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"59\"}}"
},
{
"id":"filter.v.option.size.4-xl",
"label":"4 (XL)",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"4 (XL)\"}}"
},
{
"id":"filter.v.option.size.7-1-2",
"label":"7 1/2",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/2\"}}"
},
{
"id":"filter.v.option.size.7-1-4",
"label":"7 1/4",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/4\"}}"
},
{
"id":"filter.v.option.size.7-1-8",
"label":"7 1/8",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/8\"}}"
},
{
"id":"filter.v.option.size.7-3-4",
"label":"7 3/4",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 3\\/4\"}}"
},
{
"id":"filter.v.option.size.7-3-8",
"label":"7 3/8",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 3\\/8\"}}"
},
{
"id":"filter.v.option.size.7-5-8",
"label":"7 5/8",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 5\\/8\"}}"
},
{
"id":"filter.v.option.size.7-7-8",
"label":"7 7/8",
"count":10,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7 7\\/8\"}}"
},
{
"id":"filter.v.option.size.3-4",
"label":"3/4",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3\\/4\"}}"
},
{
"id":"filter.v.option.size.3-8",
"label":"3/8",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3\\/8\"}}"
},
{
"id":"filter.v.option.size.5-8",
"label":"5/8",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5\\/8\"}}"
},
{
"id":"filter.v.option.size.6c",
"label":"6C",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6C\"}}"
},
{
"id":"filter.v.option.size.7c",
"label":"7C",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7C\"}}"
},
{
"id":"filter.v.option.size.8c",
"label":"8C",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"8C\"}}"
},
{
"id":"filter.v.option.size.9c",
"label":"9C",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"9C\"}}"
},
{
"id":"filter.v.option.size.10c",
"label":"10C",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"10C\"}}"
},
{
"id":"filter.v.option.size.2k",
"label":"2K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"2K\"}}"
},
{
"id":"filter.v.option.size.3k",
"label":"3K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3K\"}}"
},
{
"id":"filter.v.option.size.4k",
"label":"4K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"4K\"}}"
},
{
"id":"filter.v.option.size.5k",
"label":"5K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5K\"}}"
},
{
"id":"filter.v.option.size.6k",
"label":"6K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6K\"}}"
},
{
"id":"filter.v.option.size.7k",
"label":"7K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7K\"}}"
},
{
"id":"filter.v.option.size.8k",
"label":"8K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"8K\"}}"
},
{
"id":"filter.v.option.size.9k",
"label":"9K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"9K\"}}"
},
{
"id":"filter.v.option.size.10k",
"label":"10K",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"10K\"}}"
},
{
"id":"filter.v.option.size.2xl",
"label":"2XL",
"count":177,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"2XL\"}}"
},
{
"id":"filter.v.option.size.3xl",
"label":"3XL",
"count":52,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"3XL\"}}"
},
{
"id":"filter.v.option.size.2xs",
"label":"2XS",
"count":38,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"2XS\"}}"
},
{
"id":"filter.v.option.size.4-5y",
"label":"4.5Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"4.5Y\"}}"
},
{
"id":"filter.v.option.size.5y",
"label":"5Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5Y\"}}"
},
{
"id":"filter.v.option.size.5-5y",
"label":"5.5Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"5.5Y\"}}"
},
{
"id":"filter.v.option.size.6y",
"label":"6Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6Y\"}}"
},
{
"id":"filter.v.option.size.6-5y",
"label":"6.5Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"6.5Y\"}}"
},
{
"id":"filter.v.option.size.7y",
"label":"7Y",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"7Y\"}}"
},
{
"id":"filter.v.option.size.l",
"label":"L",
"count":393,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"L\"}}"
},
{
"id":"filter.v.option.size.large",
"label":"Large",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"Large\"}}"
},
{
"id":"filter.v.option.size.m",
"label":"M",
"count":397,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"M\"}}"
},
{
"id":"filter.v.option.size.medium",
"label":"Medium",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"Medium\"}}"
},
{
"id":"filter.v.option.size.ns",
"label":"NS",
"count":3,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"NS\"}}"
},
{
"id":"filter.v.option.size.o-s",
"label":"O/S",
"count":57,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"O\\/S\"}}"
},
{
"id":"filter.v.option.size.s",
"label":"S",
"count":388,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"S\"}}"
},
{
"id":"filter.v.option.size.s-m",
"label":"S-M",
"count":1,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"S-M\"}}"
},
{
"id":"filter.v.option.size.small",
"label":"Small",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"Small\"}}"
},
{
"id":"filter.v.option.size.xl",
"label":"XL",
"count":323,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"XL\"}}"
},
{
"id":"filter.v.option.size.xlarge",
"label":"XLarge",
"count":2,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"XLarge\"}}"
},
{
"id":"filter.v.option.size.xs",
"label":"XS",
"count":185,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"XS\"}}"
},
{
"id":"filter.v.option.size.xxl",
"label":"XXL",
"count":9,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"XXL\"}}"
},
{
"id":"filter.v.option.size.xxs",
"label":"XXS",
"count":21,
"input":"{\"variantOption\":{\"name\":\"size\",\"value\":\"XXS\"}}"
}
]
}
This what I did, which worked when the values I needed existed. It obviously broke when they didn't exist. Where can I go from here?
By broke I mean, I am hardcoding the indexes here to those specific values. If the api response comes back without those specific sizes, then the code breaks.
For Example: XXS in on index 0, XS is on index 1 and S is on index 2.
If XS doesn't exist then it doesn't work out.
var newSortedArray = [];
var restOfArray = [];
var joinedArray = [];
await apiResponse.values.forEach((value) => {
if(value.label == "XXS") {
newSortedArray[0] = value;
}
else if (value.label == "XS") {
newSortedArray[1] = value;
}
else if (value.label == "S") {
newSortedArray[2] = value;
}
else if (value.label == "M") {
newSortedArray[3] = value;
}
else if (value.label == "L") {
newSortedArray[4] = value;
}
else if (value.label == "XL") {
newSortedArray[5] = value;
}
else if (value.label == "XXL") {
newSortedArray[6] = value;
}
else if (value.label == "XXXL") {
newSortedArray[7] = value;
}
else {
restOfArray.push(value);
}
})
var concatedArray = newSortedArray.concat(restOfArray);
await this.filters.forEach((filter) => {
if(filter.label == "Size") {
filter.values = concatedArray;
}
})

This isn't going to win any prizes for efficiency, but should be fairly straightforward to follow.
let data = apiResponse().values
let priority = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL', '*']
// 1. create arrays for each priority
let buckets = priority.reduce((agg,label)=>(agg[label]=[], agg),{})
// 2. assign objects to corresponding array
data.forEach(datum=>{
let collection = buckets?.[datum?.label] || buckets['*']
collection.push(datum)
})
// 3. recombine after
let sortedData = priority.map(label=>buckets[label]).flat()
console.log(sortedData)
function apiResponse() {
return {
"id": "filter.v.option.size",
"label": "Size",
"type": "LIST",
"values": [{
"id": "filter.v.option.size.1",
"label": "1",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"1\"}}"
},
{
"id": "filter.v.option.size.2",
"label": "2",
"count": 5,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"2\"}}"
},
{
"id": "filter.v.option.size.3",
"label": "3",
"count": 6,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3\"}}"
},
{
"id": "filter.v.option.size.3-5",
"label": "3.5",
"count": 16,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3.5\"}}"
},
{
"id": "filter.v.option.size.4",
"label": "4",
"count": 161,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"4\"}}"
},
{
"id": "filter.v.option.size.4-5",
"label": "4.5",
"count": 156,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"4.5\"}}"
},
{
"id": "filter.v.option.size.5",
"label": "5",
"count": 316,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5\"}}"
},
{
"id": "filter.v.option.size.5-5",
"label": "5.5",
"count": 285,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5.5\"}}"
},
{
"id": "filter.v.option.size.6",
"label": "6",
"count": 408,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6\"}}"
},
{
"id": "filter.v.option.size.6-5",
"label": "6.5",
"count": 363,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6.5\"}}"
},
{
"id": "filter.v.option.size.7",
"label": "7",
"count": 556,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7\"}}"
},
{
"id": "filter.v.option.size.7-125",
"label": "7.125",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7.125\"}}"
},
{
"id": "filter.v.option.size.7-25",
"label": "7.25",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7.25\"}}"
},
{
"id": "filter.v.option.size.7-5",
"label": "7.5",
"count": 538,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7.5\"}}"
},
{
"id": "filter.v.option.size.8",
"label": "8",
"count": 694,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"8\"}}"
},
{
"id": "filter.v.option.size.8-5",
"label": "8.5",
"count": 668,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"8.5\"}}"
},
{
"id": "filter.v.option.size.9",
"label": "9",
"count": 709,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"9\"}}"
},
{
"id": "filter.v.option.size.9-5",
"label": "9.5",
"count": 658,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"9.5\"}}"
},
{
"id": "filter.v.option.size.10",
"label": "10",
"count": 676,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"10\"}}"
},
{
"id": "filter.v.option.size.10-5",
"label": "10.5",
"count": 605,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"10.5\"}}"
},
{
"id": "filter.v.option.size.11",
"label": "11",
"count": 623,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"11\"}}"
},
{
"id": "filter.v.option.size.11-5",
"label": "11.5",
"count": 507,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"11.5\"}}"
},
{
"id": "filter.v.option.size.12",
"label": "12",
"count": 601,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"12\"}}"
},
{
"id": "filter.v.option.size.12-5",
"label": "12.5",
"count": 62,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"12.5\"}}"
},
{
"id": "filter.v.option.size.13",
"label": "13",
"count": 476,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"13\"}}"
},
{
"id": "filter.v.option.size.13-5",
"label": "13.5",
"count": 8,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"13.5\"}}"
},
{
"id": "filter.v.option.size.14",
"label": "14",
"count": 191,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"14\"}}"
},
{
"id": "filter.v.option.size.14-5",
"label": "14.5",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"14.5\"}}"
},
{
"id": "filter.v.option.size.15",
"label": "15",
"count": 86,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"15\"}}"
},
{
"id": "filter.v.option.size.16",
"label": "16",
"count": 12,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"16\"}}"
},
{
"id": "filter.v.option.size.17",
"label": "17",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"17\"}}"
},
{
"id": "filter.v.option.size.18",
"label": "18",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"18\"}}"
},
{
"id": "filter.v.option.size.30",
"label": "30",
"count": 7,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"30\"}}"
},
{
"id": "filter.v.option.size.32",
"label": "32",
"count": 12,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"32\"}}"
},
{
"id": "filter.v.option.size.34",
"label": "34",
"count": 7,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"34\"}}"
},
{
"id": "filter.v.option.size.36",
"label": "36",
"count": 16,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"36\"}}"
},
{
"id": "filter.v.option.size.36-5",
"label": "36.5",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"36.5\"}}"
},
{
"id": "filter.v.option.size.37",
"label": "37",
"count": 5,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"37\"}}"
},
{
"id": "filter.v.option.size.37-5",
"label": "37.5",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"37.5\"}}"
},
{
"id": "filter.v.option.size.38",
"label": "38",
"count": 6,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"38\"}}"
},
{
"id": "filter.v.option.size.38-5",
"label": "38.5",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"38.5\"}}"
},
{
"id": "filter.v.option.size.39",
"label": "39",
"count": 4,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"39\"}}"
},
{
"id": "filter.v.option.size.40",
"label": "40",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"40\"}}"
},
{
"id": "filter.v.option.size.41",
"label": "41",
"count": 12,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"41\"}}"
},
{
"id": "filter.v.option.size.42",
"label": "42",
"count": 9,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"42\"}}"
},
{
"id": "filter.v.option.size.43",
"label": "43",
"count": 9,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"43\"}}"
},
{
"id": "filter.v.option.size.44",
"label": "44",
"count": 14,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"44\"}}"
},
{
"id": "filter.v.option.size.45",
"label": "45",
"count": 8,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"45\"}}"
},
{
"id": "filter.v.option.size.46",
"label": "46",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"46\"}}"
},
{
"id": "filter.v.option.size.48",
"label": "48",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"48\"}}"
},
{
"id": "filter.v.option.size.59",
"label": "59",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"59\"}}"
},
{
"id": "filter.v.option.size.4-xl",
"label": "4 (XL)",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"4 (XL)\"}}"
},
{
"id": "filter.v.option.size.7-1-2",
"label": "7 1/2",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/2\"}}"
},
{
"id": "filter.v.option.size.7-1-4",
"label": "7 1/4",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/4\"}}"
},
{
"id": "filter.v.option.size.7-1-8",
"label": "7 1/8",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 1\\/8\"}}"
},
{
"id": "filter.v.option.size.7-3-4",
"label": "7 3/4",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 3\\/4\"}}"
},
{
"id": "filter.v.option.size.7-3-8",
"label": "7 3/8",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 3\\/8\"}}"
},
{
"id": "filter.v.option.size.7-5-8",
"label": "7 5/8",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 5\\/8\"}}"
},
{
"id": "filter.v.option.size.7-7-8",
"label": "7 7/8",
"count": 10,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7 7\\/8\"}}"
},
{
"id": "filter.v.option.size.3-4",
"label": "3/4",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3\\/4\"}}"
},
{
"id": "filter.v.option.size.3-8",
"label": "3/8",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3\\/8\"}}"
},
{
"id": "filter.v.option.size.5-8",
"label": "5/8",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5\\/8\"}}"
},
{
"id": "filter.v.option.size.6c",
"label": "6C",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6C\"}}"
},
{
"id": "filter.v.option.size.7c",
"label": "7C",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7C\"}}"
},
{
"id": "filter.v.option.size.8c",
"label": "8C",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"8C\"}}"
},
{
"id": "filter.v.option.size.9c",
"label": "9C",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"9C\"}}"
},
{
"id": "filter.v.option.size.10c",
"label": "10C",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"10C\"}}"
},
{
"id": "filter.v.option.size.2k",
"label": "2K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"2K\"}}"
},
{
"id": "filter.v.option.size.3k",
"label": "3K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3K\"}}"
},
{
"id": "filter.v.option.size.4k",
"label": "4K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"4K\"}}"
},
{
"id": "filter.v.option.size.5k",
"label": "5K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5K\"}}"
},
{
"id": "filter.v.option.size.6k",
"label": "6K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6K\"}}"
},
{
"id": "filter.v.option.size.7k",
"label": "7K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7K\"}}"
},
{
"id": "filter.v.option.size.8k",
"label": "8K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"8K\"}}"
},
{
"id": "filter.v.option.size.9k",
"label": "9K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"9K\"}}"
},
{
"id": "filter.v.option.size.10k",
"label": "10K",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"10K\"}}"
},
{
"id": "filter.v.option.size.2xl",
"label": "2XL",
"count": 177,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"2XL\"}}"
},
{
"id": "filter.v.option.size.3xl",
"label": "3XL",
"count": 52,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"3XL\"}}"
},
{
"id": "filter.v.option.size.2xs",
"label": "2XS",
"count": 38,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"2XS\"}}"
},
{
"id": "filter.v.option.size.4-5y",
"label": "4.5Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"4.5Y\"}}"
},
{
"id": "filter.v.option.size.5y",
"label": "5Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5Y\"}}"
},
{
"id": "filter.v.option.size.5-5y",
"label": "5.5Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"5.5Y\"}}"
},
{
"id": "filter.v.option.size.6y",
"label": "6Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6Y\"}}"
},
{
"id": "filter.v.option.size.6-5y",
"label": "6.5Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"6.5Y\"}}"
},
{
"id": "filter.v.option.size.7y",
"label": "7Y",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"7Y\"}}"
},
{
"id": "filter.v.option.size.l",
"label": "L",
"count": 393,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"L\"}}"
},
{
"id": "filter.v.option.size.large",
"label": "Large",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"Large\"}}"
},
{
"id": "filter.v.option.size.m",
"label": "M",
"count": 397,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"M\"}}"
},
{
"id": "filter.v.option.size.medium",
"label": "Medium",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"Medium\"}}"
},
{
"id": "filter.v.option.size.ns",
"label": "NS",
"count": 3,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"NS\"}}"
},
{
"id": "filter.v.option.size.o-s",
"label": "O/S",
"count": 57,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"O\\/S\"}}"
},
{
"id": "filter.v.option.size.s",
"label": "S",
"count": 388,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"S\"}}"
},
{
"id": "filter.v.option.size.s-m",
"label": "S-M",
"count": 1,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"S-M\"}}"
},
{
"id": "filter.v.option.size.small",
"label": "Small",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"Small\"}}"
},
{
"id": "filter.v.option.size.xl",
"label": "XL",
"count": 323,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"XL\"}}"
},
{
"id": "filter.v.option.size.xlarge",
"label": "XLarge",
"count": 2,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"XLarge\"}}"
},
{
"id": "filter.v.option.size.xs",
"label": "XS",
"count": 185,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"XS\"}}"
},
{
"id": "filter.v.option.size.xxl",
"label": "XXL",
"count": 9,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"XXL\"}}"
},
{
"id": "filter.v.option.size.xxs",
"label": "XXS",
"count": 21,
"input": "{\"variantOption\":{\"name\":\"size\",\"value\":\"XXS\"}}"
}
]
}
}

Unable to get array from array in Javascript

I have an API call in my React js component which is returning a JSON object.
Below is the JSON response:
[
{
"date": "2019-05-03 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
},
{
"date": "2019-05-06 ",
"Details": [
{
"Type": "D",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABWW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
},
{
"Type": "C",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
}
]
},
{
"date": "2019-05-07 ",
"Details": [
{
"Type": "D",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
},
{
"Type": "C",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
}
]
},
{
"date": "2019-05-04 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
}
]
Now for every date I want to form an array depending on Type(i.e. 'C' or 'D') with all success, failure and Data array but I am unable to get through Details.
Basically,I want an array of data for each date as such:
[
{
"date": "2019-05-03 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
}
]
Below is what I tried:
var final=[];
for (const item of data){
final.push(item.Details);
}
console.log(final);
});
This is not returning the array with date.
I tried foreach loop but that does not seems to work.
Any idea how can I achieve that?

let input=[
{
"date": "2019-05-03 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
},
{
"date": "2019-05-06 ",
"Details": [
{
"Type": "D",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABWW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
},
{
"Type": "C",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
}
]
},
{
"date": "2019-05-07 ",
"Details": [
{
"Type": "D",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
},
{
"Type": "C",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
}
]
},
{
"date": "2019-05-04 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
}
]
let output =input.map((item)=>{
return {"date":item.date,"Details":item.Details}
});
console.log(output)

var obj = [
{
"date": "2019-05-03 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
},
{
"date": "2019-05-06 ",
"Details": [
{
"Type": "D",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABWW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
},
{
"Type": "C",
"total": "1",
"success": "0",
"failure": "1",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "GWTHBC",
"Number": "3340373"
}
]
}
]
}
]
},
{
"date": "2019-05-07 ",
"Details": [
{
"Type": "D",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
},
{
"Type": "C",
"total": "11",
"success": "8",
"failure": "3",
"Data": [
{
"name": "FailurePoint1",
"count": 2,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "53345342"
},
{
"Cd": "SABW",
"NAME": "OCYHEH",
"Number": "5334534"
}
]
},
{
"name": "FailurePoint2",
"count": 1,
"TransDetails": [
{
"Cd": "SABW",
"NAME": "ISMIWP",
"Number": "7020191"
}
]
}
]
}
]
},
{
"date": "2019-05-04 ",
"Details": [
{
"Type": "D",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
},
{
"Type": "C",
"total": "0",
"success": "0",
"failure": "0",
"Data": [
{
"name": "FailurePoint1",
"count": 0,
"TransDetails": []
},
{
"name": "FailurePoint2",
"count": 0,
"TransDetails": []
}
]
}
]
}
]
var output = []
obj.forEach(elem => {
elem.Details.forEach( det => {
if(det.Type === "D")
output.push( {"date": elem.date, "Details": det} )
})
})
console.log(output);
This is what you need right ?

Is there a D3 similar to the GoJS State Chart?

For my use case I want something close to this.
https://gojs.net/latest/samples/stateChart.html
I have nodes in a list of ids & relationship in form of a list of to & from and relationship name.
The example is a perfect fit but sadly it is in goJs,
Is there a ready-made something similar to this in D3? or any other free to use libraries I can leverage on?
Here is the data from the goJs example, I have similar data.
{ "nodeKeyProperty": "id",
"nodeDataArray": [
{ "id": 0, "loc": "120 120", "text": "Initial" },
{ "id": 1, "loc": "330 120", "text": "First down" },
{ "id": 2, "loc": "226 376", "text": "First up" },
{ "id": 3, "loc": "60 276", "text": "Second down" },
{ "id": 4, "loc": "226 226", "text": "Wait" }
],
"linkDataArray": [
{ "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },
{ "from": 0, "to": 1, "text": "down", "curviness": 20 },
{ "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },
{ "from": 1, "to": 1, "text": "down", "curviness": -20 },
{ "from": 1, "to": 2, "text": "up (no move)" },
{ "from": 1, "to": 4, "text": "timer" },
{ "from": 2, "to": 0, "text": "timer\nPOST" },
{ "from": 2, "to": 3, "text": "down" },
{ "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },
{ "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },
{ "from": 4, "to": 0, "text": "up\nPOST" },
{ "from": 4, "to": 4, "text": "down" }
]
}

How to find all unique paths in tree structure

root1
child1
child2
grandchild1
grandchild2
child3
root2
child1
child2
grandchild1
greatgrandchild1
I have an object array like tree structure like above, I want to get all unique paths in like this
Food->Dry Food Items->Local Dry Food Items
Food->Dry Food Items->Thai Dry Food Items
Food->Dry Food Items->Others
Food->Fruits
------
------
This is my object
[
{
"id": 1,
"name": "Food",
"parent_id": 0,
"children": [
{
"id": 5,
"name": "Dry Food Items",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "Local Dry Food Items",
"parent_id": 5
},
{
"id": 12,
"name": "Thai Dry Food Items",
"parent_id": 5
},
{
"id": 60,
"name": "Others",
"parent_id": 5
}
]
},
{
"id": 6,
"name": "Fruits",
"parent_id": 1
},
{
"id": 7,
"name": "LG Branded",
"parent_id": 1
},
{
"id": 8,
"name": "Meat",
"parent_id": 1
},
{
"id": 9,
"name": "Sea food",
"parent_id": 1
},
{
"id": 10,
"name": "Vegetables",
"parent_id": 1,
"children": [
{
"id": 14,
"name": "Local Vegetables",
"parent_id": 10
},
{
"id": 15,
"name": "Thai Vegetables",
"parent_id": 10
}
]
},
{
"id": 38,
"name": "Frozen",
"parent_id": 1
},
{
"id": 39,
"name": "IP Kitchen",
"parent_id": 1,
"children": [
{
"id": 40,
"name": "IP Meat",
"parent_id": 39
},
{
"id": 41,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 42,
"name": "IP Ingredients",
"parent_id": 39
},
{
"id": 43,
"name": "IP Sauce",
"parent_id": 39
},
{
"id": 44,
"name": "IP Seafood",
"parent_id": 39
},
{
"id": 45,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 46,
"name": "IP Desert",
"parent_id": 39
}
]
}
]
},
{
"id": 2,
"name": "Beverage",
"parent_id": 0,
"children": [
{
"id": 16,
"name": "Bar",
"parent_id": 2
},
{
"id": 17,
"name": "Coffee & Tea",
"parent_id": 2
},
{
"id": 18,
"name": "In Can",
"parent_id": 2
},
{
"id": 19,
"name": "Water",
"parent_id": 2
},
{
"id": 47,
"name": "IP Bar",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "Disposable",
"parent_id": 0,
"children": [
{
"id": 21,
"name": "Disposable",
"parent_id": 3
}
]
},
{
"id": 4,
"name": "SOE",
"parent_id": 0,
"children": [
{
"id": 20,
"name": "Cleaning Materials",
"parent_id": 4
},
{
"id": 22,
"name": "Chinaware",
"parent_id": 4
}
]
}
];
I get to all the nodes in the tree
function traverse(categories) {
categories.forEach(function (category) {
if (category.children && category.children.length) {
traverse(category.children);
}
else {
}
}, this);
}

You can use recursion and create a function using forEach loop.
var arr = [{"id":1,"name":"Food","parent_id":0,"children":[{"id":5,"name":"Dry Food Items","parent_id":1,"children":[{"id":11,"name":"Local Dry Food Items","parent_id":5},{"id":12,"name":"Thai Dry Food Items","parent_id":5},{"id":60,"name":"Others","parent_id":5}]},{"id":6,"name":"Fruits","parent_id":1},{"id":7,"name":"LG Branded","parent_id":1},{"id":8,"name":"Meat","parent_id":1},{"id":9,"name":"Sea food","parent_id":1},{"id":10,"name":"Vegetables","parent_id":1,"children":[{"id":14,"name":"Local Vegetables","parent_id":10},{"id":15,"name":"Thai Vegetables","parent_id":10}]},{"id":38,"name":"Frozen","parent_id":1},{"id":39,"name":"IP Kitchen","parent_id":1,"children":[{"id":40,"name":"IP Meat","parent_id":39},{"id":41,"name":"IP Starter","parent_id":39},{"id":42,"name":"IP Ingredients","parent_id":39},{"id":43,"name":"IP Sauce","parent_id":39},{"id":44,"name":"IP Seafood","parent_id":39},{"id":45,"name":"IP Starter","parent_id":39},{"id":46,"name":"IP Desert","parent_id":39}]}]},{"id":2,"name":"Beverage","parent_id":0,"children":[{"id":16,"name":"Bar","parent_id":2},{"id":17,"name":"Coffee & Tea","parent_id":2},{"id":18,"name":"In Can","parent_id":2},{"id":19,"name":"Water","parent_id":2},{"id":47,"name":"IP Bar","parent_id":2}]},{"id":3,"name":"Disposable","parent_id":0,"children":[{"id":21,"name":"Disposable","parent_id":3}]},{"id":4,"name":"SOE","parent_id":0,"children":[{"id":20,"name":"Cleaning Materials","parent_id":4},{"id":22,"name":"Chinaware","parent_id":4}]}]
function getNames(data) {
var result = [];
function loop(data, c) {
data.forEach(function (e) {
var name = !c.length ? e.name : c + '->' + e.name;
if (e.children) { loop(e.children, name); }
else {
result.push({ name: name });
}
});
}
loop(data, '');
return result;
}
console.log(getNames(arr))

How can i get the total count id of this collection using javascript?

I have this collection: https://graph.facebook.com/2playcz/albums
This collection contains 8 id. How can i get the total count id of this collection using javascript? (Total = 8)
Source:
{
"data": [
{
"id": "201936779932071",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tr\u00e9ninky",
"link": "https://www.facebook.com/album.php?fbid=201936779932071&id=190320081093741&aid=41883",
"cover_photo": "201937046598711",
"count": 8,
"type": "normal",
"created_time": "2012-07-02T09:33:43+0000",
"updated_time": "2012-09-15T12:05:44+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "1788805921",
"name": "Edita Nov\u00e1"
},
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/201936779932071/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "205206429605106",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Turnaje a akce",
"link": "https://www.facebook.com/album.php?fbid=205206429605106&id=190320081093741&aid=42900",
"cover_photo": "205208716271544",
"count": 14,
"type": "normal",
"created_time": "2012-07-10T19:36:53+0000",
"updated_time": "2012-09-15T12:04:05+0000",
"can_upload": false
},
{
"id": "221784994613916",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tenisova \u0161kolka 2play",
"description": "Tenisov\u00e1 \u0161kolka 2play",
"link": "https://www.facebook.com/album.php?fbid=221784994613916&id=190320081093741&aid=49379",
"cover_photo": "221785024613913",
"count": 9,
"type": "normal",
"created_time": "2012-08-31T11:19:59+0000",
"updated_time": "2012-09-14T15:17:53+0000",
"can_upload": false
},
{
"id": "203405996451816",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Webov\u00e9 fotografie - Logo",
"link": "https://www.facebook.com/album.php?fbid=203405996451816&id=190320081093741&aid=42285",
"cover_photo": "203406586451757",
"count": 11,
"type": "normal",
"created_time": "2012-07-05T10:12:40+0000",
"updated_time": "2012-09-14T15:16:40+0000",
"can_upload": false
},
{
"id": "190332361092513",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Cover Photos",
"link": "https://www.facebook.com/album.php?fbid=190332361092513&id=190320081093741&aid=39232",
"cover_photo": "225939404198475",
"count": 2,
"type": "normal",
"created_time": "2012-06-09T13:52:38+0000",
"updated_time": "2012-09-12T18:15:51+0000",
"can_upload": false
},
{
"id": "190802884378794",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Wall Photos",
"link": "https://www.facebook.com/album.php?fbid=190802884378794&id=190320081093741&aid=39324",
"cover_photo": "190802891045460",
"count": 2,
"type": "wall",
"created_time": "2012-06-10T13:19:48+0000",
"updated_time": "2012-07-17T17:16:19+0000",
"can_upload": false
},
{
"id": "205207126271703",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Ostatn\u00ed",
"link": "https://www.facebook.com/album.php?fbid=205207126271703&id=190320081093741&aid=42902",
"cover_photo": "205209679604781",
"count": 4,
"type": "normal",
"created_time": "2012-07-10T19:40:05+0000",
"updated_time": "2012-07-16T14:47:16+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/205207126271703/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "190320914426991",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Profile Pictures",
"link": "https://www.facebook.com/album.php?fbid=190320914426991&id=190320081093741&aid=39224",
"cover_photo": "190327474426335",
"count": 1,
"type": "profile",
"created_time": "2012-06-09T13:29:16+0000",
"updated_time": "2012-06-09T13:43:08+0000",
"can_upload": false
},
{
"id": "190322704426812",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Logo",
"description": "Loga spole\u010dnosti",
"link": "https://www.facebook.com/album.php?fbid=190322704426812&id=190320081093741&aid=39225",
"type": "normal",
"created_time": "2012-06-09T13:34:09+0000",
"updated_time": "2012-07-05T10:16:58+0000",
"can_upload": false
}
]
}

If you mean the count of items in the data array, it would just be data.length.

First of all, there 9 ids. If you want to count the number of elements in array there's a built-in property length. So that if your object is called x you retrieve the length of data by accessing x.data.length.
On the other hand, if you wanted to count the number of unique ids (IDs should by unique anyway, but if you really really wanted to) you have to manually iterate through the array and count them:
var countIds = function (arr) {
var uniqueIds = {}, num = 0;
if (!arr.data) return false;
arr.data.forEach(function (val, i) {
if (typeof uniqueIds[val.id] === "undefined") {
++num;
uniqueIds[val.id] = true;
}
});
return num;
};