Develop Reference

Nested Array Tree Node JS

I am comparing 2 arrays with the ID's and adding nested children objects to generate the tree.
if you look in the code comparing issue_id with descendents_parent_issue_id
I am able to generate the tree but a children is adding only 1 object. Expecting tree level nested objects.
Following Code Output
[{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"hierarchy_level": 1,
"children": [{
"issue_id": 7,
"parent_issue_id": 2,
"issue": "Breakdown",
"issue_code": "bd7catA",
"entity_id": null,
"hierarchy_level": 2,
"children": [{
"issue_id": 881,
"parent_issue_id": 7,
"issue": "Hydraulic arm failure",
"issue_code": null,
"entity_id": 52,
"hierarchy_level": 3
}]
}]
}, {
"issue_id": 1,
"parent_issue_id": null,
"issue": "Loading",
"issue_code": null,
"hierarchy_level": 1
}, {
"issue_id": 3,
"parent_issue_id": null,
"issue": "Performance",
"issue_code": null,
"hierarchy_level": 1
}, {
"issue_id": 4,
"parent_issue_id": null,
"issue": "Quality",
"issue_code": null,
"hierarchy_level": 1
}]
My Code
const issuesList = [
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 1,
"parent_issue_id": null,
"issue": "Loading",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 3,
"parent_issue_id": null,
"issue": "Performance",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 4,
"parent_issue_id": null,
"issue": "Quality",
"issue_code": null,
"hierarchy_level": 1
}
];
const issues = [{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 7,
"descendents_parent_issue_id": 2,
"descendents_issue": "Breakdown",
"descendents_issue_code": "bd7catA",
"descendents_entity_id": null,
"descendents_hierarchy_level": 2,
"descendents_issuesancestor_issues_issue_id": 7,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 881,
"descendents_parent_issue_id": 7,
"descendents_issue": "Hydraulic arm failure",
"descendents_issue_code": null,
"descendents_entity_id": 52,
"descendents_hierarchy_level": 3,
"descendents_issuesancestor_issues_issue_id": 881,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 8,
"descendents_parent_issue_id": 2,
"descendents_issue": "Setup/ Changeover",
"descendents_issue_code": "st8catA",
"descendents_entity_id": null,
"descendents_hierarchy_level": 2,
"descendents_issuesancestor_issues_issue_id": 8,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 942,
"descendents_parent_issue_id": 7,
"descendents_issue": "Pump Overload",
"descendents_issue_code": null,
"descendents_entity_id": 52,
"descendents_hierarchy_level": 3,
"descendents_issuesancestor_issues_issue_id": 942,
"descendents_issuesancestor_ancestor_issue_id": 2
}
];
function processIssues(arr, arrayB) {
return arr.reduce((result, item) => {
const itemInB = arrayB.find(itemB => itemB.descendents_parent_issue_id == item.issue_id)
if (itemInB) {
let child = [];
child.push({
issue_id: itemInB.descendents_issue_id,
parent_issue_id: itemInB.descendents_parent_issue_id,
issue: itemInB.descendents_issue,
issue_code: itemInB.descendents_issue_code,
entity_id: itemInB.descendents_entity_id,
hierarchy_level: itemInB.descendents_hierarchy_level
});
item.children = child;
}
if (item.children) {
processIssues(item.children, arrayB)
}
return [...result, item];
}, []);
}
var sourceIssue = processIssues(issuesList, issues);
console.log(JSON.stringify(sourceIssue));
Expected output
[{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"hierarchy_level": 1,
"children": [{
"issue_id": 7,
"parent_issue_id": 2,
"issue": "Breakdown",
"issue_code": "bd7catA",
"entity_id": null,
"hierarchy_level": 2,
"children": [{
"issue_id": 881,
"parent_issue_id": 7,
"issue": "Hydraulic arm failure",
"issue_code": null,
"entity_id": 52,
"hierarchy_level": 3
},{
"issue_id": 942,
"parent_issue_id": 7,
"issue": "Pump Overload",
"issue_code": null,
"entity_id": 52,
"hierarchy_level": 3
}]
}]
}, {
"issue_id": 1,
"parent_issue_id": null,
"issue": "Loading",
"issue_code": null,
"hierarchy_level": 1
}, {
"issue_id": 3,
"parent_issue_id": null,
"issue": "Performance",
"issue_code": null,
"hierarchy_level": 1
}, {
"issue_id": 4,
"parent_issue_id": null,
"issue": "Quality",
"issue_code": null,
"hierarchy_level": 1
}]
Please help

