push objects into array in sequential order - javascript

In the below JSON structure,
[
{
"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 A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
];
I need to move 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",
}
]
}
Most important is, I need to maintain the order
For example, ordered-list-item & unordered-list-item should be pushed inside new object until the type is matched.
So with the above Json structure, Below is the expected output
[
{
"type": "heading-1",
"text": "A title",
},
{
"type": "heading-2",
"text": "A title",
},
{
"type": 'list',
"items": [
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
},
{
"type": "heading-1",
"text": "A title",
},
{
"type": 'list',
"items": [
{
"type": "ordered-list-item",
"text": "Ordered Item A",
},
{
"type": "unordered-list-item",
"text": "Ordered Item B",
}
]
},
]
How can this be done ?

You can use array.filter on any array to create a new array matching the criteria (in the same order)
const orderedList = yourArray.filter(a => a.type === 'ordered-list-item');
const unOrderedList = yourArray.filter(a => a.type === 'unordered-list-item');
then just build up the new json object using your new filtered array(s).

function deconstruct(data) {
let index = -1;
const out = [];
data.forEach(entry => {
if (entry.type !== 'ordered-list-item' && entry.type !== 'unordered-list-item') {
// If the current entry's type prop is no (un)ordered-list-item
// We push it to the array and reset the index variable to -1
out.push(entry);
index = -1;
} else {
// Else, we check if index is -1. If it is, we push a new object
// And save its index to the index variable
if (index === -1) {
index = out.push({ type: 'list', items: [] }) - 1;
}
// Add the entry to the items of the current list
out[index].items.push(entry);
}
});
return out;
}
Here's another way of doing it:
data.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 : data.length - entry.index;
return [{type: entry.type, text: entry.text}, {type: 'list', items: data.slice(entry.index + 1, entry.index + end)}]
}).flat(2);

Related

Delete an object inside an array of objects by value

Having the following nested array of objects:
[
{
"items": [
{
"name": "See data",
"href": "/data",
},
{
"name": "Account",
"href": "/account",
"icon": {}
}
]
},
{
"items": [
{
"name": "name",
"href": "/name",
"icon": {}
},
{
"name": "My Rooms",
"href": "/rooms",
"icon": {}
}
]
},
{
"items": [
{
"name": "user",
"href": "/user",
"icon": {}
}
]
}
]
How it's possible to remove an inside object by name?
For example to remove the object with name "Account"?
A solution that works is delete myData[0].items[1]; but it's kind of hardcoded.
Also tried like:
myData[0].items = myData[0].items.filter(function (item) {
return item.name !== 'Account';
});
You can use splice to change the original array in-place and findIndex to find the index of the item to remove.
for (const {items} of data) {
const i = items.findIndex(({name}) => name === 'Account');
if (i > -1) items.splice(i, 1);
}

Removing a specific element from an object that is located inside a parent element

