We Keep Coding

How to group an array of objects in javascript?

I'm trying to group an array of objects. The array should be grouped following this quote:
Group by type respecting the sequence.
Array I wish to group
var arrayObj = [
{ "type": "user", "text": "user1" },
{ "type": "user", "text": "user2" },
{ "type": "user", "text": "user3" },
{ "type": "clerk", "text": "clerk1" },
{ "type": "user", "text": "user4" },
{ "type": "clerk", "text": "clerk2" },
{ "type": "clerk", "text": "clerk3" },
{ "type": "user", "text": "user5" },
{ "type": "user", "text": "user6" }
];
The way I want it to be grouped:
var newArray = [
[
{type: "user", text: "user1"},
{type: "user", text: "user2"},
{type: "user", text: "user3"}
],
[
{type: "clerk", text: "clerk1"}
],
[
{type: "user", text: "user4"}
],
[
{type: "clerk", text: "clerk2"},
{type: "clerk", text: "clerk3"}
],
[
{type: "user", text: "user5"},
{type: "user", text: "user6"}
]
];
What i tried:
I'm trying to use a filter, but without success since it even groups, but it groups all that are of the same type without respecting the sequence I want (from the array above);
var arrayObj = [
{ "type": "user", "text": "user1" },
{ "type": "user", "text": "user2" },
{ "type": "user", "text": "user3" },
{ "type": "clerk", "text": "clerk1" },
{ "type": "user", "text": "user4" },
{ "type": "clerk", "text": "clerk2" },
{ "type": "clerk", "text": "clerk3" },
{ "type": "user", "text": "user5" },
{ "type": "user", "text": "user6" }
];
var newArray = [];
newArray.push(filtrarArray(arrayObj, 'clerk'));
newArray.push(filtrarArray(arrayObj, 'user'));
console.log(newArray);
function filtrarArray(array, type) {
return array.filter(function (val) {
return val.type === type;
});
}

The snippet below first sorts the array by type, which then makes it easy to loop through and group. Let me know if this solves your problem :)
EDIT
Just realized you didn't need sorting, so I commented the sort function out, but it's always there to be uncommented if you change your mind :)
const arrayObj = [
{ type: 'user', text: 'user1' },
{ type: 'user', text: 'user2' },
{ type: 'user', text: 'user3' },
{ type: 'clerk', text: 'clerk1' },
{ type: 'user', text: 'user4' },
{ type: 'clerk', text: 'clerk2' },
{ type: 'clerk', text: 'clerk3' },
{ type: 'user', text: 'user5' },
{ type: 'user', text: 'user6' },
];
const group = ar =>
ar
// .sort((a, b) => (a.type < b.type ? -1 : 1))
.reduce((newAr, obj, i) => {
if (0 === i) return [[obj]];
if (obj.type === newAr[newAr.length - 1][0].type)
return newAr[newAr.length - 1].push(obj), newAr;
return [...newAr, [obj]];
}, []);
const groupedAr = group(arrayObj);
console.log(groupedAr);

function groupConsecutive(arrayObj) {
if (arrayObj.length === 0) {
return [];
}
let matchedTypesIndex = 0;
let newArray = [
[
arrayObj[0]
]
];
let currentType = arrayObj[0]["type"];
let i = 1;
while (i < arrayObj.length) {
if (arrayObj[i]["type"] === currentType) {
newArray[matchedTypesIndex].push(arrayObj[i]);
} else {
currentType = arrayObj[i]["type"];
newArray.push([]);
matchedTypesIndex++;
newArray[matchedTypesIndex].push(arrayObj[i]);
}
i++;
}
return newArray;
}