const issuesList = [
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 1,
"parent_issue_id": null,
"issue": "Loading",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 3,
"parent_issue_id": null,
"issue": "Performance",
"issue_code": null,
"hierarchy_level": 1
},
{
"issue_id": 4,
"parent_issue_id": null,
"issue": "Quality",
"issue_code": null,
"hierarchy_level": 1
}
];
const issues = [{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 7,
"descendents_parent_issue_id": 2,
"descendents_issue": "Breakdown",
"descendents_issue_code": "bd7catA",
"descendents_entity_id": null,
"descendents_hierarchy_level": 2,
"descendents_issuesancestor_issues_issue_id": 7,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 881,
"descendents_parent_issue_id": 7,
"descendents_issue": "Hydraulic arm failure",
"descendents_issue_code": null,
"descendents_entity_id": 52,
"descendents_hierarchy_level": 3,
"descendents_issuesancestor_issues_issue_id": 881,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 8,
"descendents_parent_issue_id": 2,
"descendents_issue": "Setup/ Changeover",
"descendents_issue_code": "st8catA",
"descendents_entity_id": null,
"descendents_hierarchy_level": 2,
"descendents_issuesancestor_issues_issue_id": 8,
"descendents_issuesancestor_ancestor_issue_id": 2
},
{
"issue_id": 2,
"parent_issue_id": null,
"issue": "Availability",
"issue_code": null,
"entity_id": null,
"hierarchy_level": 1,
"descendents_issue_id": 942,
"descendents_parent_issue_id": 7,
"descendents_issue": "Pump Overload",
"descendents_issue_code": null,
"descendents_entity_id": 52,
"descendents_hierarchy_level": 3,
"descendents_issuesancestor_issues_issue_id": 942,
"descendents_issuesancestor_ancestor_issue_id": 2
}
];
function processIssues(arr, arrayB) {
return arr.reduce((result, item) => {
const itemInB = arrayB.find(itemB => itemB.descendents_parent_issue_id == item.issue_id)
if (itemInB) {
let child = [];
child.push({
issue_id: itemInB.descendents_issue_id,
parent_issue_id: itemInB.descendents_parent_issue_id,
issue: itemInB.descendents_issue,
issue_code: itemInB.descendents_issue_code,
entity_id: itemInB.descendents_entity_id,
hierarchy_level: itemInB.descendents_hierarchy_level
});
item.children = processIssues(child, arrayB);
}
return [...result, item];
}, []);
}
var sourceIssue = processIssues(issuesList, issues);
console.log(JSON.stringify(sourceIssue));

Javascript: Map array with objects from another array and return computed array

This might seem trivial but I'm having a hard time figuring this out.
I have an array like below:
Array 1:
[
{
"id": 1,
"date": "2019-03-27",
"time": 1,
"max_tasks": 3,
"reservations": [
5,
2
]
},
{
"id": 2,
"date": "2019-03-28",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 3,
"date": "2019-03-29",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 4,
"date": "2019-03-30",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 5,
"date": "2019-03-31",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 6,
"date": "2019-04-01",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 7,
"date": "2019-04-02",
"time": 1,
"max_tasks": 3,
"reservations": [
3
]
}
]
Here the reservations contains id for which i need to use another array as shown below:
Array 2:
[
{
"id": 5,
"app": 1,
"comment": "test 5"
},
{
"id": 2,
"app": 1,
"comment": "test 2"
}
]
Expected:
I need a way to include Array 2 data inside Array 1 where I use the id from reservations of Array 1 and pull the corresponding object from Array 2. Finally I need to return Array 1 with these objects added from Array 2 .
I'm using Vue and hope to get this array computed in getters so I can get this in my component and map there directly. If there are any better ways of doing this I'm open to any suggestions
This is what I'm trying to get as output:
`
[
{
'id': 1,
'date': '2019-03-27',
'time': 1,
'max_tasks': 3,
'reservations': [
{
'id': 5,
'app': 1,
'comment': 'test 5'
},
{
'id': 2,
'app': 1,
'comment': 'test 2'
}
]
},
{
'id': 2,
'date': '2019-03-28',
'time': 1,
'max_tasks': 3,
'reservations': []
},
{
'id': 3,
'date': '2019-03-29',
'time': 1,
'max_tasks': 3,
'reservations': []
},
{
'id': 4,
'date': '2019-03-30',
'time': 1,
'max_tasks': 3,
'reservations': []
},
{
'id': 5,
'date': '2019-03-31',
'time': 1,
'max_tasks': 3,
'reservations': []
},
{
'id': 6,
'date': '2019-04-01',
'time': 1,
'max_tasks': 3,
'reservations': []
},
{
'id': 7,
'date': '2019-04-02',
'time': 1,
'max_tasks': 3,
'reservations': [
3
]
}
]
`
Thanks for your time.

