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\"}}"
}
]
}
}
Related
window.onload = function (){
$("#work_sanctioned_year").change();
};
$(document).ready(function(){
$("#work_sanctioned_year").change();
});
$("#work-sanctioned-year").change(function(){
var work_sanctioned_year = $(this).val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
});
when m selecting something from the dropdown its working. but when what m trying to do is call the function with the first value by default.I have tried both window.onload method and .ready function individually but still function is not getting called.. and also m not getting error in console related to this so this is making it harder to spot what actually is wrong over here
<script>
function work_sanctioned(){
console.log('onchange');
var work_sanctioned_year = $("#work-sanctioned-year").val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
}
</script>
and then called this on window.onload as well as on select property onchange
<select id="work-sanctioned-year" onChange="work_sanctioned()" style="max-width:40%;min-width:20%; margin:auto;">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
finally on window.onload
<script>
window.onload = function (){
work_sanctioned();
};
</script>
How can I create Scrollable X-axis using Fusioncharts? I'm trying to create a scrollbar like this for stacked bar and line graph combination.
Can I add scrollbar by using any inbuilt functions provided by Fusioncharts library?
Can someone please help me with a solution?
/StackOverflow didn't accepted my question, so I added this comment to the increase question length/
const dataSource = {
"chart": {
"subcaption": "2016 - 2021",
"syaxisname": "YoY growth in %",
"formatnumberscale": "0",
"numberprefix": "$",
"numbersuffix": "M",
"snumbersuffix": "%",
"showvalues": "0",
"plottooltext": "Market size for $seriesName in $label is <b>$dataValue</b>",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "2016"
},
{
"label": "2017"
},
{
"label": "2018"
},
{
"label": "2019"
},
{
"label": "2020"
}
]
}
],
"dataset": [
{
"seriesname": "RPA Software",
"data": [
{
"value": "73"
},
{
"value": "113"
},
{
"value": "153"
},
{
"value": "192"
},
{
"value": "232"
}
]
},
{
"seriesname": "RPA Services",
"data": [
{
"value": "198"
},
{
"value": "330"
},
{
"value": "476"
},
{
"value": "630"
},
{
"value": "790"
}
]
},
{
"seriesname": "YoY Growth",
"parentyaxis": "S",
"plottooltext": "$dataValue growth expected in $label",
"renderas": "line",
"data": [
{
"value": "73"
},
{
"value": "63"
},
{
"value": "42"
},
{
"value": "31"
},
{
"value": "24"
},
{
"value": "20"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "stackedcolumn3dlinedy",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
The chart which you are looking for is scrollcombidy2d
Here is a demo - http://jsfiddle.net/nqt410Lk/
const dataSource = {
"chart": {
"caption": "Analysing Subsidies by Youth Population",
"subcaption": "By province",
"yaxisname": "Population Count",
"syaxisname": "Subsidies % of Income",
"labeldisplay": "rotate",
"snumbersuffix": "%",
"scrollheight": "10",
"numvisibleplot": "10",
"drawcrossline": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Matzikama"
},
{
"label": "Cederberg"
},
{
"label": "Bergrivier"
},
{
"label": "Saldanha Bay"
},
{
"label": "Swartland"
},
{
"label": "Witzenberg"
},
{
"label": "Drakenstein"
},
{
"label": "Stellenbosch"
},
{
"label": "Breede Valley"
},
{
"label": "Langeberg"
},
{
"label": "Swellendam"
},
{
"label": "Theewaterskloof"
},
{
"label": "Overstrand"
},
{
"label": "Cape Agulhas"
},
{
"label": "Kannaland"
},
{
"label": "Hessequa"
},
{
"label": "Mossel Bay"
},
{
"label": "George"
},
{
"label": "Oudtshoorn"
},
{
"label": "Bitou"
},
{
"label": "Knysna"
},
{
"label": "Laingsburg"
},
{
"label": "Prince Albert"
},
{
"label": "Beaufort West"
}
]
}],
"dataset": [{
"seriesname": "Total Population",
"plottooltext": "Population: $dataValue",
"data": [{
"value": "71045"
},
{
"value": "52949"
},
{
"value": "67474"
},
{
"value": "111173"
},
{
"value": "133762"
},
{
"value": "130548"
},
{
"value": "280195"
},
{
"value": "173419"
},
{
"value": "176578"
},
{
"value": "105483"
},
{
"value": "40211"
},
{
"value": "117109"
},
{
"value": "93466"
},
{
"value": "36000"
},
{
"value": "24168"
},
{
"value": "54237"
},
{
"value": "94135"
},
{
"value": "208237"
},
{
"value": "97509"
},
{
"value": "59157"
},
{
"value": "73835"
},
{
"value": "8895"
},
{
"value": "14272"
},
{
"value": "51080"
}
]
},
{
"seriesname": "Youth",
"renderas": "area",
"showanchors": "0",
"plottooltext": "Youth: $dataValue",
"data": [{
"value": "24598"
},
{
"value": "18302"
},
{
"value": "22162"
},
{
"value": "40696"
},
{
"value": "47420"
},
{
"value": "49981"
},
{
"value": "97230"
},
{
"value": "73162"
},
{
"value": "60668"
},
{
"value": "34594"
},
{
"value": "12567"
},
{
"value": "39907"
},
{
"value": "30681"
},
{
"value": "11323"
},
{
"value": "7801"
},
{
"value": "15785"
},
{
"value": "31478"
},
{
"value": "72762"
},
{
"value": "32301"
},
{
"value": "21401"
},
{
"value": "27863"
},
{
"value": "3254"
},
{
"value": "5562"
},
{
"value": "19047"
}
]
},
{
"seriesname": "Subsidies received %",
"parentyaxis": "S",
"renderas": "line",
"plottooltext": "$dataValue subsidies received",
"showvalues": "0",
"data": [{
"value": "28.0"
},
{
"value": "35.2"
},
{
"value": "23.9"
},
{
"value": "11.8"
},
{
"value": "18.0"
},
{
"value": "26.9"
},
{
"value": "11.1"
},
{
"value": "11.2"
},
{
"value": "24.0"
},
{
"value": "18.9"
},
{
"value": "35.6"
},
{
"value": "37.9"
},
{
"value": "12.9"
},
{
"value": "27.6"
},
{
"value": "40.5"
},
{
"value": "19.9"
},
{
"value": "15.6"
},
{
"value": "28.2"
},
{
"value": "23.3"
},
{
"value": "26.2"
},
{
"value": "16.9"
},
{
"value": "41.9"
},
{
"value": "62.1"
},
{
"value": "31.2"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "scrollcombidy2d",
renderAt: "chart-container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource
}).render();
});
I am using GraphQl and below is my data
{
"data": {
"food": {
"category": [
{
"id": 4,
"name": "meat"
},
{
"id": 3,
"name": "brink"
},
{
"id": 2,
"name": "vegetable"
},
{
"id": 5,
"name": "bread"
},
{
"id": 1,
"name": "cookie"
},
{
"id": -1,
"name": "candy"
},
]
}
}
}
How can I sort this when I execute the query and the return data will be like below
{
"data": {
"food": {
"category": [
{
"id": -1,
"name": "candy"
},
{
"id": 1,
"name": "cookie"
},
{
"id": 2,
"name": "vegetable"
},
{
"id": 3,
"name": "brink"
},
{
"id": 4,
"name": "meat"
},
{
"id": 5,
"name": "bread"
},
]
}
}
}
I try
{
food {
category(orderBy: id_ASC){
id
name
}
}
}
but show
unknown argument "orderBy" on field "category" of type Food.
Anyone know how to do this?
Thanks.
I am getting this type of json in my $scope of angularjs:
$scope.someStuff = {
"id": 2,
"service": "bike",
"min": "22",
"per": "100",
"tax": "1",
"categoryservices": [
{
"id": 32,
"category": {
"id": 1,
"name": "software"
}
},
{
"id": 33,
"category": {
"id": 2,
"name": "hardware"
}
},
{
"id": 34,
"category": {
"id": 3,
"name": "waterwash"
}
}
]
}
I want to use angularjs forEach loop and i want to get only category name,
My expected output:
[{"name":"software"}, {"name":"hardware"}, {"name":"waterwash"}]
You can use Array.map()
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
$scope.someStuff.categoryservices.map((x) => { return { name: x.category.name}})
var obj = {
"id": 2,
"service": "bike",
"min": "22",
"per": "100",
"tax": "1",
"categoryservices": [{
"id": 32,
"category": {
"id": 1,
"name": "software"
}
},
{
"id": 33,
"category": {
"id": 2,
"name": "hardware"
}
},
{
"id": 34,
"category": {
"id": 3,
"name": "waterwash"
}
}
]
};
console.log(obj.categoryservices.map((x) => {
return {
name: x.category.name
}
}))
You can use map method by passing a callback function as parameter.
const someStuff = { "id": 2, "service": "bike", "min": "22", "per": "100", "tax": "1", "categoryservices": [ { "id": 32, "category": { "id": 1, "name": "software" } }, { "id": 33, "category": { "id": 2, "name": "hardware" } }, { "id": 34, "category": { "id": 3, "name": "waterwash" } } ] }
let array = someStuff.categoryservices.map(function({category}){
return {'name' : category.name}
});
console.log(array);
I'm using AngularJS and the jquery chosen plugin to populate a multiple select form. My Angular code has a service that is calling a node.js web service. The option list for the chosen select box is being populated from a json file while the value is being stored within model from the nodejs service. I've been using this link to guide me but now seem to be stuck.
I've included the code here.
My chosen options are being populated as such:
[
{"id": 1, "name": "00:00", "value": 0},
{"id": 2, "name": "00:15", "value": 900000},
{"id": 3, "name": "00:30", "value": 1800000}
...
]
But my model is being stored as:
meal.dinnerTimes = ["06:15","18:30"]
So when the model is loaded by the service and controller. The select box is always blank where I would expect to see
"06:15" and "18:30" already populated in this case
Any help would be appreciated
As you only have value with you while assigning model, use select as label for value in array syntax to have only value property assigned to the model.
Also note that you are not invoking callback function provided in MealSvc factory hence, value of model will never get set!
Plunker Demo
var app = angular.module("MealApp", ['MealService']);
var data = [{
"id": 1,
"name": "00:00",
"value": 0
}, {
"id": 2,
"name": "00:15",
"value": 900000
}, {
"id": 3,
"name": "00:30",
"value": 1800000
}, {
"id": 4,
"name": "00:45",
"value": 2700000
}, {
"id": 5,
"name": "01:00",
"value": 3600000
}, {
"id": 6,
"name": "01:15",
"value": 4500000
}, {
"id": 7,
"name": "01:30",
"value": 5400000
}, {
"id": 8,
"name": "01:45",
"value": 6300000
}, {
"id": 9,
"name": "02:00",
"value": 7200000
}, {
"id": 10,
"name": "02:15",
"value": 8100000
}, {
"id": 11,
"name": "02:30",
"value": 9000000
}, {
"id": 12,
"name": "02:45",
"value": 9900000
}, {
"id": 13,
"name": "03:00",
"value": 10800000
}, {
"id": 14,
"name": "03:15",
"value": 11700000
}, {
"id": 15,
"name": "03:30",
"value": 12600000
}, {
"id": 16,
"name": "03:45",
"value": 13500000
}, {
"id": 17,
"name": "04:00",
"value": 14400000
}, {
"id": 18,
"name": "04:15",
"value": 15300000
}, {
"id": 19,
"name": "04:30",
"value": 16200000
}, {
"id": 20,
"name": "04:45",
"value": 17100000
}, {
"id": 21,
"name": "05:00",
"value": 18000000
}, {
"id": 22,
"name": "05:15",
"value": 18900000
}, {
"id": 23,
"name": "05:30",
"value": 19800000
}, {
"id": 24,
"name": "05:45",
"value": 20700000
}, {
"id": 25,
"name": "06:00",
"value": 21600000
}, {
"id": 26,
"name": "06:15",
"value": 22500000
}, {
"id": 27,
"name": "06:30",
"value": 23400000
}, {
"id": 28,
"name": "06:45",
"value": 24300000
}, {
"id": 29,
"name": "07:00",
"value": 25200000
}, {
"id": 30,
"name": "07:15",
"value": 26100000
}, {
"id": 31,
"name": "07:30",
"value": 27000000
}, {
"id": 32,
"name": "07:45",
"value": 27900000
}, {
"id": 33,
"name": "08:00",
"value": 28800000
}, {
"id": 34,
"name": "08:15",
"value": 29700000
}, {
"id": 35,
"name": "08:30",
"value": 30600000
}, {
"id": 36,
"name": "08:45",
"value": 31500000
}, {
"id": 37,
"name": "09:00",
"value": 32400000
}, {
"id": 38,
"name": "09:15",
"value": 33300000
}, {
"id": 39,
"name": "09:30",
"value": 34200000
}, {
"id": 40,
"name": "09:45",
"value": 35100000
}, {
"id": 41,
"name": "10:00",
"value": 36000000
}, {
"id": 42,
"name": "10:15",
"value": 36900000
}, {
"id": 43,
"name": "10:30",
"value": 37800000
}, {
"id": 44,
"name": "10:45",
"value": 38700000
}, {
"id": 45,
"name": "11:00",
"value": 39600000
}, {
"id": 46,
"name": "11:15",
"value": 40500000
}, {
"id": 47,
"name": "11:30",
"value": 41400000
}, {
"id": 48,
"name": "11:45",
"value": 42300000
}, {
"id": 49,
"name": "12:00",
"value": 43200000
}, {
"id": 50,
"name": "12:15",
"value": 44100000
}, {
"id": 51,
"name": "12:30",
"value": 45000000
}, {
"id": 52,
"name": "12:45",
"value": 45900000
}, {
"id": 53,
"name": "13:00",
"value": 46800000
}, {
"id": 54,
"name": "13:15",
"value": 47700000
}, {
"id": 55,
"name": "13:30",
"value": 48600000
}, {
"id": 56,
"name": "13:45",
"value": 49500000
}, {
"id": 57,
"name": "14:00",
"value": 50400000
}, {
"id": 58,
"name": "14:15",
"value": 51300000
}, {
"id": 59,
"name": "14:30",
"value": 52200000
}, {
"id": 60,
"name": "14:45",
"value": 53100000
}, {
"id": 61,
"name": "15:00",
"value": 54000000
}, {
"id": 62,
"name": "15:15",
"value": 54900000
}, {
"id": 63,
"name": "15:30",
"value": 55800000
}, {
"id": 64,
"name": "15:45",
"value": 56700000
}, {
"id": 65,
"name": "16:00",
"value": 57600000
}, {
"id": 66,
"name": "16:15",
"value": 58500000
}, {
"id": 67,
"name": "16:30",
"value": 59400000
}, {
"id": 68,
"name": "16:45",
"value": 60300000
}, {
"id": 69,
"name": "17:00",
"value": 61200000
}, {
"id": 70,
"name": "17:15",
"value": 62100000
}, {
"id": 71,
"name": "17:30",
"value": 63000000
}, {
"id": 72,
"name": "17:45",
"value": 63900000
}, {
"id": 73,
"name": "18:00",
"value": 64800000
}, {
"id": 74,
"name": "18:15",
"value": 65700000
}, {
"id": 75,
"name": "18:30",
"value": 66600000
}, {
"id": 76,
"name": "18:45",
"value": 67500000
}, {
"id": 77,
"name": "19:00",
"value": 68400000
}, {
"id": 78,
"name": "19:15",
"value": 69300000
}, {
"id": 79,
"name": "19:30",
"value": 70200000
}, {
"id": 80,
"name": "19:45",
"value": 71100000
}, {
"id": 81,
"name": "20:00",
"value": 72000000
}, {
"id": 82,
"name": "20:15",
"value": 72900000
}, {
"id": 83,
"name": "20:30",
"value": 73800000
}, {
"id": 84,
"name": "20:45",
"value": 74700000
}, {
"id": 85,
"name": "21:00",
"value": 75600000
}, {
"id": 86,
"name": "21:15",
"value": 76500000
}, {
"id": 87,
"name": "21:30",
"value": 77400000
}, {
"id": 88,
"name": "21:45",
"value": 78300000
}, {
"id": 89,
"name": "22:00",
"value": 79200000
}, {
"id": 90,
"name": "22:15",
"value": 80100000
}, {
"id": 91,
"name": "22:30",
"value": 81000000
}, {
"id": 92,
"name": "22:45",
"value": 81900000
}, {
"id": 93,
"name": "23:00",
"value": 82800000
}, {
"id": 94,
"name": "23:15",
"value": 83700000
}, {
"id": 95,
"name": "23:30",
"value": 84600000
}, {
"id": 96,
"name": "23:45",
"value": 85500000
}];
app.directive('chosen', function() {
var linker = function(scope, element, attr) {
scope.$watch('availableTimes', function() {
element.triggerHandler('chosen:updated');
});
scope.$watch('MealSvc.get()', function() {
element.triggerHandler('chosen:updated');
});
element.chosen({
width: "95%"
});
};
return {
restrict: 'A',
link: linker
}
});
app.controller("MealCtrl", function MealCtrl($scope, $window, $http, MealSvc) {
$scope.times = [];
$scope.availableTimes = [];
$scope.fetchTimes = function() {
$scope.availableTimes = data;
}
$scope.fetchTimes();
MealSvc.get(function(res) {
$scope.times = res.dinnerTimes;
});
});
angular.module('MealService', []).factory('MealSvc', function($http) {
return {
get: function(response) {
response({
"name": "Second Tea",
"dinnerTimes": [46800000, 57600000]
})
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery#*"></script>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="MealApp" ng-controller="MealCtrl">
<div class="row">
<select data-placeholder="Select Dinner Time" multiple class="chzn-select" chosen ng-model="times" ng-options="times.value as times.name for times in availableTimes"></select>
</div>
</div>
</body>
</html>