How to restructure object with JavaScript?

Question

How to turn an object from this one:

{
 "x1": {
 "src": "https://....png",
 "webp": "https://....webp"
 },
 "x2": {
 "src": "https://....png",
 "webp": "https://....webp"
 }
}

to this one:

[
 {
 srcSet: 'https://....webp 1x, https://....webp 2x'
 },
 {
 srcSet: 'https://....png 1x, https://....png 2x'
 }
]

I'm stuck with it, tried different object methods but always coming up with the same code which doesn't work as I expect it.

• Jonas Wilms: Object.values then .map.

Answer 1

You could get the entries and then map the values with keys for each index.

var data = { x1: { src: "https://....png", webp: "https://....webp" }, x2: { src: "https://....png", webp: "https://....webp" } },
 result = Object
 .entries(data)
 .reduce((r, [k, o]) => Object
 .values(o)
 .map((p, i) => ({ srcSet: [].concat(r[i] && r[i].srcSet || [], `${p} ${k}`).join(', ') })),
 []
 );
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Here's a one-liner approach:

const obj = {
 "x1": {
 "src": "https://....png",
 "webp": "https://....webp"
 },
 "x2": {
 "src": "https://....png",
 "webp": "https://....webp"
 }
}
// one-liner
const result = Object
.entries(obj)
.map(r => ({ srcSet: Object.values(r[1]).map(v => [v, r[0]].join(' ')).join(',') }));
console.log(result);