It may not be the best solution but give it a try.
let arr1 = [{
"id": 1,
"date": "2019-03-27",
"time": 1,
"max_tasks": 3,
"reservations": [
5,
2
]
},
{
"id": 2,
"date": "2019-03-28",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 3,
"date": "2019-03-29",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 4,
"date": "2019-03-30",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 5,
"date": "2019-03-31",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 6,
"date": "2019-04-01",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 7,
"date": "2019-04-02",
"time": 1,
"max_tasks": 3,
"reservations": [
3
]
}
]
let arr2 = [{
"id": 5,
"app": 1,
"comment": "test 5"
},
{
"id": 2,
"app": 1,
"comment": "test 2"
}
]
arr1.forEach(o => {
let updatedReverations = []
o.reservations.forEach(r => {
updatedReverations.push(arr2.filter(a2 => r === a2.id)[0] || r)
})
o.reservations = updatedReverations
})
console.log(arr1)

perhaps this works
var arr1 = [
{
"id": 1,
"date": "2019-03-27",
"time": 1,
"max_tasks": 3,
"reservations": [
5,
2
]
},
{
"id": 2,
"date": "2019-03-28",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 3,
"date": "2019-03-29",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 4,
"date": "2019-03-30",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 5,
"date": "2019-03-31",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 6,
"date": "2019-04-01",
"time": 1,
"max_tasks": 3,
"reservations": []
},
{
"id": 7,
"date": "2019-04-02",
"time": 1,
"max_tasks": 3,
"reservations": [
3
]
}
]
var arr2 = [
{
"id": 5,
"app": 1,
"comment": "test 5"
},
{
"id": 2,
"app": 1,
"comment": "test 2"
}
]
for (var i = 0; i != arr1.length; ++i) {
arr1[i].reservations = arr1[i].reservations.map(id => {
var reservation = arr2.find(reservation => reservation.id == id)
return reservation || id;
});
}
It will try to find reservation in array 2 if not it will not replace the id.

below function will give you new copy of merged array.
function getMergedArray(arr1,arr2){
return arr1.map(item=>{
if(item.reservations.length>0){
let newReservations= item.reservations.map(reservationId=>{
let foundReservation = arr2.find(reservation=>{
return reservation.id === reservationId
})
if(foundReservation){
return foundReservation;
}
else{
return reservationId;
}
})
item.reservations = newReservations;
}
return item;
});
}

Need to implement an algorithm to obtain the average value of the fields of the graph structure( graph tree)