I have the following object:
const jj = {
"type": "doc",
"content": [{
"type": "paragraph",
"content": [{
"type": "text",
"text": "HI \n"
}, {
"type": "text",
"marks": [{
"type": "link",
"attrs": {
"href": "https://infosysta-my.sharepoint.com/:x:/p/elie%5Fiskandar/EXmik99OQBBNiJua1zbbiUIBwU8QEVOzyXl3qRV3ZnhADw",
"__confluenceMetadata": null
}
}],
"text": "Client List - MW.xlsx"
}]
}, {
"type": "paragraph",
"content": [{
"type": "text",
"text": "regards,"
}]
}],
"version": 1
};
I need to remove the "__confluenceMetadata":null key/value so the new object will be:
const jj = {
"type": "doc",
"content": [{
"type": "paragraph",
"content": [{
"type": "text",
"text": "HI \n"
}, {
"type": "text",
"marks": [{
"type": "link",
"attrs": {
"href": "https://infosysta-my.sharepoint.com/:x:/p/elie%5Fiskandar/EXmik99OQBBNiJua1zbbiUIBwU8QEVOzyXl3qRV3ZnhADw"
}
}],
"text": "Client List - MW.xlsx"
}]
}, {
"type": "paragraph",
"content": [{
"type": "text",
"text": "regards,"
}]
}],
"version": 1
};
I tired to iterate through the elements using let arr = Object.entries(ADFDocJson); but I couldn't reach what I needed.
I am looking for a generic method to use as this is just an example object and there might be multiple objects in the marks array.
Presented below is one possible way to achieve the desired objective.
Code Snippet
const removeMeta = argObj => (
Object.fromEntries(
Object.entries(argObj)
.map(([k, v]) => (
k !== 'content'
? ([k, v])
: ([k, (
v.map(ob1 => (
!('content' in ob1)
? ({...ob1})
: ({...ob1,
content: ob1.content.map(
ob2 => (
!('marks' in ob2)
? ({ ...ob2 })
: ({ ...ob2,
marks: ob2.marks.map(ob3 => (
!('attrs' in ob3 &&
'__confluenceMetadata' in ob3.attrs &&
ob3.attrs['__confluenceMetadata'] === null
)
? ({ ...ob3 })
: ({ ...ob3,
attrs: Object.fromEntries(
Object.entries(ob3.attrs)
.filter(
(
[k2, v2]
) => (
k2 !== '__confluenceMetadata'
)
)
)
})
))
})
)
)
})
))
)])
))
)
);
const jj = {
"type": "doc",
"content": [{
"type": "paragraph",
"content": [{
"type": "text",
"text": "HI \n"
}, {
"type": "text",
"marks": [{
"type": "link",
"attrs": {
"href": "https://infosysta-my.sharepoint.com/:x:/p/elie%5Fiskandar/EXmik99OQBBNiJua1zbbiUIBwU8QEVOzyXl3qRV3ZnhADw",
"__confluenceMetadata": null
}
}],
"text": "Client List - MW.xlsx"
}]
}, {
"type": "paragraph",
"content": [{
"type": "text",
"text": "regards,"
}]
}],
"version": 1
};
console.log(removeMeta(jj));
.as-console-wrapper { max-height: 100% !important; top: 0 }
Explanation
Iterate over the various key-value pairs of the object, and then iterate over the nested 'content' arrays, identify the relevant prop and filter it out.

Javascript - Updating ParentId to in nested objects

