Develop Reference

Count number of repetition for values in JSON nested arrays with Javascript

I'm stuck with something I thought would be easy. Let's say I have an object like this. I'm trying to insert in the div each name of the animal tagged and the number of times that tag is in types (for example, cat = 3, etc...)
var animals = '';
animals = {
"types": [
{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
}
for (var i = 0; i < animals.length; i++) {
var tags = animals[i].tags;
}
<div class="types">Number of animals:</div>
I'm a beginner with complex JSON objects, any help would be appreciated. It can be vanilla JS or Jquery.
Thanks!

Check out the snippet below, first loop iterates and counts each animal.
Second populates your div
var animals = '';
animals = {
"types": [{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
}
var tags = {};
// Iterate over all your items
animals.types.forEach(function(type) {
// Iterate over all the animals in the array
type.tags.forEach(function(tag) {
if (tag in tags) {
// If animal is present, increment the count
tags[tag] = tags[tag] + 1;
} else {
// If animal is not present, add the entry
tags[tag] = 1;
}
})
})
// Iterate over all the animals and add it to the div
for (var animal in tags) {
if (tags.hasOwnProperty(animal)) {
document.getElementsByClassName('types')[0].innerHTML += ' ' + animal + ' ' + tags[animal];
}
}
<div class="types">Number of animals:</div>

You can do like this by using map() method :
var animals = {
"types": [{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
};
var count = {};
animals.types.map(function (arr, i) {
arr.tags.map(function (tag, k) {
count[tag] = (count[tag] || 0) + 1;
});
});
console.log(count);

If you use reduce & destrucuring it becomes one liner:
var animals = {
"types": [{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
}
console.log(
animals.types.reduce((r,{tags}) => tags.map(tag => r[tag] = (r[tag] || 0) + 1) && r, {})
)

Try this simple way:
var animals = { "types": [ { "id": "1", "tags": ["cat"] }, { "id": "2", "tags": ["dog"] }, { "id": "3", "tags": ["cat", "bird", "dog"] }, { "id": "4", "tags": [] }, { "id": "5", "tags": ["cat", "bird"] } ] }
var finalRes={};
animals.types.map(function(o, i){
o.tags.map(function(p, j){
finalRes[p]=(finalRes[p]||0)+1;
});
});
console.log(finalRes);
Result:
{ cat: 3, dog: 2, bird: 2 }
Sorry, I am typing with mobile phone, slow but correct!

Flatten all tags into single array
Count each tag
Handle tag count as you need
const animals = {
"types": [
{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
},
],
};
// Flatten all tags into single array
var allTags = [].concat(
...animals.types.map(
(type) => type.tags
)
);
// Count each tag
const tagsCount = {};
allTags.forEach(
(tag) => tagsCount[tag] = tagsCount[tag] ? tagsCount[tag] + 1 : 1
)
// Handle tag count as you need
const app = document.querySelector('#app');
app.innerHTML = Object.keys(tagsCount).map((key) => {
return `<p>${key}: ${tagsCount[key]}</p>`
}).join('');
<h1>Number of Animal Types</h1>
<div id="app"></div>

Basic javascript usage.
// var animals = ''; // not needed
var animals = {
"types": [{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
};
var counts = {};
for (var i = 0; i < animals.types.length; i++) { // types is a key in animals object, animals is not an array
var tags = animals.types[i].tags;
if (tags.length > 0) {
for (var j = 0; j < tags.length; j++) {
var tag = tags[j];
if (typeof counts[tag] === 'undefined') {
counts[tag] = 0;
}
counts[tag]++;
}
}
}
console.log(counts);

You could create a hash map for all the tags and increment the count whenever you encounter that tag in that types.tags array
Then loop through the object and append that into your HTML Element
var animals = '';
animals = {
"types": [
{
"id": "1",
"tags": ["cat"]
},
{
"id": "2",
"tags": ["dog"]
},
{
"id": "3",
"tags": ["cat", "bird", "dog"]
},
{
"id": "4",
"tags": []
},
{
"id": "5",
"tags": ["cat", "bird"]
}
]
}
let types = animals.types;
var counts = {};
for (var i = 0; i < types.length; i++) {
types[i].tags.forEach((x) => {
counts[x] = (counts[x] || 0)+1;
});
}
console.log(counts);
<div class="types">Number of animals:</div>

Javascript Creating Array in a for loop

I have an json array in format as below.
{
"agents": [{
"id": "1",
"first_name": "Stacy",
"last_name": "Thompson",
"fields": [{
"name": "workphone",
"values": {
"answer": "8888888888"
}
}, {
"name": "Industry",
"values": {
"answer": "computer"
}
}]
},
{
"id": "2",
"first_name": "Jhon",
"last_name": "Deo",
"fields": [{
"name": "workphone",
"values": {
"answer": "9999999999"
}
},
{
"name": "market",
"values": {
"answer": "Outer"
}
}
]
}
]
}
I want to convert it to a simpler array like below, so it will be easier to search :
{
"agents": [{
"id": "1",
"first_name": "Stacy",
"last_name": "Thompson",
"workphone": "8888888888",
"Industry": "computer"
}, {
"id": "2",
"first_name": "Jhon",
"last_name": "Deo",
"workphone": "9999999999",
"market": "Outer"
}]
}
I wrote the code as below , but I am getting error as
TypeError: Cannot set property 'id' of undefined
Here is the code:
let temp = response.data.agents;
let temparray=[];
for(let i = 0; i < temp.length; i++) {
let agent = temp[i];
Object.keys(agent).forEach(function(key) {
if(key=='fields'){
let tempfield = agent.fields;
for(let j = 0; j < tempfield.length; j++) {
let ccs = tempfield[j];
Object.keys(ccs).forEach(function(keys) {
if(keys=='name'){
temparray[i][ccs.name] = ccs.values.answer;
}
});
}
}
else{
temparray[i][key] = agent[key];
});
}

Here's a map and reduce approach using object destructuring to split out the fields in order to reduce then to a flattened object that can be merged with the other properties
data.agents = data.agents.map(({fields, ...rest}) => {
fields = fields.reduce((a,{name:n,values:v}) => (a[n] = v.answer, a),{});
return {...rest, ...fields};
});
console.log(data)
<script>
let data = {
"agents": [{
"id": "1",
"first_name": "Stacy",
"last_name": "Thompson",
"fields": [{
"name": "workphone",
"values": {
"answer": "8888888888"
}
}, {
"name": "Industry",
"values": {
"answer": "computer"
}
}]
},
{
"id": "2",
"first_name": "Jhon",
"last_name": "Deo",
"fields": [{
"name": "workphone",
"values": {
"answer": "9999999999"
}
},
{
"name": "market",
"values": {
"answer": "Outer"
}
}
]
}
]
}
</script>

Can you try Initializing temparray[i] as object
let tesp = [{"agents":[ {"id":"1",
"first_name":"Stacy",
"last_name":"Thompson",
"fields":[ {"name":"workphone", "values": {"answer":"8888888888"}}, {"name":"Industry", "values": {"answer":"computer"}}]
}, {"id":"2",
"first_name":"Jhon",
"last_name":"Deo",
"fields":[ {"name":"workphone", "values": {"answer":"9999999999"}}, {"name":"market", "values": {"answer":"Outer"}}
]
}
]}];
let temp = tesp;
let temparray = [];
for (let i = 0; i < temp.length; i++) {
let agent = temp[i];
Object.keys(agent).forEach(function (key) {
if (key == 'fields') {
let tempfield = agent.fields;
for (let j = 0; j < tempfield.length; j++) {
let ccs = tempfield[j];
Object.keys(ccs).forEach(function (keys) {
if (keys == 'name') {
temparray[i][ccs.name] = ccs.pivot.answer;
}
});
}
}
else {
temparray[i] = {};
temparray[i][key] = agent[key];
}
});
console.log(temparray);
}

const newData = data.agents.map((agent) => {
const { first_name, last_name, fields } = agent;
return {
first_name,
last_name,
workphone: fields[0].values.answer,
market: fields[1].values.answer,
}
});
console.log(newData);
Used map to iterate over agents. As map returns a new array, I returned the individual object inside .map
Or you can use the above answer, charlietfl's. If you have dynamic fields.

function convert() {
let asArray = Object.values( input )[0];
for( let i in asArray) {
for( let j in asArray[i].fields ) {
asArray[i][asArray[i].fields[j].name] = Object.values(asArray[i].fields[j].values).join(',');
}
delete asArray[i].fields;
}
// console.log(asArray);
return {'agents': asArray};
}
var input = {
"agents": [{
"id": "1",
"first_name": "Stacy",
"last_name": "Thompson",
"fields": [{
"name": "workphone",
"values": {
"answer": "8888888888"
}
}, {
"name": "Industry",
"values": {
"answer": "computer"
}
}]
},
{
"id": "2",
"first_name": "Jhon",
"last_name": "Deo",
"fields": [{
"name": "workphone",
"values": {
"answer": "9999999999"
}
},
{
"name": "market",
"values": {
"answer": "Outer"
}
}
]
}
]
};
console.log( convert( input ) );
Desired output:
<pre style="height: 200px; overflow: scroll;">
{
"agents": [{
"id": "1",
"first_name": "Stacy",
"last_name": "Thompson",
"workphone": "8888888888",
"Industry": "computer"
}, {
"id": "2",
"first_name": "Jhon",
"last_name": "Deo",
"workphone": "9999999999",
"market": "Outer"
}]
}
</pre>

Create new javascript object from 2 JSON objects grouped by id

I have below dynamic nested JSON object arrays and I wanted to get the desired output with JavaScript grouped by id from both.
First Array:
[
{
"id": "11",
"name": "emp1",
"location": [
{ "name": "abc", "id": "lc1" }
]
},
{
"id": "11",
"name": "emp2",
"location": [
{ "name": "abc", "id": "lc1" },
]
},
{
"id": "22",
"name": "emp3",
"location": [
{ "name": "xyz", "id": "lc2" }
]
}
]
Second array like below.
[
{
"name": "sub1",
"id": "11"
...
},
{
"name": "sub1.1",
"id": "11"
...
},
{
"name": "sub2",
"id": "22"
...
}
]
Desired Output:
[
{
"id": "11",
"first": [{"name": "emp1"},
{"name": "emp2"}],
"second": [{"name": "sub1"},{"name": "sub1.1"}],
"location": [{"name": "abc"}]
},
{
"id": "22",
"first": [{"name": "emp3"}],
"second": [{"name": "sub2"}],
"location": [{"name": "xyz"}]
}
]
How to get the desired output like above using javascript/angularjs?

I would do it using the amazing Array#reduce function.
Note that I have named your first array as a1, second as a2 and result as res.
a1.reduce(function(arr, obj) {
var existing = arr.filter(function(res) {
return res.id === obj.id
})[0]
if (existing) {
existing.first.push({
name: obj.name
})
} else {
var second = a2.filter(function(res) {
return res.id === obj.id
})
var secondObj = second.length ? second.map(function(sec) {
return {
name: sec.name
};
}) : []
arr.push({
id: obj.id,
first: [{
name: obj.name
}],
second: secondObj,
location: obj.location
})
}
return arr;
}, [])
Here's the working snippet. Take a look!
var a1 = [{
"id": "11",
"name": "emp1",
"location": [{
"name": "abc",
"id": "lc1"
}]
},
{
"id": "11",
"name": "emp2",
"location": [{
"name": "abc",
"id": "lc1"
}]
},
{
"id": "22",
"name": "emp3",
"location": [{
"name": "xyz",
"id": "lc2"
}]
}
]
var a2 = [{
"name": "sub1",
"id": "11"
}, {
"name": "sub1.1",
"id": "11"
},
{
"name": "sub2",
"id": "22"
}
]
var res = a1.reduce(function(arr, obj) {
var existing = arr.filter(function(res) {
return res.id === obj.id
})[0]
if (existing) {
existing.first.push({
name: obj.name
})
} else {
var second = a2.filter(function(res) {
return res.id === obj.id
})
var secondObj = second.length ? second.map(function(sec) {
return {
name: sec.name
};
}) : []
arr.push({
id: obj.id,
first: [{
name: obj.name
}],
second: secondObj,
location: obj.location
})
}
return arr;
}, [])
console.log(res)
.as-console-wrapper {
max-height: 100% !important;
top: 0;
}

var red1 = [{
"id": "11",
"name": "emp1",
"location": [{
"name": "abc",
"id": "lc1"
}]
},
{
"id": "11",
"name": "emp2",
"location": [{
"name": "abc",
"id": "lc1"
}]
},
{
"id": "22",
"name": "emp3",
"location": [{
"name": "xyz",
"id": "lc2"
}]
}
]
var b = [{
"name": "sub1",
"id": "11"
},
{
"name": "sub2",
"id": "22"
}
]
var identication = {}
var result = []
red1.forEach(function(val) {
if (val['id'] in identication) {
var t = {}
t['name'] = val['name']
result[identication[val['id']]]['first'].push(t)
} else {
var t = {}
t['name'] = val['name']
val['first'] = []
val['first'].push(t)
delete val['name']
var identity = result.push(val)
identication[val['id']] = identity - 1;
}
})
b.forEach(function(d) {
if (d['id'] in identication) {
var t = {
'name': d['name']
}
if (!('second' in result[identication[d['id']]])) {
result[identication[d['id']]]['second'] = []
}
result[identication[d['id']]]['second'].push(t)
} else {
var t = {}
for (key in d) {
if (key == 'name')
continue
t[key] = d[key]
}
t['second'] = [{
'name': d['name']
}]
var identity = result.push(t)
identication[d['id']] = identity - 1;
}
})
console.log(result)

Replace js code with aggregate in mongodb

I have mongo document called groups. This is array of students and subjects.
Each subject has an array of lessons.
Each lesson has an array of marks.
Generally, document looks like this:
[
{
"students": [
{ "_id": "0", "firstName": "Bob", "lastName": "Jhonson" },
{ "_id": "1", "firstName": "Jackie", "lastName": "Chan" }
// other students ...
],
"subjects": [
{
"name": "Algebra",
"lessons": [
{
"date": 1489363200,
"marks": [
{ "student_id": "0", "value": 5 },
{ "student_id": "1", "value": 4 }
// other marks...
]
}, {
"date": 1489622400,
"marks": [
{ "student_id": "0", "value": 3 },
{ "student_id": "1", "value": 2 }
// other marks...
]
}
// other lessons...
]
}
]
}
]
Then I use js function to transform this data to something like this:
[
{
"_id": "5a89ca11abc4ffd25a430420",
"subjects": [
{
"name": "Algebra",
"dates": [1489363200, 1489622400],
"students": [
{
"_id": "0",
"firstName": "Bob",
"lastName": "Jhonson",
"marks": [ 5, 3 ]
},
{
"_id": "1",
"firstName": "Jackie",
"lastName": "Chan",
"marks": [ 4, 2 ]
}
]
}
]
}
]
Function which transforms json document:
function transformData (groups) { // groups - array
let newGroups = [];
for (let group of groups) {
newGroup = {};
for (let key in group) {
if (key === 'students' || key === 'subjects') continue;
newGroup[key] = group[key];
}
newGroup.subjects = [];
for (let subject of group.subjects) {
let newSubject = {
name: subject.name,
dates: [],
students: []
};
for (let student of group.students) {
let index = newSubject.students.push(student) - 1;
newSubject.students[index].marks = [];
}
for (let lesson of subject.lessons) {
let index = newSubject.dates.push(lesson.date) - 1;
for (let mark of lesson.marks) {
for (let student of newSubject.students) {
if (student._id !== mark.student_id) continue;
while(student.marks.length !== index) {
student.marks.push(null);
}
student.marks.push(mark.value);
}
}
}
newGroup.subjects.push(newSubject);
}
newGroups.push(newGroup);
}
return newGroups;
}
How can I replace this function with mongodb aggregation?

Javascript filter for multidimensional json object

Can't use javascript filter in multi-dimensional object.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
);
}
var filtered = object.filter(searchFor);
console.log(filtered);
This is how I am trying, inside the searchFor card.name I am getting the correct card name but filtering is returning all the cards.Its not filtering.
Could any help me with this.

An empty array isn't considered falsey in Javascript. So instead of returning the result of filtering the cards array, test its length.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
).length != 0;
}
var filtered = object.filter(searchFor);
console.log(filtered);

You were returning the filtered array, which would produce a TRUE result whenever cards existed. So you can just turn that into a boolean, by saying when the item.cards.filter(...).length > 0.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
var searchFor = (card) => card.name.indexOf("Raman") > -1;
var filteredCards = object.reduce((cards, item) => cards.concat(item.cards.filter(searchFor)), []);
var filteredObj = object.map(i => {
i.cards = i.cards.filter(searchFor);
return i;
}).filter(i => i.cards.length)
console.log(filteredCards, filteredObj)
Updated
I updated the code snippet to produce either the cards which were found. I also provide a method for returning all objects which contain the needed cards, and filter out the other cards.

// HTML Part
<div class="filter-list">
<button class="filter" data-filter-key="all">all</button>
<button class="filter" data-filter-key="open">open</button>
<button class="filter" data-filter-key="done">done</button>
</div>
// CSS Part
.filter:hover,
.filter:focus,
[data-active-filter="all"] .filter[data-filter-key="all"],
[data-active-filter="done"] .filter[data-filter-key="done"],
[data-active-filter="open"] .filter[data-filter-key="open"] {
text-decoration: underline;
}
[data-active-filter="open"] [data-completed="true"],
[data-active-filter="done"] [data-completed="false"] {
display: none;
}
// Script Part
(function () {
const mainNode = document.querySelector("main");
const filters = document.querySelector(".filter-list");
for (const filter of filters.children) {
filter.addEventListener("click", () => {
mainNode.setAttribute(
"data-active-filter",
filter.getAttribute("data-filter-key")
);
});
}
mainNode.setAttribute("data-active-filter", "all");
})();