I have such a task, please help with the solution!
There are graph nodes which have objects.
Please help me find the average value of the 'val' fields and the node with the minimum value of the 'val' field
Example graph structure(graph tree) Also i need implement this on JavaScript. Thank You very Match
var graph_structure = {
val: 74,
child: [{
val: 17,
child: [{
val: 34,
child: [{
val: 34,
child: [{
val: 65,
child: [{
val: 28,
child: [{val: 85},
{
val: 30,
child: [{val: 68},
{
val: 10,
child: [{
val: 100,
child: [{
val: 21,
child: [{val: 21},
{val: 64}]
},
{
val: 86
}
]
}
]
}
]
}
]
},
]
},
{
val: 22,
child: [{
val: 17,
child: [{val: 65}]
}]
}]
},
{
val: 53,
child: [{
val: 3,
child: [{
val: 98,
child: [{
val: 90,
child: [{
val: 76,
child: [{
val: 87,
child: [{
val: 52,
child: [{val: 56}]
}]
},
{val: 47},
{
val: 40,
child: [{
val: 80,
child: [{val: 34}]
},
{
val: 23,
child: [{val: 47},
{val: 92}]
},
{
val: 98,
child: [{val: 89},
{val: 16},
{val: 10}]
}]
}]
},
]
},
{
val: 35,
child: [{
val: 89,
child: [{
val: 76,
child: [{
val: 50,
child: [{val: 51},
{val: 90}]
},
{
val: 69,
child: [{val: 93},
{val: 98},
{val: 62}]
}]
}]
}]
}]
}]
},
]
}
]
}]
},
{
val: 98,
child: [{val: 85},
{
val: 85,
child: [{
val: 58,
child: [{
val: 81,
child: [{
val: 36,
child: [{
val: 45,
child: [{
val: 96,
child: [{
val: 15,
child: [{
val: 11,
child: [{val: 96}]
}]
},
{
val: 48,
child: [{
val: 4,
child: [{val: 74},
{val: 1}]
},
{val: 7}]
}]
},
{
val: 84,
child: [{val: 9},
{
val: 81,
child: [{
val: 10,
child: [{val: 67}]
}]
}]
}]
},
{
val: 85,
child: [{val: 53},
{
val: 7,
child: [{
val: 47,
child: [{
val: 74,
child: [{val: 30},
{val: 7},
{val: 12}]
},
{val: 22}]
},
{
val: 56,
child: [{
val: 51,
child: [{val: 45}]
},
{
val: 54,
child: [{val: 20},
{val: 62}]
}]
}]
}]
}]
}]
},
]
},
{
val: 62,
child: [{
val: 36,
child: [{
val: 39,
child: [{val: 20}]
},
{
val: 10,
child: [{
val: 91,
child: [{
val: 81,
child: [{
val: 59,
child: [{
val: 19,
child: [{val: 59},
{val: 16}]
},
{
val: 35,
child: [{val: 30}]
},
{
val: 6,
child: [{val: 27}]
}]
},
{
val: 89,
child: [{
val: 60,
child: [{val: 59}]
}]
}]
}]
},
]
}]
},
]
},
]
},
]
},
{
val: 8,
child: [{
val: 56,
child: [{
val: 55,
child: [{
val: 41,
child: [{
val: 17,
child: [{
val: 15,
child: [{
val: 40,
child: [{
val: 55,
child: [{val: 50},
{
val: 99,
child: [{val: 86},
{val: 90}]
}]
}]
},
{
val: 85,
child: [{
val: 36,
child: [{
val: 39,
child: [{val: 45}]
}]
}]
},
{
val: 78,
child: [{
val: 24,
child: [{
val: 93,
child: [{val: 8}]
},
{
val: 26,
child: [{val: 5}]
}]
},
{val: 36}]
}]
},
{val: 13}]
},
]
},
{
val: 10,
child: [{
val: 0,
child: [{
val: 77,
child: [{
val: 46,
child: [{
val: 72,
child: [{
val: 17,
child: [{val: 10},
{val: 67}]
},
{val: 48},
{val: 60}]
},
{
val: 98,
child: [{
val: 12,
child: [{val: 61},
{val: 27}]
}]
}]
}]
},
]
}
]
}
]
}
]
}
]
}
]};

