Javascript console error elem.find() is not a function - javascript

I am working on learning to make jQuery plugins and made the following plugin, forgive me for the wall of code:
$.fn.addressForm = function () {
return this.each(function () {
var elem = $(this);
$.each(elem.find(".addr-country select"), function ( elem ) {
$(this).on('change', function (elem ) {
// var elem = $(this).parents(".form-address");
if ($(this).val() === "US") {
elem.find(".addr-state label").html("State"); // eror gets thrown about this line
elem.find(".addr-postal-code label").html("Zip");
elem.find(".addr-street-1").show();
elem.find(".addr-street-2").show();
elem.find(".addr-city").show();
elem.find(".addr-state").show();
elem.find(".addr-postal-code").show();
var states = [
{ text: "AL", value: "AL" },
{ text: "AK", value: "AK" },
{ text: "AZ", value: "AZ" },
{ text: "AR", value: "AR" },
{ text: "CA", value: "CA" },
{ text: "CO", value: "CO" },
{ text: "CT", value: "CT" },
{ text: "DE", value: "DE" },
{ text: "FL", value: "FL" },
{ text: "GA", value: "GA" },
{ text: "HI", value: "HI" },
{ text: "ID", value: "ID" },
{ text: "IL", value: "IL" },
{ text: "IN", value: "IN" },
{ text: "IA", value: "IA" },
{ text: "KS", value: "KS" },
{ text: "KY", value: "KY" },
{ text: "LA", value: "LA" },
{ text: "ME", value: "ME" },
{ text: "MD", value: "MD" },
{ text: "MA", value: "MA" },
{ text: "MI", value: "MI" },
{ text: "MN", value: "MN" },
{ text: "MS", value: "MS" },
{ text: "MO", value: "MO" },
{ text: "MT", value: "MT" },
{ text: "NE", value: "NE" },
{ text: "NV", value: "NV" },
{ text: "NH", value: "NH" },
{ text: "NJ", value: "NJ" },
{ text: "NM", value: "NM" },
{ text: "NY", value: "NY" },
{ text: "NC", value: "NC" },
{ text: "ND", value: "ND" },
{ text: "OH", value: "OH" },
{ text: "OK", value: "OK" },
{ text: "OR", value: "OR" },
{ text: "PA", value: "PA" },
{ text: "RI", value: "RI" },
{ text: "SC", value: "SC" },
{ text: "SD", value: "SD" },
{ text: "TN", value: "TN" },
{ text: "TX", value: "TX" },
{ text: "UT", value: "UT" },
{ text: "VT", value: "CT" },
{ text: "VA", value: "VA" },
{ text: "WA", value: "WA" },
{ text: "WV", value: "WV" },
{ text: "WI", value: "WI" },
{ text: "WY", value: "WY" },
{ text: "D.C.", value: "D.C." }
];
elem.find(".addr-state select").empty();
$.each(states, function (index, value) {
var o = new Option(value.text, value.value);
$(o).html(value.text);
elem.find(".addr-state select").append(o);
});
}
if ($(this).val() === "CA") {
// Update labels
elem.find(".addr-state label").html("Province");
elem.find(".addr-postal-code label").html("Postal Code");
// Show fields
elem.find(".addr-street-1").show();
elem.find(".addr-street-2").show();
elem.find(".addr-city").show();
elem.find(".addr-state").show();
elem.find(".addr-postal-code").show();
var states = [
{ text: "AB", value: "AB" },
{ text: "BC", value: "BC" },
{ text: "MB", value: "MB" },
{ text: "NB", value: "NB" },
{ text: "NL", value: "NL" },
{ text: "NS", value: "NS" },
{ text: "ON", value: "ON" },
{ text: "PE", value: "PE" },
{ text: "QC", value: "QC" },
{ text: "SK", value: "SK" },
{ text: "NT", value: "NT" },
{ text: "NU", value: "NU" },
{ text: "YT", value: "YT" }
];
// Reset state options
elem.find(".addr-state select").empty();
$.each(states, function (index, value) {
var o = new Option(value.text, value.value);
$(o).html(value.text);
elem.find(".addr-state select").append(o);
});
}
})
});
})
}
For some reason passing in elem to the on change function is not getting recognized. If I were to un-comment the line that says var elem = $(this).parents(".form-address"); it works fine. But I need the $(this) instance of the original selected element to be used, not a specific class. What am I doing wrong?

