We Keep Coding

How to transform nested object of objects into array of objects

Hi all I have the following code
the data that I want to transform.
const obj = {
numbers: {
label: "main numbers",
pageTitle: "Numbers",
key: "1",
items: {
firstNumber: {
label: "first number",
pageTitle: "first",
key: "first"
},
secondNumber: {
label: "second number",
pageTitle: "second",
key: "second"
}
}
},
letters: {
label: "main Letters",
pageTitle: "Letters",
key: "2",
items: {
firstLetter: {
label: "first Letter",
pageTitle: "first",
key: "first"
}
}
},
signs: {
label: "main sign",
pageTitle: "Sign",
key: "3"
}
};
In my obj variable I have 3 other objects
numbers object which has items property which includes 2 other objects.
letters object which has items property which includes only one object.
signs object.
I need to transform my obj to the following way.
[
{
label:"main numbers",
pageTitle:"Numbers",
key:1,
children: [{label,pageTitle,key},{label,pageTitle,key}]
},
{
label:"main Letters",
pageTitle:"Letters",
key:1,
children: [{label,pageTitle,key}]
},
{
label:"main sign",
pageTitle:"Sign",
key:1,
children: []
},
]
for that transformation, I wrote the following code.
const transformedData = Object.values(obj).map((menuitem) => menuitem);
const data = [];
transformedData?.map((x) => {
const newData = {};
newData.label = x.label;
newData.pageTitle = x.pageTitle;
newData.key = x.key;
newData.children = x?.Object?.values(items)?.map((el) => {
newData.children.label = el.label;
newData.children.pageTitle = el.pageTitle;
newData.children.key = el.key;
});
data.push(newData);
});
Everything was working, but for children instead of printing an array it prints undefined.
Please help me to resolve this issue.

I created a function for your case.
const convert = data =>
Object.values(data)?.map(x => ({
label: x.label,
pageTitle :x.pageTitle ,
key: x.pathname,
children: x.items
? Object.values(x.items || {}).map(el => ({ label: el.label,
key:el.pathname,pageTitle:el.pageTitle }))
: null,
}));
You can use like const items = convert(obj).

xdoesn't have Objects. Change it to:
newData.children = Object.values(x.items)?.map(/*...*/);

Is this what you're after?
const transformedData = Object.values(obj).map((menuitem) => menuitem);
const data = [];
transformedData?.map((x) => {
const newData = {};
newData.label = x.label;
newData.pageTitle = x.pageTitle;
newData.key = x.key;
if(x.hasOwnProperty('items')){
newData.children = Object.values(x.items).map((el) => {
const obj={
label:el.label,
pageTitle:el.pageTitle,
key:el.key
}
return obj
})};
data.push(newData);
});
console.log(data)
Your code return undefined because inside map you didn't return anything so newData.children was never populated with anything.
Also, I think accessing and assigning newData.children.label was problematic since there was no newData.children yet. So we declare a temp obj inside map and we return it
Lastly we need to check if items is a property that exists in the first place.

Updating JSON structure based on id

I was trying to update the town name in the below-given JSON structure.
"City":[
{
"Name":"Delhi",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
"Towns":[
{
"Name":"MG Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
},
{
"Name":"DLF Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
}
]
},
{
"Name":"Pune",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
"Towns":[
{
"Name":"Hadapsar",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
},
{
"Name":"Magarpatta",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
}
]
}
]
I wanted to change the town name from "Hapdasar" to "Viman Nagar" if my cid matches that of Hadapsar Town
Output which I wanted was:
"City":[
{
"Name":"Delhi",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
"Towns":[
{
"Name":"MG Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
},
{
"Name":"DLF Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
}
]
},
{
"Name":"Pune",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
"Towns":[
{
"Name":"Viman Nagar",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
},
{
"Name":"Magarpatta",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
}
]
}
]
I was using js map to iterate but was confused about how to replicate the exact structure.