You could create recursive function with for...in loop and first calculate total sum and total number of nodes and then use those 2 values to calculate average.
var graph_structure = {"val":74,"child":[{"val":17,"child":[{"val":34,"child":[{"val":34,"child":[{"val":65,"child":[{"val":28,"child":[{"val":85},{"val":30,"child":[{"val":68},{"val":10,"child":[{"val":100,"child":[{"val":21,"child":[{"val":21},{"val":64}]},{"val":86}]}]}]}]}]},{"val":22,"child":[{"val":17,"child":[{"val":65}]}]}]},{"val":53,"child":[{"val":3,"child":[{"val":98,"child":[{"val":90,"child":[{"val":76,"child":[{"val":87,"child":[{"val":52,"child":[{"val":56}]}]},{"val":47},{"val":40,"child":[{"val":80,"child":[{"val":34}]},{"val":23,"child":[{"val":47},{"val":92}]},{"val":98,"child":[{"val":89},{"val":16},{"val":10}]}]}]}]},{"val":35,"child":[{"val":89,"child":[{"val":76,"child":[{"val":50,"child":[{"val":51},{"val":90}]},{"val":69,"child":[{"val":93},{"val":98},{"val":62}]}]}]}]}]}]}]}]}]},{"val":98,"child":[{"val":85},{"val":85,"child":[{"val":58,"child":[{"val":81,"child":[{"val":36,"child":[{"val":45,"child":[{"val":96,"child":[{"val":15,"child":[{"val":11,"child":[{"val":96}]}]},{"val":48,"child":[{"val":4,"child":[{"val":74},{"val":1}]},{"val":7}]}]},{"val":84,"child":[{"val":9},{"val":81,"child":[{"val":10,"child":[{"val":67}]}]}]}]},{"val":85,"child":[{"val":53},{"val":7,"child":[{"val":47,"child":[{"val":74,"child":[{"val":30},{"val":7},{"val":12}]},{"val":22}]},{"val":56,"child":[{"val":51,"child":[{"val":45}]},{"val":54,"child":[{"val":20},{"val":62}]}]}]}]}]}]}]},{"val":62,"child":[{"val":36,"child":[{"val":39,"child":[{"val":20}]},{"val":10,"child":[{"val":91,"child":[{"val":81,"child":[{"val":59,"child":[{"val":19,"child":[{"val":59},{"val":16}]},{"val":35,"child":[{"val":30}]},{"val":6,"child":[{"val":27}]}]},{"val":89,"child":[{"val":60,"child":[{"val":59}]}]}]}]}]}]}]}]}]},{"val":8,"child":[{"val":56,"child":[{"val":55,"child":[{"val":41,"child":[{"val":17,"child":[{"val":15,"child":[{"val":40,"child":[{"val":55,"child":[{"val":50},{"val":99,"child":[{"val":86},{"val":90}]}]}]},{"val":85,"child":[{"val":36,"child":[{"val":39,"child":[{"val":45}]}]}]},{"val":78,"child":[{"val":24,"child":[{"val":93,"child":[{"val":8}]},{"val":26,"child":[{"val":5}]}]},{"val":36}]}]},{"val":13}]}]},{"val":10,"child":[{"val":0,"child":[{"val":77,"child":[{"val":46,"child":[{"val":72,"child":[{"val":17,"child":[{"val":10},{"val":67}]},{"val":48},{"val":60}]},{"val":98,"child":[{"val":12,"child":[{"val":61},{"val":27}]}]}]}]}]}]}]}]}]}]}
function calc(data) {
return (function repeat(data, res) {
for(let i in data) {
if(data.val) {
res.nodes++;
res.total += data.val
if(!res.min) res.min = data
else if(res.min.val > data.val) res.min = data
}
if(typeof data[i] == 'object') repeat(data[i], res)
}
return res
})(data, {min: null, nodes: 0, total: 0})
}
let res = calc(graph_structure);
res.avg = res.total / res.nodes;
console.log(res)

how to create jquery variables from json file?