Related

How to merge map result in to one array objects?

The object result restructuring function works fine at the same time the map result not coming in one array group.
console.clear();
const filterList = {
ageRange: ["ageRange", "picAgeRange"],
goal: ["goal", "motivation"],
hairColor: ["hairColor", "picHairColor"]
};
const questionList = [{
question: "ageRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "18-30",
selected: true
},
{
value: "31-35",
selected: false
},
{
value: "36-45",
selected: false
},
{
value: "46-55",
selected: false
},
{
value: "55+",
selected: false
}
]
},
{
question: "picAgeRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "country 6",
selected: true
},
{
value: "smart casual 4",
selected: false
},
{
value: "dark denim 6",
selected: false
},
{
value: "sporty 6",
selected: false
},
{
value: "adventure 5",
selected: false
},
{
value: "prints 5",
selected: false
},
{
value: "excentric 5",
selected: false
},
{
value: "dont like any private style",
selected: false
}
]
},
{
question: "goal",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "save time",
selected: true
},
{
value: "personal advice",
selected: false
},
{
value: "inspiration",
selected: false
},
{
value: "testing the service",
selected: false
}
]
},
{
question: "hairColor",
lastUpdated: "2018-07-09T18:13:49.567",
info: null,
type: "SELECT",
answers: [{
value: "blond",
selected: true
},
{
value: "brown",
selected: false
},
{
value: "black",
selected: false
},
{
value: "red",
selected: false
},
{
value: "grey",
selected: false
},
{
value: "noHair",
selected: false
}
]
},
{
question: "picHairColor",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "suit 3",
selected: true
},
{
value: "business casual",
selected: false
},
{
value: "casual",
selected: false
},
{
value: "have to wear uniform",
selected: false
},
{
value: "classic",
selected: false
},
{
value: "conservative",
selected: false
},
{
value: "relaxed 2",
selected: false
},
{
value: "dont like any work style",
selected: false
}
]
}
];
const ofQuestionsList = Object.entries(filterList).map(
([questionKey, questionNames]) => {
return {
[questionKey]: questionList.filter((item) =>
questionNames.includes(item.question)
)
};
}
);
console.log(ofQuestionsList);
The existing result is
[
{
"ageRange": [
{
"question": "ageRange",
"lastUpdated": "2018-07-09T18:13:42.541",
"info": null,
"type": "SELECT"
},
{
"question": "picAgeRange",
"lastUpdated": "2018-07-09T18:13:42.541",
"info": null,
"type": "SELECT"
}
]
},
{
"goal": [
{
"question": "goal",
"lastUpdated": "2018-07-09T18:13:42.541",
"info": null,
"type": "SELECT"
}
]
},
{
"hairColor": [
{
"question": "hairColor",
"lastUpdated": "2018-07-09T18:13:49.567",
"info": null,
"type": "SELECT"
},
{
"question": "picHairColor",
"lastUpdated": "2018-07-09T18:13:42.541",
"info": null,
"type": "SELECT"
}
]
}
]
The expecting result is
{
"ageRange":[
{
"question":"ageRange",
"lastUpdated":"2018-07-09T18:13:42.541",
"info":null,
"type":"SELECT"
},
{
"question":"picAgeRange",
"lastUpdated":"2018-07-09T18:13:42.541",
"info":null,
"type":"SELECT"
}
],
"goal":[
{
"question":"goal",
"lastUpdated":"2018-07-09T18:13:42.541",
"info":null,
"type":"SELECT"
}
],
"hairColor":[
{
"question":"hairColor",
"lastUpdated":"2018-07-09T18:13:49.567",
"info":null,
"type":"SELECT"
},
{
"question":"picHairColor",
"lastUpdated":"2018-07-09T18:13:42.541",
"info":null,
"type":"SELECT"
}
]
}
Array.prototype.map() returns an array, for your case if I understood correctly you want to group your elements and return them in one results object.
This seems like something that can be achieved with Array.prototype.reduce(), so you would have:
const ofQuestionsList = Object.entries(filterList).reduce(
(acc, [questionKey, questionNames]) => {
return {
...acc,
[questionKey]: questionList.filter((item) =>
questionNames.includes(item.question)
)
};
}, {});
This reduce takes 2 parameters, a callback taking the accumulator and your current element that being processed in your array. And the accumulator's initialization with an empty object {}.
Then in each iteration we return a merged object with the previous values of the iterator, and the current one
console.clear();
const filterList = {
ageRange: ["ageRange", "picAgeRange"],
goal: ["goal", "motivation"],
hairColor: ["hairColor", "picHairColor"]
};
const questionList = [{
question: "ageRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "18-30",
selected: true
},
{
value: "31-35",
selected: false
},
{
value: "36-45",
selected: false
},
{
value: "46-55",
selected: false
},
{
value: "55+",
selected: false
}
]
},
{
question: "picAgeRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "country 6",
selected: true
},
{
value: "smart casual 4",
selected: false
},
{
value: "dark denim 6",
selected: false
},
{
value: "sporty 6",
selected: false
},
{
value: "adventure 5",
selected: false
},
{
value: "prints 5",
selected: false
},
{
value: "excentric 5",
selected: false
},
{
value: "dont like any private style",
selected: false
}
]
},
{
question: "goal",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "save time",
selected: true
},
{
value: "personal advice",
selected: false
},
{
value: "inspiration",
selected: false
},
{
value: "testing the service",
selected: false
}
]
},
{
question: "hairColor",
lastUpdated: "2018-07-09T18:13:49.567",
info: null,
type: "SELECT",
answers: [{
value: "blond",
selected: true
},
{
value: "brown",
selected: false
},
{
value: "black",
selected: false
},
{
value: "red",
selected: false
},
{
value: "grey",
selected: false
},
{
value: "noHair",
selected: false
}
]
},
{
question: "picHairColor",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT",
answers: [{
value: "suit 3",
selected: true
},
{
value: "business casual",
selected: false
},
{
value: "casual",
selected: false
},
{
value: "have to wear uniform",
selected: false
},
{
value: "classic",
selected: false
},
{
value: "conservative",
selected: false
},
{
value: "relaxed 2",
selected: false
},
{
value: "dont like any work style",
selected: false
}
]
}
];
const ofQuestionsList = Object.entries(filterList).reduce(
(acc, [questionKey, questionNames]) => {
return {
...acc,
[questionKey]: questionList.filter((item) =>
questionNames.includes(item.question)
)
};
}, {});
console.log(ofQuestionsList);
Manage with result
console.clear();
const result = [{
ageRange: [{
question: "ageRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT"
},
{
question: "picAgeRange",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT"
}
]
},
{
goal: [{
question: "goal",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT"
}]
},
{
hairColor: [{
question: "hairColor",
lastUpdated: "2018-07-09T18:13:49.567",
info: null,
type: "SELECT"
},
{
question: "picHairColor",
lastUpdated: "2018-07-09T18:13:42.541",
info: null,
type: "SELECT"
}
]
}
];
var newObj = result.reduce((a, b) => Object.assign(a, b), {})
console.log(newObj)

