i have an array of objects of the below format
each with a unique 'sub-task' entry, each of this sub-task is to be embedded as a children element of each unique 'task' from the 'tasks' array
[
{
"sub-task":"abc",
"task":"alpha1"},
{
"sub-task":"def",
"task":"alpha1"},
{
"sub-task":"ijkl",
"task":"proto"},
{
"sub-task":"mno",
"task":"def"},
{
"sub-task":"qrs",
"task":"proto"},
{
"sub-task":"asdf",
"task":"mno"},
]
i was trying to frame an another array of below format
[
{
"name":"alpha1",
"children":[
{
"name":"abc"
},
{
"name":"def",
"children":[
{
"name":"mno"
}
]
}
]
},
{
"name":"proto",
"children":[
{
"name":"ijkl"
},
{
"name":"qrs",
"children":[
{
"name":"asdf"
}
]
}
]
}
]
i was trying of below logic, but ended up with no solution...
var treeData = [];
for( var ele of tasks){
recurOn(treeData,ele);
}
function recurOn(arr,obj){
if(arr.length == 0){
treeData.push({name:obj.parentGroup,children:[{name:obj.groupName}]})
//console.log(treeData);
return 1;
}else {
for(var item of treeData){
if(item.name == obj.parentGroup){
//console.log('item: ', item);
item.children.push({name:obj.groupName});
break;
}
else {
treeData.push(recurOn([],obj))
}
}
return 1;
}
}
//console.log(treeData);
//console.log(result);
Since the no of levels an elements holds is not known i was unable to fix for a logic
Use a map to store object reference.
let input = [
{ "sub-task": "abc", "task": "alpha1" },
{ "sub-task": "def", "task": "alpha1" },
{ "sub-task": "ijkl", "task": "proto" },
{ "sub-task": "mno", "task": "def" },
{ "sub-task": "qrs", "task": "proto" },
{ "sub-task": "asdf", "task": "mno" },
];
let map = new Map, result = [];
input.forEach(({ ["sub-task"]: name, task }) => {
let node = map.get(task), child = { name, children: [] };
if (!node) {
map.set(task, node = { name: task, children: [] });
result.push(node);
}
map.set(name, child);
node.children.push(child);
})
console.log(result);
I am working on a solution where I have a deep array of parent having child elements
Here is how the array look like
[
{
"id": "1",
"Name": "John Doe",
"children":
[
{
"id": "1.1",
"name": "John doe 1.1"
},
{
"id:": "1.2",
"name:": "John doe 1.2"
},
{
"id": "1.3",
"name": "John doe 1.3",
"children":
[
{
"id": "1.3.1",
"name": "John doe 1.3.1"
}
]
}
]
},
{
"id": "2",
"Name": "Apple",
"children":
[
{
"id": "2.1",
"name": "Apple 2.1"
},
{
"id:": "1.2",
"name:": "Apple 1.2"
}
]
}
]
basically, I have a functionality where I have a table whenever the user clicks on a row I want to add children related to that row,
For example, whenever I click on the row with id 1, I call click function by passing row as an argument, find an index for row and append children under that along with maintaining state, my solution works only for one level nested child, suppose if I want to add children property under children it's not working
Here is the function that I wrote
const expandRow = (row) => {
const index = _(this.state.data)
.thru(function(coll) {
return _.union(coll, _.map(coll, 'children') || []);
})
.flattenDeep()
.findIndex({ id: row.id });
console.log(index)
if (index !== -1) {
let prevState = [...this.state.data];
let el = _(prevState)
.thru(function(coll) {
return _.union(coll, _.map(coll, 'children') || []);
})
.flattenDeep()
.find({ id: row.id });
console.log(el)
el.children = [
{ id: '_' + Math.random().toString(36).substr(2, 5), name: "sfsdfds1", isExpanded:false,parentId:row.id },
{ id: '_' + Math.random().toString(36).substr(2, 5), name: "sfsdfds2",isExpanded:false,parentId:row.id },
];
this.setState({data:[...this.state.data],prevState},()=>{console.log(this.state.data)})
}
updateState(row.id, { isExpanded: true });
};
I also want to maintain state along with it so whenever the user adds a new row my component re-render.
You need recursive function for this.below is the code I write in VueJs for parent child deep array. please take a look hope it's provide you some idea.
and one more thing my data structure is same as your.
let treeData= {
id:1,
type: 0,
status: 0,
parent_id:0,
children: [{
id:1,
type: 0,
status: 0,
parent_id:1,
children:[
{
id:1,
type: 0,
status: 0,
parent_id:1,
}
]
}],
}
ChangeCheckStatus(treedata, item, status) {
for (let i = 0; i < treedata.length; i++) {
if (treedata[i].id === item.id) {
treedata[i].selectAll = status;
return;
}
this.ChangeCheckStatus(treedata[i].children, item, status);
}
}
makeTreeViewThroughCsvData(csvData) {
const data = this.csvToJSON(csvData)
this.rows_new = [...this.rows_new, ...data];
this.rows_new.forEach((_data) => {
let newNode = {}
for (const key in _data) {
if (_data.hasOwnProperty(key)) {
newNode[key.trim()] = _data[key]
}
}
newNode['children'] = []
newNode['status'] = _data.status
/* eslint-disable */
newNode = rest
//variable hold new tree data
this.treeData.push(newNode)
})
this.generateFinalTreeData();
},
generateFinalTreeData() {
const root = []
const nodeIds = []
const mapping = {}
this.treeData.forEach(node => {
// No parentId means Node
if (node.parent_id != undefined) {
//increment NODE ID only when parent_is is not undefined
nodeIds.push(node.id)
}
if (node.parent_id == 0 || node.parent_id == 1) return root.push(node);
// Insert node as child of parent
let parentKey = mapping[node.parent_id];
if (typeof parentKey !== "number") {
parentKey = this.treeData.findIndex(el => el.id === node.parent_id);
mapping[node.parent_id] = parentKey;
}
if (!this.treeData[parentKey].children) {
return this.treeData[parentKey].children = [node];
}
this.treeData[parentKey].children.push(node);
});
this.finalTreeData = root
//vuex commit statement == Redux dispach
this.$store.commit('setTreeViewData', root);
this.$store.commit('setMaxNodeId', Math.max(...nodeIds) + 1);
}
I have an array of objects with items (only have name property) and groups (with a children property, they may contain items or other groups) and I need to get a full path to needle value, so in this case it'd be myObj[2]["children"][0]["children"][1]["children"][0], plus I'm limited to quite old JS version ECMA 262 (I'm using it inside Photoshop)
var myObj = [
{
"name": "group1",
"children": [
{
"name": "group2",
"children": [
{
"name": "item0"
}]
}]
},
{
"name": "item1"
},
{
"name": "needleGroup",
"children": [
{
"name": "needleNestedGroup",
"children": [
{
"name": "item3"
},
{
"name": "needleNestedDeeperGroup",
"children": [
{
"name": "needle"
}]
}]
}]
}];
My first idea was to transform object to array or arrays so it'd be easier to process, so my object became
[
[
[
"item0"
]
],
"item1",
[
[
"item3",
[
"needle"
]
]
]
];
But.. that's it. I can't figure out hot to track down only the indexes I need. Could you please point out a correct direction.
Use a recursive function to look for the item you want. Once the function find it, it will return an array. Each step back of the recursion will unshift the object key of this step:
function find(obj, item) {
for(var key in obj) { // for each key in obj (obj is either an object or an array)
if(obj[key] && typeof obj[key] === "object") { // if the current property (value of obj[key]) is also an object/array
var result = find(obj[key], item); // try finding item in that object
if(result) { // if we find it
result.unshift(key); // we shift the current key to the path array (result will be an array of keys)
return result; // and we return it to our caller
}
} else if(obj[key] === item) { // otherwise (if obj[key] is not an object or array) we check if it is the item we're looking for
return [key]; // if it is then we return the path array (this is where the path array get constructed)
}
}
}
The output of this function will be an array of keys leading to item. You can easily transform it to the format in the question:
function findFormatted(obj, item) {
var path = find(obj, item); // first let's get the path array to item (if it exists)
if(path == null) { // if it doesn't exist
return ""; // return something to signal its inexistance
}
return 'myObj["' + path.join('"]["') + '"]'; // otherwise format the path array into a string and return it
}
Example:
function find(obj, item) {
for(var key in obj) {
if(obj[key] && typeof obj[key] === "object") {
var result = find(obj[key], item);
if(result) {
result.unshift(key);
return result;
}
} else if(obj[key] === item) {
return [key];
}
}
}
function findFormatted(obj, item) {
var path = find(obj, item);
if(path == null) {
return "";
}
return 'myObj["' + path.join('"]["') + '"]';
}
var myObj = [{"name":"group1","children":[{"name":"group2","children":[{"name":"item0"}]}]},{"name":"item1"},{"name":"needleGroup","children":[{"name":"needleNestedGroup","children":[{"name":"item3"},{"name":"needleNestedDeeperGroup","children":[{"name":"needle"}]}]}]}];
console.log("find(myObj, \"needle\"): " + JSON.stringify(find(myObj, "needle")));
console.log("findFormatted(myObj, \"needle\"): " + findFormatted(myObj, "needle"));
Note: The indexes for the arrays are also formatted as strings, but that won't be a problem as someArray["2"] is equivalent to someArray[2].
I've created something you might use. The code below returns an Array of paths to keys, values, objects you are looking for.
See snippet and example to see what you can do.
To make it work you have to pass key and/or value you want to find in element and element which is an Array or Object.
It's written in newer JS standard but it shouldn't be a problem to compile it to older standard.
function findKeyValuePairsPath(keyToFind, valueToFind, element) {
if ((keyToFind === undefined || keyToFind === null) &&
(valueToFind === undefined || valueToFind === null)) {
console.error('You have to pass key and/or value to find in element!');
return [];
}
const parsedElement = JSON.parse(JSON.stringify(element));
const paths = [];
if (this.isObject(parsedElement) || this.isArray(parsedElement)) {
checkObjOrArr(parsedElement, keyToFind, valueToFind, 'baseElement', paths);
} else {
console.error('Element must be an Object or Array type!', parsedElement);
}
console.warn('Main element', parsedElement);
return paths;
}
function isObject(elem) {
return elem && typeof elem === 'object' && elem.constructor === Object;
}
function isArray(elem) {
return Array.isArray(elem);
}
function checkObj(obj, keyToFind, valueToFind, path, paths) {
Object.entries(obj).forEach(([key, value]) => {
if (!keyToFind && valueToFind === value) {
// we are looking for value only
paths.push(`${path}.${key}`);
} else if (!valueToFind && keyToFind === key) {
// we are looking for key only
paths.push(path);
} else if (key === keyToFind && value === valueToFind) {
// we ale looking for key: value pair
paths.push(path);
}
checkObjOrArr(value, keyToFind, valueToFind, `${path}.${key}`, paths);
});
}
function checkArr(array, keyToFind, valueToFind, path, paths) {
array.forEach((elem, i) => {
if (!keyToFind && valueToFind === elem) {
// we are looking for value only
paths.push(`${path}[${i}]`);
}
checkObjOrArr(elem, keyToFind, valueToFind, `${path}[${i}]`, paths);
});
}
function checkObjOrArr(elem, keyToFind, valueToFind, path, paths) {
if (this.isObject(elem)) {
checkObj(elem, keyToFind, valueToFind, path, paths);
} else if (this.isArray(elem)) {
checkArr(elem, keyToFind, valueToFind, path, paths);
}
}
const example = [
{
exampleArr: ['lol', 'test', 'rotfl', 'yolo'],
key: 'lol',
},
{
exampleArr: [],
key: 'lol',
},
{
anotherKey: {
nestedKey: {
anotherArr: ['yolo'],
},
anotherNestedKey: 'yolo',
},
emptyKey: null,
key: 'yolo',
},
];
console.log(findKeyValuePairsPath('key', 'lol', example)); // ["baseElement[0]", "baseElement[1]"]
console.log(findKeyValuePairsPath(null, 'yolo', example)); // ["baseElement[0].exampleArr[3]", "baseElement[2].anotherKey.nestedKey.anotherArr[0]", "baseElement[2].anotherKey.anotherNestedKey", "baseElement[2].key"]
console.log(findKeyValuePairsPath('anotherNestedKey', null, example)); //["baseElement[2].anotherKey"]
I came accross this issue and took the chance to create find-object-paths, which solves this problem: Finding paths in an object by either keys, values or key/value combinations.
NPM: find-object-paths
Github: getPaths
Example object:
{
"company": {
"name": "ACME INC",
"address": "1st Street, Toontown, TT",
"founded": "December 31st 1969",
"hasStocks": true,
"numberOfEmployees": 2,
"numberOfActors": 3
},
"employees": [
{
"employeeNumber": 1,
"name": "Hugo Boss",
"age": 65,
"isCEO": true
},
{
"employeeNumber": 2,
"name": "Herbert Assistant",
"age": 32,
"isCEO": false
}
],
"actors": [
{
"actorId": 1,
"name": "Bugs Bunny",
"retired": false,
"playedIn": [
{
"movie": "Who Framed Roger Rabbit",
"started": 1988
},
{
"movie": "Space Jam",
"started": 1996
},
{
"movie": "Looney Tunes: Back in Action",
"started": 2003
}
]
},
{
"actorId": 2,
"name": "Pepé le Pew",
"retired": true,
"playedIn": [
{
"movie": "For Scent-imental Reasons",
"started": 1949
}
]
},
{
"actorId": 3,
"name": "Marvin the Martian",
"retired": true,
"playedIn": [
{
"movie": "Marvin the Martian in the Third Dimension",
"started": 1996
},
{
"movie": "Duck Dodgers and the Return of the 24½th Century",
"started": 1980
},
{
"movie": "Hare-Way to the Stars",
"started": 1958
}
]
},
{
"actorId": 4,
"name": "Yosemite Sam",
"retired": false,
"playedIn": [
{
"movie": "Who Framed Roger Rabbit",
"started": 1988
},
{
"movie": "Space Jam",
"started": 1996
},
{
"movie": "Looney Tunes: Back in Action",
"started": 2003
}
]
}
],
"distributionChannels": [
"Celluloyd",
[
"VHS",
"Betamax",
"DVD",
"Blueray"
],
[
"channel",
12,
true
]
]
}
So, the basic usage could be:
import { findObjectPaths } from 'findObjectPaths';
class TestMe {
static async main() {
let acmeInc = {};
rawFileContent = fs.readFileSync(p.resolve(__dirname, 'acmeInc.json'), 'utf-8');
acmeInc = JSON.parse(rawFileContent);
let path = findObjectPaths(acmeInc, {key: 'founded'});
// company.founded
path = findObjectPaths(acmeInc, {value: 'December 31st 1969'});
// company.founded
const allPaths: string[] = findObjectPaths(acmeInc, {key: 'actorId'}) as string[];
/* [ 'actors[0].actorId',
'actors[1].actorId',
'actors[2].actorId',
'actors[3].actorId' ]
*/
const ceoPath = findObjectPaths(acmeInc, {key: 'isCEO', value: true});
// employees[0].isCEO
}
}
TestMe.main();
See the full documentation here: https://github.com/maugenst/getPaths#readme
BR
Assuming that you have a nested and repetitive pattern of objects in your data-set, the following solution would do the trick for you.
const nodePath = { value: [] };
function findTreeNodeAndPath(
targetNodeKey,
targetNodeValue,
nodeChildrenKey,
tree
) {
if (tree[targetNodeKey] === targetNodeValue) {
nodePath.value.push(tree);
return;
}
if (tree[nodeChildrenKey].length > 0) {
tree[nodeChildrenKey].forEach(children => {
if (nodePath.value.length < 1) {
findTreeNodeAndPath(
targetNodeKey,
targetNodeValue,
nodeChildrenKey,
children
);
}
});
} else if (tree[nodeChildrenKey].length === 0) {
return;
}
if (nodePath.value.length > 0) {
nodePath.value.push(tree);
}
}
const exampleData = {
name: "Root",
children: [
{
name: "A2",
children: [
{
name: "AC1",
children: [
{
name: "ACE1",
children: []
}
]
},
{
name: "AC2",
children: [
{
name: "ACF1",
children: []
},
{
name: "ACF2",
children: [
{
name: "ACFG1",
children: []
}
]
},
{
name: "ACF3",
children: [
{
name: "ACFH1",
children: []
}
]
}
]
}
]
}
]
};
findTreeNodeAndPath("name", "ACFG1", "children", exampleData);
console.log(nodePath.value)
The recursive part of the code will iterate on the children of the current node. The existing strategy here is depending on the nodePath.value having at least one element, which indicates that it found the targetted node. Later on, it'll skip the remaining nodes and would break out of recursion.
The nodePath.value variable will give you the node-to-root path.
I want to add data like this
category1
company1
company2
company3
category2
company1
company2
company3
my code
getlist() {
var list = this.lists;
var category
// var company
this.$http.get("/getlist")
.then((res) => {
var obj = res.data;
for(var [key] in obj) {
var company =[];
for(var i in obj[key].company) {
company.push( obj[key].company[i].name)
}
console.log(company);
list.push({
"category_name" : obj[key].name,
"companies": [
{name: company}
]
})
list.category_name = '',
list.companies = '',
company= ''
}
})
},
list form is look like this
{
category_name: 'Category1',
companies: [
{name: 'company1'},
]
},
and data is look like this
[
{
"name": "Category2",
"company": [
{
"name": "company1"
}
{
"name": "company2"
}
]
}
{
"name": "Category2",
"company": [
{
"name": "company1"
}
{
"name": "company2"
}
]
}
]
I don't know how to use forloop in this case.
Can it use double for loop in list.push()?
It is very tired for me..
As I understand, you just want to rename the keys of data objects you retrieve from the server.
This should do it:
getlist() {
this.$http.get('/getlist')
.then(res => {
let list = [];
for (let item of res.data) {
let newItem = {
category_name: item.name,
companies: item.company
}
list.push(newItem);
}
this.lists = list;
})
.catch(err => {
console.error('Error retrieving "/getlist":', err)
});
}
I am trying to parse the below JSON (format), flatten it out and get the required key / value (output) as mentioned below. I am trying to figure out the best way to do that.
I need to get the displayName and its corresponding parent
For Ex:
Features: taxoFeatures
Input:
{
"Shop": {
"subFilter": [
{
"taxoFeatures": {
"displayName": "Features"
}
},
{
"color_base": {
"displayName": "Colour"
}
}
],
"displayName": "Shopping"
},
"Support": {
"subFilter": [
{
"contentType": {
"displayName": "Content"
}
}
],
"displayName": "Support documents"
}
}
Expected output:
{
"Shopping": "Shop",
"Features":"taxoFeatures",
"Colour":"color_base",
"Content":"contentType",
"Support documents":"Support"
}
I was thinking of looping through the JSON and find the key and add the corresponding key and displayName value (and then loop through each child array and store those values as well). Any other ideas?
let customName = {};
for (const key in filter) {
if (filter.hasOwnProperty(key)) {
const value = filter[key];
if (isNotEmpty(value.displayName)) {
customName[value.displayName] = key;
}
}
}
You could use this recursive function which builds up the result object using reduce and Object.assign:
function transform(filter) {
return Object.keys(filter).reduce( (acc, key) => {
const value = filter[key];
if (Object(value) === value) { // it's an object
if ('displayName' in value) {
acc[value.displayName] = key;
}
Object.assign(acc, transform(value)); // recurse
}
return acc;
}, {});
}
// Sample input
const filter = {
"Shop": {
"subFilter": [
{
"taxoFeatures": {
"displayName": "Features"
}
},
{
"color_base": {
"displayName": "Colour"
}
}
],
"displayName": "Shopping"
},
"Support": {
"subFilter": [
{
"contentType": {
"displayName": "Content"
}
}
],
"displayName": "Support documents"
}
}
console.log(transform(filter));
Well, basically yes. You need to loop it throught, but as u have same code you can make a recursion, something like this:
function doit (json) {
let ret = {};
Object.keys(json).forEach((key) => {
const childs = (!!json[key].subFilter) ? json[key].subFilter.map(doit) : [];
ret = Object.assign(ret, { [json[key].displayName]: key }, ...childs);
});
return ret;
}
Here is another way to do it:
var data = {
"Shop": {
"subFilter": [
{
"taxoFeatures": {
"displayName": "Features"
}
},
{
"color_base": {
"displayName": "Colour"
}
}
],
"displayName": "Shopping"
},
"Support": {
"subFilter": [
{
"contentType": {
"displayName": "Content"
}
}
],
"displayName": "Support documents"
}
};
var res = {};
function search(obj){
for(item in obj) {
res[obj[item].displayName] = item;
if (obj[item].subFilter)
obj[item].subFilter.forEach((subitem)=>search(subitem));
}
}
search(data);
console.log(res);
JSFiddle: https://jsfiddle.net/7b6bcjfk/