AngularJS with Jquery Chosen Default Load - javascript

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>

Related

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\"}}"
}
]
}
}

Remove duplicate objects from an array but merge nested objects

Currently have an array of objects which contain game releases. However game releases can happen on multiple platforms and these appear as separate objects within the array. I'm looking to remove duplicate games by comparing the game id but merge the platforms object
I have tried using the reduce function which successfully removes duplicate objects by game id but I'm unable to adapt this to merge platforms
const filteredArr = data.reduce((acc, current) => {
const x = acc.find(item => item.game.id === current.game.id);
if (!x) {
return acc.concat([current]);
} else {
return acc;
}
}, []);
Current Array:
const data = [{
"id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {"id": 48, "name": "PlayStation 4"},
"region": 8,
"y": 2019
}, {
"id": 12,
"date": 1553212800,
"game": {
"id": 76832,
"name": "Spiderman",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {"id": 6, "name": "PC (Microsoft Windows)"},
"region": 8,
"y": 2019
}, {
"id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {"id": 48, "name": "Xbox"},
"region": 8,
"y": 2019
}]
Expected format after merge:
[{
"id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platforms": ["PlayStation", "Xbox"],
"region": 8,
"y": 2019
}, {
"id": 12,
"date": 1553212800,
"game": {
"id": 76832,
"name": "Spiderman",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platforms": ["Playstation"],
"region": 8,
"y": 2019
}]

You were really close, you just need to change the logic a bit. You can try something like the following; an example - https://repl.it/#EQuimper/ScaryBumpyCircle
const filteredArr = data.reduce((acc, current) => {
const x = acc.find(item => item.game.id === current.game.id);
if (!x) {
current.platform = [current.platform]
acc.push(current);
} else {
x.platform.push(current.platform);
}
return acc;
}, []);
The return value is
[
{
"id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": [
{
"id": 48,
"name": "PlayStation 4"
},
{
"id": 48,
"name": "Xbox"
}
],
"region": 8,
"y": 2019
},
{
"id": 12,
"date": 1553212800,
"game": {
"id": 76832,
"name": "Spiderman",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": [
{
"id": 6,
"name": "PC (Microsoft Windows)"
}
],
"region": 8,
"y": 2019
}
]
If you want to have just an array of platform strings, go with
const filteredArr = data.reduce((acc, current) => {
const x = acc.find(item => item.game.id === current.game.id);
if (!x) {
current.platform = [current.platform.name]
acc.push(current);
} else {
x.platform.push(current.platform.name);
}
return acc;
}, []);
And now the return value is
[
{
"id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": [
"PlayStation 4",
"Xbox"
],
"region": 8,
"y": 2019
},
{
"id": 12,
"date": 1553212800,
"game": {
"id": 76832,
"name": "Spiderman",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": [
"PC (Microsoft Windows)"
],
"region": 8,
"y": 2019
}
]

You could separate platform of the object and look if you have an object with the same id and add the platfor tho the array, of not create a new data set.
const
data = [{ id: 157283, date: 1553212800, game: { id: 76882, name: "Sekiro: Shadows Die Twice", popularity: 41.39190295640344 }, human: "2019-Mar-22", m: 3, platform: { id: 48, name: "PlayStation 4" }, region: 8, y: 2019 }, { id: 12, date: 1553212800, game: { id: 76832, name: "Spiderman", popularity: 41.39190295640344 }, human: "2019-Mar-22", m: 3, platform: { id: 6, name: "PC (Microsoft Windows)" }, region: 8, y: 2019 }, { id: 157283, date: 1553212800, game: { id: 76882, name: "Sekiro: Shadows Die Twice", popularity: 41.39190295640344 }, human: "2019-Mar-22", m: 3, platform: { id: 48, name: "Xbox" }, region: 8, y: 2019 }],
result = data.reduce((r, { platform, ...o }) => {
var temp = r.find(({ id }) => id === o.id);
if (!temp) r.push(temp = { ...o, platforms: [] });
temp.platforms.push(platform);
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Please take a look:
const data = [ { "id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {
"id": 48,
"name": "PlayStation 4"
},
"region": 8,
"y": 2019
},
{
"id": 12,
"date": 1553212800,
"game": {
"id": 76832,
"name": "Spiderman",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {
"id": 6,
"name": "PC (Microsoft Windows)"
},
"region": 8,
"y": 2019
},{ "id": 157283,
"date": 1553212800,
"game": {
"id": 76882,
"name": "Sekiro: Shadows Die Twice",
"popularity": 41.39190295640344
},
"human": "2019-Mar-22",
"m": 3,
"platform": {
"id": 48,
"name": "Xbox"
},
"region": 8,
"y": 2019
},
]
const filteredArr = data.reduce((acc, current) => {
const x = acc.find(item => item.game.id === current.game.id);
if (!x) {
current.platform = [current.platform.name]
return acc.concat([current]);
} else {
x.platform.push(current.platform.name);
return acc;
}
}, []);
console.log(filteredArr);

Here is another solution, using forEach instead of reduce. This makes use of a lookup hash that makes if faster for larger amounts of data then using find.
const data = [{"id": 157283, "date": 1553212800, "game": {"id": 76882, "name": "Sekiro: Shadows Die Twice", "popularity": 41.39190295640344}, "human": "2019-Mar-22", "m": 3, "platform": {"id": 48, "name": "PlayStation 4"}, "region": 8, "y": 2019}, {"id": 12, "date": 1553212800, "game": {"id": 76832, "name": "Spiderman", "popularity": 41.39190295640344}, "human": "2019-Mar-22", "m": 3, "platform": {"id": 6, "name": "PC (Microsoft Windows)"}, "region": 8, "y": 2019}, {"id": 157283, "date": 1553212800, "game": {"id": 76882, "name": "Sekiro: Shadows Die Twice", "popularity": 41.39190295640344}, "human": "2019-Mar-22", "m": 3, "platform": {"id": 48, "name": "Xbox"}, "region": 8, "y": 2019}];
let result = {};
data.forEach(({platform, ...release}) => {
release.platforms = [platform.name];
const releaseLookup = result[release.game.id];
if (!releaseLookup) {
result[release.game.id] = release;
} else {
releaseLookup.platforms.push(...release.platforms);
}
});
console.log(Object.values(result));

Using angularjs forEach loops

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);

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 to collect value in javascript?

I have an array like this in Javascript. Something like this
[
{
"id": 1,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 3,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
]
I want to collect data and grouping data facilities of the array in Javascript, something like this.
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
So, basically, group by facilities. I just don't know how to handle the grouping of similar facilities values.

Assuming the facility ids are unique:
const facilities = input.reduce((memo, entry) => {
entry.facilities.forEach((f) => {
if (!memo.some((m) => m.id === f.id)) {
memo.push(f)
}
})
return memo
}, [])

You can iterate through all rows and collect (id, entity) map.
Index map allows us to not search already collected entities every time.
Then you can convert it to an array with object keys mapping.
let input = [
{"id": 1, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"} ] },
{"id": 2, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"}, {"id": 13, "name": "Snack", "label": "Snack"} ] },
{"id": 3, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"}, {"id": 14, "name": "Petrol", "label": "Petrol"} ] }
];
let index = input.reduce((res, row) => {
row.facilities.forEach(f => res[f.id] = f);
return res;
}, {});
let result = Object.keys(index).map(id => index[id]);
console.log({facilities: result});

You could use a Set for flagging inserted objects with the given id.
var data = [{ id: 1, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }] }, { id: 2, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }, { id: 13, name: "Snack", label: "Snack" }] }, { id: 3, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }, { id: 14, name: "Petrol", label: "Petrol" }] }],
grouped = data.reduce(
(s => (r, a) => (a.facilities.forEach(b => !s.has(b.id) && s.add(b.id) && r.push(b)), r))(new Set),
[]
);
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }

The solution using Array.prototype.reduce() and Set object:
var data = [{"id": 1,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"}]},{"id": 2,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"},{"id": 13,"name": "Snack","label": "Snack"}]},{"id": 3,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"},{"id": 14,"name": "Petrol","label": "Petrol"}]}
];
var ids = new Set(),
result = data.reduce(function (r, o) {
o.facilities.forEach(function(v) { // iterating through nested `facilities`
if (!ids.has(v.id)) r.facilities.push(v);
ids.add(v.id); // saving only items with unique `id`
});
return r;
}, {facilities: []});
console.log(result);

const input = [
{
"id": 1,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 3,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
]
const result = []
const idx = []
for (const item of input) {
for (const facilityItem of item.facilities) {
if (!idx.includes(facilityItem.id)) {
idx.push(facilityItem.id)
result.push(facilityItem)
}
}
}
console.log(result)

A very simple and easily understood approach.
const data = [{
"id": 1,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 2,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
];
let o = {};
let result = [];
data.forEach((d) => {
d.facilities.forEach((f) => {
o[f.id] = f;
});
});
for (let r in o) {
result.push(o[r]);
}
console.log(result);

Categories

Resources