How to filter an array based on a field value in each object and group the remaining fields under that object

I am trying to modify an array. I have the following json.
[
{ state: "NY", key: "A", value: "Alarm" },
{ state: "CT", key: "A", value: "Alarm" },
{ state: "NH", key: "A", value: "Alarm" },
{ state: "CT", key: "B", value: "Audible and Etched" },
{ state: "NH", key: "B", value: "Audible and Etched" },
{ state: "NY", key: "AA", value: "Active Disabling and Anti-Theft" },
{ state: "FL", key: "B", value: "Audible and Etched" },
{ state: "FL", key: "A", value: "Alarm" },
{ state: "FL", key: "AA", value: "Active Disabling and Anti-Theft" }
]
Based on each unique state , I need to group the key , values into dropdown-array as shown below
[{
state: "NY",
dropdown: [
{ key: "A", value: "Alarm" },
{ key: "AA", value: "Active Disabling and Anti-Theft" }
]
},
{
state: "CT",
dropdown: [
{ key: "A", value: "Alarm" },
{ key: "B", value: "Audible and Etched" }
]
},
{
state: "NH",
dropdown: [
{ key: "A", value: "Alarm" },
{ key: "B", value: "Audible and Etched" }
]
},
{
state: "FL",
dropdown: [
{ key: "A", value: "Alarm" },
{ key: "B", value: "Audible and Etched" },
{ key: "AA", value: "Active Disabling and Anti-Theft" }
]
}]
Any Help would be Appreciated. Thanks.
You can use Array.reduce to get the modified array.
const inputArray = [
{ state: "NY", key: "A", value: "Alarm" },
{ state: "CT", key: "A", value: "Alarm" },
{ state: "NH", key: "A", value: "Alarm" },
{ state: "CT", key: "B", value: "Audible and Etched" },
{ state: "NH", key: "B", value: "Audible and Etched" },
{ state: "NY", key: "AA", value: "Active Disabling and Anti-Theft" },
{ state: "FL", key: "B", value: "Audible and Etched" },
{ state: "FL", key: "A", value: "Alarm" },
{ state: "FL", key: "AA", value: "Active Disabling and Anti-Theft" }
];
const result = inputArray.reduce((acc, item) => {
const exist = acc.find(e => e.state == item.state);
if (exist) {
exist.dropdown.push({
key: item.key,
value: item.value
})
} else {
acc.push({
state: item.state,
dropdown: [{
key: item.key,
value: item.value
}]
});
}
return acc;
}, []);
console.log(result);

