It gets a specific result from my database which I have shown below:
const data = {
short: 'en',
element: {
'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
}
And I would like to apply a JavaScript operation to be able to get this result:
[
{
short: 'en',
key: "dsdsea-22dada-2ffgd-xxada-eeee.name"
value: "test name"
},
{
short: 'en',
key: "dsdsea-22dada-2ffgd-xxada-eeee.comment"
value: "test comment"
},
{
short: 'en',
key: "adad2a-dda13-dsdad-wwwwd-adaxx.name"
value: "name 2"
}
]
I have tried using a combination of Object.entries and the map function, but I don't know how to deal with double keys in a single element object.
This may be one possible solution to achieve the desired objective.
It uses Object.entries(), .map(), .flatMap() and template literal using backtick `` characters.
Code Snippet
const getTransformedArray = obj => (
Object.entries(obj.element) // iterate over 'element' key-value pairs
.flatMap(([k1, v1]) => ( // k1-v1 where v1 is object (with name, comment props)
Object.entries(v1) // iterate over v1's key-value pairs
.map(([k2, v2]) => ({ // map each iteration
short: obj.short, // create the resulting object
key: `${k1}.${k2}`, // 'key' is created using k1, k2
value: v2 // 'value' is v2 as-is
}))
)) // '.flatMap' used above avoids nesting of arrays
);
const data = {
short: 'en',
element: {
'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' }
}
};
console.log(getTransformedArray(data));Explanation
Inline comments in the code-snippet above explain how the code works.
EDIT
Answer updated to use .flatMap() as has been highlighted by @pilchard.
You'll need two loops to iterate over each element and then each value of those elements.
Here using for...of loops on the Object.entries() of each, destructuring at each level to apply relevant names to each property, and then creating a compound key value using a template literal
const data = {
short: 'en',
element: {
'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
}
}
const result = [];
for (const [key, element] of Object.entries(data.element)) {
for (const [prop, value] of Object.entries(element)) {
result.push({ short: data.short, key: `${key}.${prop}`, value })
}
}
console.log(result)Use Object.keys() to get the keys in element, then map the returned array using the key to access each element object and thus getting the name.
Here's the full code snippet:
const input = {
short: 'en',
element: {
'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
},
};
function format(data = {}) {
const { short = '', element = {} } = data;
let result = Object.keys(element).map((key) => {
return Object.values(element[key]).map((value) => ({ short, key, value }));
});
result = result.flat();
return result;
}
const result = format(input);
console.log(result)this prints:
[
{
"short": "en",
"key": "dsdsea-22dada-2ffgd-xxada-eeee",
"value": "test name"
},
{
"short": "en",
"key": "dsdsea-22dada-2ffgd-xxada-eeee",
"value": "test comment"
},
{
"short": "en",
"key": "adad2a-dda13-dsdad-wwwwd-adaxx",
"value": "name 2"
}
]