This is probably not best pure solution but works as you need.
var arrayObj = [
{ "type": "user", "text": "user1" },
{ "type": "user", "text": "user2" },
{ "type": "user", "text": "user3" },
{ "type": "clerk", "text": "clerk1" },
{ "type": "user", "text": "user4" },
{ "type": "clerk", "text": "clerk2" },
{ "type": "clerk", "text": "clerk3" },
{ "type": "user", "text": "user5" },
{ "type": "user", "text": "user6" }
];
let lastType;
let arr = [];
let arrIndex = -1;
arrayObj.forEach(obj => {
if(obj.type == lastType) { // add item into last group array by index
arr[arrIndex].push(obj);
}
else { // or add new group array
lastType = obj.type;
arrIndex++;
arr.push([obj]);
}
})
console.log(arr);

See This solution it will work
var arrayObj = [
{ type: "user", text: "user1" },
{ type: "user", text: "user2" },
{ type: "user", text: "user3" },
{ type: "clerk", text: "clerk1" },
{ type: "user", text: "user4" },
{ type: "clerk", text: "clerk2" },
{ type: "clerk", text: "clerk3" },
{ type: "user", text: "user5" },
{ type: "user", text: "user6" },
];
let typeNow = arrayObj[0].type;
let res = [];
let resultArray = [];
arrayObj.forEach((obj, i) => {
if (obj.type == typeNow) {
resultArray.push(obj);
} else {
resultArray = [obj];
res.push(resultArray);
typeNow = obj.type;
}
if (i == arrayObj.length - 1) res.push(resultArray);
});
console.log(res);
This is best solution can i have
It seem unordred because of Browser auto order but if you try in js file it will work and ordred

I'm responding with another way I found to solve my problem. This is just one more way I decided to comment.
Let's go:
I'm traversing the arrayObjects array using the appropriate loop for arrays for...of and then checking if the variable I set for arrayObjects (loopArrObj) has a different value of type of the variable (typeValue), if it is inserted at the end of the new array (grouping) using the array method push an empty array and then assign the value of the loopArrObj(Ie, there will be in the array grouping array empty only for the values ​​that are different).
So far so good, we have the first empty array. Next I'm defining this empty array with the push method the loopArrObj object in question, then we get the value through the console. I'm removing 1 from grouping.lengh so the loop assigns from 0 and not 1.
var arrayObjects = [
{ "type": "user", "text": "user1" },
{ "type": "user", "text": "user2" },
{ "type": "user", "text": "user3" },
{ "type": "clerk", "text": "clerk1" },
{ "type": "user", "text": "user4" },
{ "type": "clerk", "text": "clerk2" },
{ "type": "clerk", "text": "clerk3" },
{ "type": "user", "text": "user5" },
{ "type": "user", "text": "user6" }
];
let typeValue,
grouping = [],
loopArrObj;
for (loopArrObj of arrayObjects) {
if (loopArrObj.type !== typeValue) {
grouping.push([]);
typeValue = loopArrObj.type;
}
grouping[grouping.length - 1].push(loopArrObj);
}
console.log(grouping);

Return name and id property value of all arrays inside object

How to return name and id property value of all arrays? The idea is to make a single map of all these arrays and return the id and name?
Something like this
filters.[key].map((option, index) => (
<ItemFilter key={index}>{option}</ItemFilter>
))
I have this array object
filters: {
"services": [
{
"id": "1b975589-7111-46a4-b433-d0e3c0d7c08c",
"name": "Bank"
},
{
"id": "91d4637e-a17f-4b31-8675-c041fe06e2ad",
"name": "Income"
}
],
"accountTypes": [
{
"id": "1f34205b-2e5a-430e-982c-5673cbdb3a68",
"name": "Digital Account"
}
],
"channels": [
{
"id": "875f8350-073e-4a20-be20-38482a86892b",
"name": "Chat"
}
]
}