How to return data if value does not exist in the nested array of objects using Higher order functions

Suppose I have a Nested array of objects like below:
let a = [{
title: "A123",
book: "A",
tags: [{
key: "Romantic",
ID: 1
}, {
key: "Sad",
ID: 2
},{
key: "Strange",
ID: 3
}]
}, {
title: "B123",
book: "B",
tags: [{
key: "Parody",
ID: 1
}, {
key: "Romantic",
ID: 2
},{
key: "Happy",
ID: 3
}]
}, {
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}]
Now I am trying to get the output of those objects which does not contain the tags as 'Romantic'.
** Expected Output:**
{
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}
I have tried the below from my end but it is returning all the elements. Is there a way to achieve the expected output?
a.filter( (ele) => ele.tags.filter( (eachTags) => eachTags.key !== 'Romantic'))
You can use every instead of the 2nd filter:
a.filter(book => book.tags.every(tag => tag.key !== "Romantic"));
Which is saying filter the array and exclude a book where any tag is Romantic.
Example:
let a = [{
title: "A123",
book: "A",
tags: [{
key: "Romantic",
ID: 1
}, {
key: "Sad",
ID: 2
},{
key: "Strange",
ID: 3
}]
}, {
title: "B123",
book: "B",
tags: [{
key: "Parody",
ID: 1
}, {
key: "Romantic",
ID: 2
},{
key: "Happy",
ID: 3
}]
}, {
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}];
let notRomantic = a.filter(book => book.tags.every(tag => tag.key !== "Romantic"));
console.log(notRomantic);
Alternatively you could use Array.prototype.some():
let a = [
{title: "A123",book: "A",tags: [{key: "Romantic",ID: 1}, {key: "Sad",ID: 2},{key: "Strange",ID: 3}]},
{title: "B123",book: "B",tags: [{key: "Parody",ID: 1}, {key: "Romantic",ID: 2},{key: "Happy",ID: 3}]},
{title: "C123",book: "C",tags: [{key: "Dark",ID: 1}, {key: "Science Fiction",ID: 2}]},
{title: "D123",book: "D",tags: [{key: "New Life",ID: 1}, {key: "Science Fiction",ID: 2}]}]
console.log(a.filter(o=>!o.tags.some(t=>t.key==="Romantic")))
you can achieve this result using filter and some
const result = a.filter((obj) => !obj.tags.some((o) => o.key === "Romantic"));
let a = [
{
title: "A123",
book: "A",
tags: [
{
key: "Romantic",
ID: 1,
},
{
key: "Sad",
ID: 2,
},
{
key: "Strange",
ID: 3,
},
],
},
{
title: "B123",
book: "B",
tags: [
{
key: "Parody",
ID: 1,
},
{
key: "Romantic",
ID: 2,
},
{
key: "Happy",
ID: 3,
},
],
},
{
title: "C123",
book: "C",
tags: [
{
key: "Dark",
ID: 1,
},
{
key: "Science Fiction",
ID: 2,
},
],
},
{
title: "D123",
book: "D",
tags: [
{
key: "New Life",
ID: 1,
},
{
key: "Science Fiction",
ID: 2,
},
],
},
];
const result = a.filter((obj) => !obj.tags.some((o) => o.key === "Romantic"));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to segregate an array of object by using map?