Any help is very much appreciated.
Basically I am using an api from mashape, but I'm a bit of a newbie to JSON files.
What I want to do is create a load of jquery variables for each teams total points.
Bare in mind that the teams change position in the JSON file depending on their position in the table.
Below is my jquery code so far (without the auth code) and the JSON file.
$.ajax({
url: 'https://heisenbug-premier-league-live-scores-v1.p.mashape.com/api/premierleague/table',
type: 'GET',
data: {},
dataType: 'json',
success: function(data) {
$(data.records).each(function(index, value) {
});
console.dir((data.source));
},
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization",
"Auth Code");
}
});
And the JSON file.
{
"records": [
{
"team": "Manchester City",
"played": 10,
"win": 8,
"draw": 0,
"loss": 2,
"goalsFor": 29,
"goalsAgainst": 12,
"points": 24
},
{
"team": "Arsenal",
"played": 10,
"win": 7,
"draw": 2,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 6,
"points": 23
},
{
"team": "Tottenham",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 18,
"goalsAgainst": 7,
"points": 19
},
{
"team": "Leicester",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 13,
"points": 19
},
{
"team": "Manchester United",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 12,
"goalsAgainst": 4,
"points": 19
},
{
"team": "West Ham",
"played": 10,
"win": 4,
"draw": 4,
"loss": 2,
"goalsFor": 16,
"goalsAgainst": 12,
"points": 16
},
{
"team": "Liverpool",
"played": 9,
"win": 4,
"draw": 3,
"loss": 2,
"goalsFor": 11,
"goalsAgainst": 11,
"points": 15
},
{
"team": "Norwich",
"played": 10,
"win": 4,
"draw": 3,
"loss": 3,
"goalsFor": 12,
"goalsAgainst": 10,
"points": 15
},
{
"team": "Southampton",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 17,
"goalsAgainst": 13,
"points": 14
},
{
"team": "Chelsea",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 15,
"goalsAgainst": 14,
"points": 14
},
{
"team": "West Bromwich Albion",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 14,
"goalsAgainst": 17,
"points": 14
},
{
"team": "Crystal Palace",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 12,
"points": 14
},
{
"team": "Watford",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 11,
"goalsAgainst": 10,
"points": 14
},
{
"team": "Stoke",
"played": 9,
"win": 4,
"draw": 1,
"loss": 4,
"goalsFor": 10,
"goalsAgainst": 9,
"points": 13
},
{
"team": "Swansea",
"played": 10,
"win": 3,
"draw": 4,
"loss": 3,
"goalsFor": 9,
"goalsAgainst": 12,
"points": 13
},
{
"team": "Everton",
"played": 11,
"win": 3,
"draw": 4,
"loss": 4,
"goalsFor": 23,
"goalsAgainst": 20,
"points": 13
},
{
"team": "Sunderland",
"played": 10,
"win": 3,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 11,
"points": 11
},
{
"team": "Bournemouth",
"played": 9,
"win": 2,
"draw": 4,
"loss": 3,
"goalsFor": 10,
"goalsAgainst": 13,
"points": 10
},
{
"team": "Newcastle United",
"played": 10,
"win": 2,
"draw": 4,
"loss": 4,
"goalsFor": 14,
"goalsAgainst": 14,
"points": 10
},
{
"team": "Aston Villa",
"played": 9,
"win": 0,
"draw": 3,
"loss": 6,
"goalsFor": 6,
"goalsAgainst": 13,
"points": 3
}
]
}
Thank You Very Much!

To create an object and add the total points for each team, you'll need to create a map (key/value) where the key is each team's name and the value is the total points for each team.
I'm hosting your data on MyJSON.
Here's a function that retrieves the data from the remote server, and initializes an object containing the total points for each team:
function getData() {
// https://api.myjson.com/bins/1c6utx
var teamScores = {};
$.get("https://api.myjson.com/bins/1c6utx", function(data, status){
$.each(data.records, function(index, value) {
if (!teamScores[value.team]) {
teamScores[value.team] = 0;
}
teamScores[value.team] += value.points;
});
console.log(JSON.stringify(teamScores));
});
}
/* Output:
{"Manchester City":24,"Arsenal":23,"Tottenham":19,"Leicester":19,"Manchester United":19,"West Ham":16,"Liverpool":15,"Norwich":15,"Southampton":14,"Chelsea":14,"West Bromwich Albion":14,"Crystal Palace":14,"Watford":14,"Stoke":13,"Swansea":13,"Everton":13,"Sunderland":11,"Bournemouth":10,"Newcastle United":10,"Aston Villa":3}
*/
You can check this fiddle to see it in action. Hope this helps!

data-ng-change does not work after set selectedIndex property