I currently store a structure in a javascript Array with nested objects. The structure does not have a parentId parameter which I do need to get the parent of a nested object. The current structure outputs:
[{
"id":1000,
"pageIndex":0,
"type":"page",
"label":"Page 1",
"rows":[
{
"id":1002,
"type":"row 1",
"layout":{
"gutters":true,
"wrapping":false,
"guttersDirect":false,
"parentId":1002
},
"columns":[
{
"id":1003,
"type":"col 1",
"layout":{
"size":3,
"outOf":12,
"parentId":1003
}
},
{
"id":1004,
"type":"col 2",
"layout":{
"size":3,
"outOf":12,
"parentId":1004
},
"elements":[
{
"id":1006,
"type":"text",
"label":"Account ID"
}
]
},
{
"id":1005,
"type":"col 3",
"layout":{
"size":6,
"outOf":12,
"parentId":1005
}
}
]
}
]
}]
I need a function that updates all nested objects' parentId attribute with the parent nested object's id.
I have the following function
_PREV_PARENT_ID = null;
assignParentIds(object){
Object.keys(object).forEach(key => {
console.log(`key: ${key}, value: ${object[key]}`)
if(key === "id"){
this._PREV_PARENT_ID = object[key];
}else if (typeof object[key] === 'object') {
if(!!this._PREV_PARENT_ID){
object[key]['parentId'] = this._PREV_PARENT_ID;
}
this.assignParentIds(object[key])
}
});
}
However, this function fails to set parent ids correctly for items in array
[
{
"id":1000,
"pageIndex":0,
"type":"page",
"label":"Page 1",
"rows":[
{
"id":1002,
"parentId":1000,
"type":"row 1",
"layout":{
"gutters":true,
"wrapping":false,
"guttersDirect":false,
"parentId":1002
},
"columns":[
{
"id":1003,
"parentId":1002, <--- Correct
"type":"col 1",
"layout":{
"size":3,
"outOf":12,
"parentId":1003
}
},
{
"id":1004,
"parentId":1003, <--- In-Correct
"type":"col 2",
"layout":{
"size":3,
"outOf":12,
"parentId":1004
},
"elements":[
{
"id":1006,
"parentId":1004,
"type":"text",
"label":"Account ID"
}
]
},
{
"id":1005,
"parentId":1006, <--- In-Correct
"type":"col 3",
"layout":{
"size":6,
"outOf":12,
"parentId":1005
}
}
]
}
]
}
]
I thought about also potentially ditching parentId attribute and instead to use a function that would return the parent nested, however it also suffers from the same issue (if I call the function on id = 1004, it returns the previous item in the array with id = 1003 instead of returning the object with id 1002.
_PARENT_OBJECT = null;
findParentByChildId(o, id) {
if( o.id === id ){
return o;
}else{
if(o.hasOwnProperty('id')){
this._PARENT_OBJECT = o;
}
}
var result, p;
for (p in o) {
if( o.hasOwnProperty(p) && typeof o[p] === 'object' ) {
result = this.findParentByChildId(o[p], id);
if(result){
return this._PARENT_OBJECT;
}
}
}
return result;
}
Since the use case is about using drag and drop functionality, the parentId will often be updated and seems like an uneccesary extra attribute that we need to keep track of, it would be best if I had a way to call a function findParentByChildId().
What would be the best way to manage this?
I wanted to take a chance to figure it out. I've made a walker function which goes through every level and array and brings the id of the previous level with it. Then when it gets a match on an id it returns the parent id you are looking for. Or when it has no match it returns null.
const data = [{
"id": 1000,
"pageIndex": 0,
"type": "page",
"label": "Page 1",
"rows": [{
"id": 1002,
"type": "row 1",
"layout": {
"gutters": true,
"wrapping": false,
"guttersDirect": false,
"parentId": 1002
},
"columns": [{
"id": 1003,
"type": "col 1",
"layout": {
"size": 3,
"outOf": 12,
"parentId": 1003
}
},
{
"id": 1004,
"type": "col 2",
"layout": {
"size": 3,
"outOf": 12,
"parentId": 1004
},
"elements": [{
"id": 1006,
"type": "text",
"label": "Account ID"
}]
},
{
"id": 1005,
"type": "col 3",
"layout": {
"size": 6,
"outOf": 12,
"parentId": 1005
}
}
]
}]
}];
const walkTree = (entry, matchId, parentId = null) => {
let result = null;
for (const { id, ...rest } of entry) {
if (matchId === id) {
return parentId;
}
parentId = id;
for (const value of Object.values(rest)) {
if (Array.isArray(value)) {
result = walkTree(value, matchId, parentId);
break;
}
}
}
return result;
};
const findParentByChildId = id => walkTree(data, id);
// ID's to look up parents of.
const lookupParents = [
1000,
1002,
1003,
1004,
1005,
1006,
1007
];
// Log results.
for (const id of lookupParents) {
console.log(`Parent of ${id}:`, findParentByChildId(id));
}

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.

Javascript deriving a Tree from a set of URLs

Guys am trying to create a dynamic menu list. There is no limit to the depth of elements that can be created by a user.
MY PROBLEM
My set of URL looks like this
var json_data = [
{
"title" : "Food",
"path" : "/root",
},
{
"title" : "Cloths",
"path" : "/root",
},
{
"title" : "Veg",
"path" : "/root/Food",
},
{
"title" : "Brinjal",
"path" : "/root/Food/Veg",
},
{
"title" : "T shirt",
"path" : "/root/Cloths",
},
{
"title" : "Shirt",
"path" : "/root/Cloths",
},
{
"title" : "Green brinjal",
"path" : "/root/Food/Veg/Brinjal",
}
];
I want the titles to be in a hierarchy format which I eventually will render in form of ul > li to create the menu - in front-end.
The Hierarchy should be something like this:
[
{
"title": "Food",
"path": "/root",
"children": [
{
"title": "Veg",
"path": "/root/Food",
"children": [
{
"title": "Brinjal",
"path": "/root/Food/Veg",
"children": [
{
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
"children": []
}
]
}
]
}
]
},
{
"title": "Cloths",
"path": "/root",
"children": [
{
"title": "T shirt",
"path": "/root/Cloths",
"children": []
},
{
"title": "Shirt",
"path": "/root/Cloths",
"children": []
}
]
}
]
WHAT I TRIED
// Add an item node in the tree, at the right position
function addToTree( node, treeNodes ) {
// Check if the item node should inserted in a subnode
for ( var i=0; i<treeNodes.length; i++ ) {
var treeNode = treeNodes[i];
// "/store/travel".indexOf( '/store/' )
if ( node.path.indexOf( treeNode.path + '/' ) == 0 ) {
addToTree( node, treeNode.children );
// Item node was added, we can quit
return;
}
}
// Item node was not added to a subnode, so it's a sibling of these treeNodes
treeNodes.push({
title: node.title,
path: node.path,
children: []
});
}
//Create the item tree starting from menuItems
function createTree( nodes ){
var tree = [];
for ( var i=0; i<nodes.length; i++ ) {
var node = nodes[i];
addToTree( node, tree );
}
return tree;
}
// variable = "json_data" is the set of URLS
var menuItemsTree = createTree( json_data );
console.log(menuItemsTree)
And the result it yields is this:
[
{
"title": "Food",
"path": "/root",
"children": [
{
"title": "Veg",
"path": "/root/Food",
"children": [
{
"title": "Brinjal",
"path": "/root/Food/Veg",
"children": [
{
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
"children": []
}
]
}
]
},
{
"title": "T shirt",
"path": "/root/Cloths",
"children": []
},
{
"title": "Shirt",
"path": "/root/Cloths",
"children": []
}
]
},
{
"title": "Cloths",
"path": "/root",
"children": []
}
]
The elements "T Shirt" and "Shirt" is pushed inside the Food's children:[] which those should be inside Cloth's children:[]
The solution I have used is taken from Here
I trying to derive an algorithm myself- but its not clicked exactly right yet. Please help if any one already has a solution. In case if I can derive a solution myself, I will share it here.
above code is
Thanks
Below is the logic. here is a Working Fiddle
var json_data = [{
"title": "Food",
"path": "/root",
}, {
"title": "Cloths",
"path": "/root",
}, {
"title": "Veg",
"path": "/root/Food",
}, {
"title": "Brinjal",
"path": "/root/Food/Veg",
}, {
"title": "T shirt",
"path": "/root/Cloths",
}, {
"title": "Shirt",
"path": "/root/Cloths",
}, {
"title": "Green brinjal",
"path": "/root/Food/Veg/Brinjal",
},{
"title": "Test cloth",
"path": "/root/Cloths/Shirt",
}];
// Add an item node in the tree, at the right position
function addToTree(node, treeNodes) {
var parentNode = GetTheParentNodeChildArray(node.path, treeNodes) || treeNodes;
parentNode.push({
title: node.title,
path: node.path,
children: []
});
}
function GetTheParentNodeChildArray(path, treeNodes) {
for (var i = 0; i < treeNodes.length; i++) {
var treeNode = treeNodes[i];
if (path === (treeNode.path + '/' + treeNode.title)) {
return treeNode.children;
}
else if (treeNode.children.length > 0) {
var possibleParent = false;
treeNode.children.forEach(function(item) {
if (path.indexOf(item.path + '/' + item.title) == 0) {
possibleParent = true;
return false;
}
});
if (possibleParent) {
return GetTheParentNodeChildArray(path, treeNode.children)
}
}
}
}
//Create the item tree starting from menuItems
function createTree(nodes) {
var tree = [];
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
addToTree(node, tree);
}
return tree;
}
// variable = "json_data" is the set of URLS
var menuItemsTree = createTree(json_data);
console.log(menuItemsTree);
Limitation of this logic: This logic works if the parent node is parsed before the child nodes, hence it is recommended to sort the list of
URLs ( i.e. json_data[] ) likewise. Here's a snippet of Sorting-before + tree-structuring-the-sorted
Hope this is helpful

Categories