I have to form an array of object in another array of object based on id. I was able to group the object based the "applicationId" but was not able to group the inside array of attributes and values array. Also the above code gives me duplicate objects. Please help with this I know its a small fix but I spend whole day still no result.stackblitz. Expected output commented below in stackblitz
data.map((el) => {
el.attribute.map((elm) => {
elm.options.map(em => {
permissions.push({
applicationId: el.application, attributes: [{ name: elm.name, value: em.value, disabled: true
}]
})
})
})
});
Input Object
[
{
application: "abc",
attribute: [
{
description: "abc description1"
name: "audio"
options:[
{name: "Yes", value: "Y"}
{name: "No", value: "N"}
]
},
{
description: "abc description2"
name: "video"
options:[
{name: "true", value: "T"}
{name: "false", value: "F"}
]
}
{
description: "abc description3"
name: "call"
options:[
{name: "Yes", value: "Y"}
{name: "false", value: "F"}
]
}
]
},
{
application: "def",
attribute: [
{
description: "def description1"
name: "audio"
options:[
{name: "Yes", value: "Y"}
{name: "No", value: "N"}
]
},
{
description: "def description2"
name: "video"
options:[
{name: "true", value: "T"}
{name: "false", value: "F"}
]
}
{
description: "def description3"
name: "call"
options:[
{name: "Yes", value: "Y"}
{name: "false", value: "F"}
]
}
]
}
]
Expected Output:
permissions:[
{
applicationId:abc
attributes:
[
{
name:audio
value:["Y","N"]
disabled: true
},
{
name:video,
value:["T","F"]
disabled: true
},
{
name:call,
value:["Y","F"]
disabled: true
}
]
},
{
applicationId: def
attributes:
[
{
name:audio
value:["Y","N"]
disabled: true
},
{
name:video,
value:["T","F"]
disabled: true
},
{
name:call,
value:["Y","F"]
disabled: true
}
]
}
]
You could do so using few array maps.
Try the following
var input = [ { application: "abc", attribute: [ { description: "abc description1", name: "audio", options: [ { name: "Yes", value: "Y" }, { name: "No", value: "N" } ] }, { description: "abc description2", name: "video", options: [ { name: "true", value: "T" }, { name: "false", value: "F" } ] }, { description: "abc description3", name: "call", options: [ { name: "Yes", value: "Y" }, { name: "false", value: "F" } ] } ] }, { application: "def", attribute: [ { description: "def description1", name: "audio", options: [ { name: "Yes", value: "Y" }, { name: "No", value: "N" } ] }, { description: "def description2", name: "video", options: [ { name: "true", value: "T" }, { name: "false", value: "F" } ] }, { description: "def description3", name: "call", options: [ { name: "Yes", value: "Y" }, { name: "false", value: "F" } ] } ] } ];
var output = input.map(item => ({
applicationId: item.application,
attributes: item.attribute.map(attr => ({
name: attr.name,
value: attr.options.map(option => option.value),
disabled: true
}))
}));
console.log(output);
I've modified your Stackblitz.
Sidenote: Please try to post a valid object in the question. It'll make it much easier and quicker to reproduce the issue. Much of my time was spent not in the solution but in fixing the object.