You can use flatMap or flat to achieve the desired result.
Object.values(obj.filters).flatMap(v => v)
or
Object.values(obj.filters).flat()
const obj = {
filters: {
services: [
{
id: "1b975589-7111-46a4-b433-d0e3c0d7c08c",
name: "Bank",
},
{
id: "91d4637e-a17f-4b31-8675-c041fe06e2ad",
name: "Income",
},
],
accountTypes: [
{
id: "1f34205b-2e5a-430e-982c-5673cbdb3a68",
name: "Digital Account",
},
],
channels: [
{
id: "875f8350-073e-4a20-be20-38482a86892b",
name: "Chat",
},
],
},
};
const result = Object.values(obj.filters).flatMap(v => v);
console.log(result);

If option is referring to name in your example code it could look something like this:
Object.values(
{
filters: {
services: [
{
id: "1b975589-7111-46a4-b433-d0e3c0d7c08c",
name: "Bank",
},
{
id: "91d4637e-a17f-4b31-8675-c041fe06e2ad",
name: "Income",
},
],
accountTypes: [
{
id: "1f34205b-2e5a-430e-982c-5673cbdb3a68",
name: "Digital Account",
},
],
channels: [
{
id: "875f8350-073e-4a20-be20-38482a86892b",
name: "Chat",
},
],
},
}.filters
)
.flat()
.map(({ name, index }) => <ItemFilter key={index}>{name}</ItemFilter>);

Display data from an Api in a v-data-table, an object within an object vue js, vuetify