var app = angular.module('app', []);
app.controller('appController', ['$scope', function($scope) {
$scope.allTheme = [{
"theme_id": 2,
"productData": [{
"store_id": 1,
"product_id": 3,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FD",
}, {
"store_id": 1,
"product_id": 4,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FE"
}, {
"store_id": 1,
"product_id": 8,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - QS",
}]
}, {
"theme_id": 5,
"productData": [{
"store_id": 1,
"product_id": 99,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FD"
}, {
"store_id": 1,
"product_id": 100,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FE"
}, {
"store_id": 1,
"product_id": 101,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - QS"
}]
}, {
"theme_id": 7,
"productData": [{
"store_id": 1,
"product_id": 129,
"style_id": 1,
"size_id": 3,
"theme_id": 7,
"name": "Nautical"
}]
}, {
"theme_id": 10,
"productData": [{
"store_id": 1,
"product_id": 12,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FD"
}, {
"store_id": 1,
"product_id": 13,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FE"
}, {
"store_id": 1,
"product_id": 17,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - QS"
}]
}];
$scope.targetField = null;
$scope.selectBoxClick = function($event) {
if ($event.target === null) {
return;
}
$scope.targetField = $event.target;
}
$scope.changeTheme = function(theme, selectedProducts) {
console.log("chagne Theme");
if ($scope.targetField) {
$scope.activeTheme = theme;
if (selectedProducts) {
$scope.isSizedAndThemeSelected = true;
var targetSelect_ = $($scope.targetField);
$scope.targetField = null;
targetSelect_.closest(".owl-item").siblings().each(function() {
if ($(this).find("select").length) {
var option = $(this).find("select option").eq(0);
//$(this).find("select").selectbox("change", option.attr('value'), option.html());
var select_ = $(this).find("select");
select_.val(option.attr('value'));
select_.prop('selectedIndex',0);
}
})
} else {
$scope.isSizedAndThemeSelected = false;
$scope.activeTheme = {};
}
}
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://project-progress.net/projects/kodak-express-local-angular/js/jquery.selectbox-0.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="appController">
<div data-ng-repeat="theme in allTheme" style="width:500px;" class="owl-item">
<div class="select-box" data-ng-if="theme.productData.length > 1">
<!--<select class="customSelect" data-ng-model="theme.SelectedProduct" data-ng-click="selectBoxClick($event)" data-ng-change="changeTheme(theme, theme.SelectedProduct)">
<option value="">Select an option</option>
<option data-custom-select-item data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
</select>-->
<select data-ng-model="theme.SelectedProduct" data-ng-click="selectBoxClick($event)" data-ng-change="changeTheme(theme, theme.SelectedProduct)">
<option value="">Select an option</option>
<option data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
</select>
</div>
</div>
</div>
</div>
If I select 'Boy - FD' from the first select box option and after second select box option, choose 'boy-fed' in both can function fire, but again, select first selectbox 'Boy-FD' option than can function does not work. thanks in advance.

The reason why your dropdowns are not working properly is because when you update the DOM directly then your data models linked with "data-ng-model" dont get updated, because you updated the dropdowns outside of angular's digest cycle.
Here is how i got your dropdowns to work with angular, i hope this helps.
var app = angular.module('app', []);
app.controller('appController', ['$scope', function($scope) {
$scope.allTheme = [{
"theme_id": 2,
"productData": [{
"store_id": 1,
"product_id": 3,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FD",
}, {
"store_id": 1,
"product_id": 4,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FE"
}, {
"store_id": 1,
"product_id": 8,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - QS",
}]
}, {
"theme_id": 5,
"productData": [{
"store_id": 1,
"product_id": 99,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FD"
}, {
"store_id": 1,
"product_id": 100,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FE"
}, {
"store_id": 1,
"product_id": 101,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - QS"
}]
}, {
"theme_id": 7,
"productData": [{
"store_id": 1,
"product_id": 129,
"style_id": 1,
"size_id": 3,
"theme_id": 7,
"name": "Nautical"
}]
}, {
"theme_id": 10,
"productData": [{
"store_id": 1,
"product_id": 12,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FD"
}, {
"store_id": 1,
"product_id": 13,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FE"
}, {
"store_id": 1,
"product_id": 17,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - QS"
}]
}];
$scope.changeTheme = function(theme) {
console.log("change Theme");
$scope.activeTheme = theme;
angular.forEach($scope.allTheme, function(item, index) {
if (item.SelectedProduct != theme.SelectedProduct) {
item.SelectedProduct = "";
}
});
console.log(theme.SelectedProduct);
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://project-progress.net/projects/kodak-express-local-angular/js/jquery.selectbox-0.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="appController">
<div data-ng-repeat="theme in allTheme" style="width:500px;" class="owl-item">
<div class="select-box" data-ng-if="theme.productData.length > 1">
<select data-ng-model="theme.SelectedProduct" data-ng-change="changeTheme(theme)">
<option value="">Select an option</option>
<option data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
</select>
</div>
</div>
</div>
</div>