compare nested arrays of objects

Could you help me plese? I need to compare and calculate the percentage of the difference between the values ​​and return an array. I need to compare arrays, get to objects with name and value, and count the percentage. Suppose for the first item in array {name: 'Name 1', value: 1945}, go into the second item to find there {name: 'Name 1', value: 699}. The percentage for 1945 will be 100, for 699 - 36. I'm confused about nesting((
//input data
const data = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945 },
{ name: "Name 2", value: 0 },
{ name: "Name 3", value: 39 },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67 },
{ name: "Name 5", value: 123 },
{ name: "Name 6", value: 13 },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699 },
{ name: "Name 2", value: 55},
{ name: "Name 3", value: 39 },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998 },
{ name: "Name 5", value: 12 },
{ name: "Name 6", value: 485 },
],
},
]
}
];
//result data
const result = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945, percent: 100, best: true },
{ name: "Name 2", value: 0, percent: 0, best: false },
{ name: "Name 3", value: 39, percent: 100, best: true },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67, percent: 6, best: false },
{ name: "Name 5", value: 123, percent: 100, best: true },
{ name: "Name 6", value: 13, percent: 3, best: true },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699, percent: 36, best: false },
{ name: "Name 2", value: 55, percent: 100, best: true},
{ name: "Name 3", value: 39, percent: 100, best: true },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998, percent: 100, best: true },
{ name: "Name 5", value: 12, percent: 9, best: false },
{ name: "Name 6", value: 485, percent: 100, best: true },
],
},
]
}
];
First you need to run through all elements, finding the largest values of each name. Then you run again, placing the percentages.
var best = {}; // Our database of higher values
function checkLargest(data) {
if (!data) return;
// If is iterable perform the function on each element
if (Symbol.iterator in Object(data)) for (var el of data) checkLargest(el);
if (data.name && data.value !== undefined)
if (!best[data.name] || best[data.name] < data.value)
best[data.name] = data.value;
checkLargest(data.groups); // If doesn't exist will return
checkLargest(data.items);
}
function placePercentages(data) {
if (!data) return;
if (Symbol.iterator in Object(data)) for (var el of data) placePercentages(el);
if (data.name && data.value !== undefined) {
var higher = best[data.name];
data.percent = Math.round(data.value / higher * 100);
data.best = (higher == data.value);
}
placePercentages(data.groups);
placePercentages(data.items);
}
const d = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945 },
{ name: "Name 2", value: 0 },
{ name: "Name 3", value: 39 },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67 },
{ name: "Name 5", value: 123 },
{ name: "Name 6", value: 13 },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699 },
{ name: "Name 2", value: 55},
{ name: "Name 3", value: 39 },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998 },
{ name: "Name 5", value: 12 },
{ name: "Name 6", value: 485 },
],
},
]
}
];
checkLargest(d);
placePercentages(d);
console.log(d);

Categories

Resources