I have the following Json coming from an api, which I want to present in a V-DATA-TABLE:
[
{
"id": 1,
"firstName": "Ana",
"lastName": "Lucia",
"phone": "(11)99989-8989",
"mobilePhone": "(11)99989-8989",
"email": "aninha#gmail.com",
"gender": {
"name": "feminino"
},
"status": {
"name": "inativo"
},
"services": [
{
"name": "progressiva"
},
{
"name": "Manicure"
}
]
},
{
"id": 2,
"firstName": "Maria",
"lastName": "Luiza",
"phone": "(12)32333-3333",
"mobilePhone": "(43)45555-5555",
"email": "marialu#gmail.com",
"gender": {
"name": "feminino"
},
"status": {
"name": "pendente"
},
"services": [
{
"name": "progressiva"
}
]
},
{
"id": 3,
"firstName": "Mario",
"lastName": "Braz",
"phone": "(11)23232-3222",
"mobilePhone": "(11)23232-3222",
"email": "mariobraz#gmail.com",
"gender": {
"name": "masculino"
},
"status": {
"name": "ativo"
},
"services": [
{
"name": "progressiva"
}
]
}
]
However in the Data table the field that the Services would come from, is empty as shown in the image:
Here is the code of my .Vue data:
data: () => ({
dialog: false,
pageTitle: 'Employees',
headers: [
{
text: 'First Name',
align: 'start',
sortable: false,
value: 'firstName',
},
{ text: 'Last Name', value: 'lastName' },
{ text: 'Email', value: 'email' },
{ text: 'Phone', value: 'phone' },
{ text: 'Mobile Phone', value: 'mobilePhone' },
{ text: 'Gender', value: 'gender.name' },
{ text: 'Status', value: 'status.name' },
{ text: 'Services', value: 'services.name' },
{ text: 'Actions', value: 'action', sortable: false },
],
search: '',
employees: [],
genders: [],
status: [],
services:[],
editedIndex: -1,
editedItem: {},
defaultItem: {},
}),
I noticed that when I change this code snippet and leave only 'services':
{ text: 'Services', value: 'services' },
exactly the number of objects that are the services appears but not the names:
Here is the method I used to pull the main object that is the 'employees' and all their relationships:
methods: {
initialize () {
axios.get('http://192.168.26.130:3000/employees/').then(response => {
this.employees = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/genders/').then(response => {
this.genders = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/employee-status').then(response => {
this.status = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/services').then(response => {
this.services = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
},

{ text: 'Services', value: 'services.map(s => s.name).join(", ") }
will display the services names, separated by ', ' (comma + space).
Alternative method, using template:
<template v-slot:item.services="{ item }">
{{ item.services.map(s => s.name).join(', ') }}
</template>

services prop is an array:
"services": [
{
"name": "progressiva"
},
{
"name": "Manicure"
}
]
If you want to display the first value, write:
{ text: 'Services', value: 'services[0].name' },
Otherwhise, you need to transform the array.

Remove parent JSON element depending on child value

I have a JSON with lots of empty content:
{
"items": [
{
"category": "login",
"fields": [
{
"label": "Name",
"value": "",
},
{
"label": "E-Mail",
"value": "",
},
{
"label": "Password",
"value": "123456",
},
{
"label": "Website",
"fields": [
{
"label": "Name X",
"value": ""
},
{
"label": "Name Y",
"value": "another one"
},…
]
},…
]
},…
]
}
The nesting goes several levels deeper. This shows only the first level. I want to delete all elements of "fields" (or whatever the array's key in deeper levels is), where their "value" is empty.
{
"items": [
{
"category": "login",
"fields": [
{
"label": "Password",
"value": "123456",
},
{
"label": "Website",
"fields": [
{
"label": "Name Y",
"value": "another one"
},…
]
},…
]
},…
]
}
How can I do this in Javascript?

Well, I found a way to iterate through the JSON object:
function remove(jsondata) {
for (let i in jsondata) {
if (jsondata[i].value != undefined && jsondata[i].value == '') {
delete jsondata[i];
}
else if (typeof jsondata[i] === "object") remove(jsondata[i]);
}
}
Not sure, if it's the most elegant way, but it works so far.

use filter method,you could get a filtered array
it returned Boolean. if value exist,it will be true
var list=JSON.parse(data)
list.items=list.items.map(val=>{
val.fields=val.fields.filter(v=>v.value})
return val
})

We use object-scan for many data processing tasks. It's powerful once you wrap your head around it. Here is how you could answer your questions
// const objectScan = require('object-scan');
const prune = (input) => objectScan(['**[*].value'], {
rtn: 'count',
filterFn: ({ gparent, gproperty, value }) => {
if (value === '') {
gparent.splice(gproperty, 1);
return true;
}
return false;
}
})(input);
const obj = { items: [{ category: 'login', fields: [{ label: 'Name', value: '' }, { label: 'E-Mail', value: '' }, { label: 'Password', value: '123456' }, { label: 'Website', fields: [{ label: 'Name X', value: '' }, { label: 'Name Y', value: 'another one' }] }] }] };
console.log(prune(obj)); // return count of pruned entries
// => 3
console.log(obj);
// => { items: [ { category: 'login', fields: [ { label: 'Password', value: '123456' }, { label: 'Website', fields: [ { label: 'Name Y', value: 'another one' } ] } ] } ] }
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#16.0.0"></script>
Disclaimer: I'm the author of object-scan

data manipulation inside nested array

In the below data structure,
data = {
data: [{
areas: [{
sections: [{
rjf: [{
type: 'heading-1'
text: 'Sample Heading',
}]
},
{
rjf: [{
type: 'paragraph',
depth: 0,
text: 'This website is offered to you by:',
inlineStyleRanges: [],
inlineEntityRanges: []
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
},
{
type: 'paragraph',
depth: 0,
text: 'This website is offered to you by:',
inlineStyleRanges: [],
inlineEntityRanges: []
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
}
]
}]
}]
};
I'm trying to group all the type which as ordered-list-item & unordered-list-item into new object. Something like below,
{
"type": 'list',
"items": [
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
}
After so much treble, I came with the below solution. This works fine.
But having an issue, In rjf if ordered-list-item & unordered-list-item not found nothing should be happen unfortunately and empty list getting added to rjf.
Below is the code snippet, please help me to fix this issue.
const data = {
data: [{
areas: [{
sections: [{
rjf: [{
text: 'Sample Heading',
}]
},
{
rjf: [{
type: 'paragraph',
depth: 0,
text: 'This website is offered to you by:',
inlineStyleRanges: [],
inlineEntityRanges: []
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
},
{
type: 'paragraph',
depth: 0,
text: 'This website is offered to you by:',
inlineStyleRanges: [],
inlineEntityRanges: []
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
}
]
}]
}]
};
const moveToNewObject = (data) => {
const sections = data[0].areas[0].sections;
sections.forEach(data => {
let list = data.rjf;
let a = list.map((entry, index) => {
return { ...entry,
index,
use: entry.type !== 'unordered-list-item' && entry.type !== 'ordered-list-item'
}
}).filter(entry => entry.use).map((entry, index, entries) => {
const end = index < entries.length - 1 ? entries[index + 1].index : list.length - entry.index;
return [{
type: entry.type,
text: entry.text
}, {
type: 'list',
items: list.slice(entry.index + 1, entry.index + end)
}]
});
console.log(a);
});
}
console.log(moveToNewObject(data.data));

Your data has a very weird structure which makes it harder to be honest. The snippet below uses a function that uses map on all your sections, and if rjf type is 'unordered-list-item' or 'ordered-list-item', it moves it to a new rjf of type list as items. Hopefully it's what you wanted.
And here's a fiddle if you want clearer code formatting:
https://jsfiddle.net/qce2vLr3/
const data = {
data: [
{
areas: [
{
sections: [
{
rjf: [
{
text: 'Sample Heading',
}
]
},
{
rjf: [
{
type: 'paragraph',
depth: 0,
text: 'This website is offered to you by:',
inlineStyleRanges: [],
inlineEntityRanges: []
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
}
]
}
]
}
]
};
const moveToNewObject = (data) => {
const sections = data[0].areas[0].sections; // why is data an array?
return sections.map((section) => {
if (section.rjf) {
const looseItems = section.rjf.filter((rjf) => rjf.type && ['ordered-list-item', 'unordered-list-item'].includes(rjf.type));
if (looseItems.length) {
return {
rjf: [
...section.rjf,
{
type: 'list',
items: looseItems
}
].filter((rjf) => rjf.type && !['ordered-list-item', 'unordered-list-item'].includes(rjf.type))
}
}
return section;
}
return section;
})
}
data.data[0].areas[0].sections = moveToNewObject(data.data);
console.log(data.data);
UPDATE
Here's a solution that "groups" your lists by multiple headings: https://jsfiddle.net/pkLyd0gh/
const data = {
data: [
{
areas: [
{
sections: [
{
rjf: [
{
text: 'Sample Heading',
}
]
},
{
rjf: [
{
"type": "heading-1",
"text": "A title",
},
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
},
{
"type": "heading-2",
"text": "A title",
},
{
"type": "ordered-list-item",
"text": "Ordered Item C",
},
{
"type": "unordered-list-item",
"text": "Ordered Item D",
}
]
}
]
}
]
}
]
};
const reformattedSections = (data) => {
const sections = data[0].areas[0].sections;
const listItemTypes = ['unordered-list-item', 'ordered-list-item'];
return sections.map((section) => {
let lastHeadingIndex = -1;
return section.rjf.reduce((acc, current, index) => {
if (!current.type || !listItemTypes.includes(current.type)) {
lastHeadingIndex = acc.length;
return [...acc, current]
}
else {
let listObject = acc.find((el, i) => i > lastHeadingIndex && i < index && el.type === 'list');
if (!listObject) {
listObject = {
type: 'list',
items: [current]
}
return [...acc, listObject];
}
listObject.items = [...listObject.items, current];
return acc;
}
}, [])
})
}
data.data[0].areas[0].sections = reformattedSections(data.data);
console.log('sections', data.data);

slice is a method on array's not on objects. DATA in your code is an Object
const a ={a:1,b:2,c:3,d:4}
const b =[1,2,3,4]
//console.log(a.slice(1,3)) //this will return the error
console.log(b.slice(1,3))
Hope it helps.