Well, map alone is not enough to solve your problem, since you have two nested arrays. Maybe you can consider the possibility to use maptwice?
For example:
var cid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax";
var newName = "Viman Nagar";
City = City.map(function(city) {
city.towns = city.towns.map(function(town) {
if (town.cid === cid)
town.name = newName;
return town;
});
return city;
});

Atribute your object for
let cities = [{
"Name": "Delhi"
...
}]
and then you can map over it
let result = cities.map(city => city.Towns.map(town => {
if (town.Name === "Hadapsar") {
return {
...town,
Name: "Viman Nagar"
}
} else return town
}))

Use Array#map as follows:
Iterate over cities
In every iteration, iterate over Towns. If current town's cid is equal to the one to change, update its Name
const changeTownName = (cities = [], cid, name) =>
cities.map(({ Towns = [], ...props }) => ({
...props,
Towns: Towns.map(town => town.cid === cid
? { ...town, Name: name }
: { ...town }
)
}));
const cities = [
{ Name: 'Delhi', id: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd', Towns: [ { Name: "MG Colony", conditionId: '60d1f5eb-0222-4a84-879b-6699b0cfc1a4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd' }, { Name: "DLF Colony", conditionId: '60d1f5eb-0222-4a84-879b-7749b0cfc1a4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd' } ] },
{ Name: 'Pune', id: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax', Towns: [ { Name: "Hadapsar", conditionId: '60d1f5eb-0222-4a84-879b-6699b0cfc1x4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax' }, { Name: "Magarpatta", conditionId: '60d1f5eb-0222-4a84-879b-7749b0cfc1f4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bax' } ] }
];
console.log( changeTownName(cities, 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax', 'Viman Nagar') );

If you consider city as cities this code can help you;
cities.forEach(city => {
city.Towns = city.Towns.map(el => {
if (el.Name === 'Hapdasar') {
el.Name = 'Viman Nagar';
}
return el;
})
});

You'll need to loop for each city in your array, and each town in the city. If the cid matches the town's cid, then change it;
const myNewTownName = "Viman Nagar";
const cid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax";
for(let i = 0; i < myObj.City.length; i++){
const city = myObj.City[i];
for(let j = 0; j < city.Towns.length; j++){
const town = city.Towns[j];
if(cid === town.cid){
town.Name = myNewTownName;
}
city.town[j] = town;//Updates city with the updated town
}
myObj.City[i] = city; //Updates myObj with the updated city
}

The result can also be obtained using nested .forEach loops to parsing through the outer and inner arrays, with an if block to examine the cid for the target town.
const data = {
"City":[
{
"Name":"Delhi",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
"Towns":[
{
"Name":"MG Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
},
{
"Name":"DLF Colony",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
}
]
},
{
"Name":"Pune",
"id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
"Towns":[
{
"Name":"Hadapsar",
"conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
},
{
"Name":"Magarpatta",
"conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
"cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
}
]
}
]
} // end data;
const targetCid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"; // cid for Hadapsar;
const objArray = data.City;
objArray.forEach(element => {
element.Towns.forEach(element => {
if (element.cid == targetCid) {
element.Name = "Viman Nagar";
} // end if;
}); // next object in Towns array;
}); // next object in objArray;
document.getElementById('output').textContent = JSON.stringify(data, undefined, 2);
#output {
white-space: pre;
}
<pre id="output"></pre>

How to get values in an array of objects using another array - Javascript

I have a function that interacts with 2 arrays, 1st array is an array of objects that contain my dropdown options, second array is an array of values. I'm trying to filter the 1st array to return what has matched the values in my 2nd array. How do I achieve this?
1st Array:
const books = [
{
label: "To Kill a Mockingbird",
value: 1
},
{
label: "1984",
value: 2
},
{
label: "The Lord of the Rings",
value: 3
},
{
label: "The Great Gatsby",
value: 4
}
]
Code Snippet below:
const idString = "1,2,3";
function getSelectedOption(idString, books) {
const ids = idString.split(",");
const selectedOptions = [];
ids.map(e => {
const selected = books.map(options => {
if (options.value === e){
return {
label: options.label,
value: options.value
}
}
})
selectedOptions.push(selected)
})
return selectedOptions
}
Result:
[
[undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined]
]
Expected Result:
[
{
label: "To Kill a Mockingbird",
value: 1
},
{
label: "1984",
value: 2
},
{
label: "The Lord of the Rings",
value: 3
}
]

Assuming that value is unique, you can update your code as following to get them in order.
const idString = "1,2,3";
function getSelectedOption(idString, books) {
const ids = idString.split(",");
return ids.map(id => books.find(book => book.value == id)).filter(Boolean)
}
You can also filter the books array if you don't care about the order or in case that the value is not unique.
const idString = "1,2,3";
function getSelectedOption(idString, books) {
const ids = idString.split(",");
return books.filter(book => ids.includes(book.value.toString()))
}
Please note that these are O(n*m) algorithms and it should not be used with large sets of data, however if one of the arrays is relatively small you can use it.

function getSelectedOption(idString, books) {
const idArray = convertStringToArray(idString)
return books.filter(item => idString.includes(item.value))
}
function convertStringToArray(string) {
return string.split(",")
}

Using an array filter:
function getSelectedOption(idString, books) {
const ids = idString.split(",");
return books.filter((item) => ids.includes(item.value.toString()));
}
const books = [{
label: "To Kill a Mockingbird",
value: 1
},
{
label: "1984",
value: 2
},
{
label: "The Lord of the Rings",
value: 3
},
{
label: "The Great Gatsby",
value: 4
}
]
const idString = "1,2,3";
getSelectedOption(idString, books);
console.log(getSelectedOption(idString, books));

Some fixes to your solution
After split idString, it would result in array of string value, so you have to cast it to number
Instead of use map to get selected, you should use find
const books = [
{
label: 'To Kill a Mockingbird',
value: 1
},
{
label: '1984',
value: 2
},
{
label: 'The Lord of the Rings',
value: 3
},
{
label: 'The Great Gatsby',
value: 4
}
]
const idString = '1,2,3'
function getSelectedOption(idString, books) {
const ids = idString.split(',').map(Number)
const selectedOptions = []
ids.forEach(e => {
const selected = books
.map(options => {
if (options.value === e) {
return {
label: options.label,
value: options.value
}
}
})
.filter(options => options !== undefined)
selectedOptions.push(selected[0])
})
return selectedOptions
}
console.log(getSelectedOption(idString, books))

javascript overwrite previous element added to array

When i push into my array, it overwrite the last element added.
Here is my code:
const array = [{ name: [] }];
const test = `result1
result2
result3`;
const ways = test.split(/[\n\r]+/).map(aaa => (aaa));
array.forEach((obj) => {
ways.forEach((element) => {
obj.item = [{ result: element }];
});
});
The output i get :
[
{
"name": [],
"item": [{ "result": "result3" }]
}
]
The output i want :
[
{
"name": [],
"item": [
{ "result": "result1" },
{ "result": "result2" },
{ "result": "result3" }
]
}
]

const array = [{ name: [] }];
const test = `result1
result2
result3`;
const ways = test.split(/[\n\r]+/).map(aaa => (aaa));
array.map((obj) => {
obj.item = [];
ways.map((element) => {
obj.item .push([{ result: element }]);
});
});
console.log(array);

You have to declare obj.item as an array and instead of equating values you should push them in the array
const array = [{
name: []
}];
const test = `result1
result2
result3`;
const ways = test.split(/[\n\r]+/).map(aaa => (aaa));
array.forEach((obj) => {
obj.item = [];
ways.forEach((element) => {
obj.item.push({
result: element
});
});
});
console.log(array)

Using reduce method
const test = `result1
result2
result3`;
const res = test.split(/[\n\r]+/).map(aaa => (aaa)).reduce((all, acc) => {
const [a] = all
a.item.push({
"result": acc
})
return all
}, [{
name: [],
item: []
}])
console.log(res)

How to create a single object from key-value pairs objects in JavaScript?

I have several objects and I want to create another one that will have keys from a particular array (const props = []), and values from those objects - if it only exists in those objects, but if not - I want to push null or some other fake values.
My code:
const props = ["name", "price", "qty", "category"]
let len = props.length;
const obj_1 = {
name: "Product_1",
price: 120,
category: 'phone'
}
const obj_2 = {
name: "Product_2",
price: 7893,
category: 'program_eq',
qty: 5
}
const final_obj = {
name: ["Product_1", "Product_2"],
price: [120, 7893],
category: ["phone", "program_eq"],
qty: [null, 5]
}
I have spent lots of time with this problem and have some solution - but it gives me only the first object.
I am using lodash/map and it helps me to work with different type of collection.
You can see my solution bellow:
const final_obj = {};
const props = ["name", "price", "qty", "category"];
let len = props.length;
const obj = {
c1s6c156a1cascascas: {
item: {
name: "Product_1",
price: 120,
category: "phone"
}
},
c454asc5515as41cas78: {
item: {
name: "Product_2",
price: 7893,
category: "program_eq",
qty: 5
}
}
};
_.map(obj, (element, key) => {
console.log(element.item);
while (len) {
let temp = props.shift();
let tempData = [];
if (element.item.hasOwnProperty([temp])) {
tempData.push(element.item[temp]);
} else {
tempData.push("---");
}
final_obj[temp] = tempData;
len--;
}
});
console.log(final_obj);
//
category:["phone"]
name:["Product_1"],
price:[120],
qty:["---"],

You could do this with reduce() method that will return object and inside use forEach() loop.
const props = ["name", "price", "qty", "category"];
const obj = {"c1s6c156a1cascascas":{"item":{"name":"Product_1","price":120,"category":"phone"}},"c454asc5515as41cas78":{"item":{"name":"Product_2","price":7893,"category":"program_eq","qty":5}}}
const result = Object.values(obj).reduce((r, e) => {
props.forEach(prop => {
if(!r[prop]) r[prop] = []
r[prop].push(e.item[prop] || null)
})
return r;
}, {})
console.log(result)

This is how I would handle it:
const final_obj = { };
const props = ["name", "price", "qty", "category"];
const obj = {"c1s6c156a1cascascas":{"item":{"name":"Product_1","price":120,"category":"phone"}},"c454asc5515as41cas78":{"item":{"name":"Product_2","price":7893,"category":"program_eq","qty":5}}}
// set up each property as an empty array in the object
props.forEach(item => {
final_obj[item] = [];
});
// this iterates over every property in the object
_.forOwn(obj, value => {
props.forEach(item => {
// just push the values undefined or no into each property array
final_obj[item].push(value.item[item]);
});
});
console.log(final_obj);

You can do as well using some lodash functions.
Transform the array of props into an object which keys are the values of props and which values are extracted from the object. If the property doesn't exist in the object, return null.
const getValFromObj = (obj, key) => _.map(obj, _.partial(_.get, _, key, null));
const setValInResult = (res, key) => _.set(res, key, getValFromObj(obj, 'item.' + key));
const groupByProps = (props, obj) => _.transform(props, setValInResult, {});
const props = ["name", "price", "qty", "category"];
const obj = {
"c1s6c156a1cascascas": {
"item": {
"name": "Product_1",
"price": 120,
"category": "phone"
}
},
"c454asc5515as41cas78": {
"item": {
"name": "Product_2",
"price": 7893,
"category": "program_eq",
"qty": 5
}
}
}
console.log(groupByProps(props, obj));
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.5/lodash.min.js"></script>