How to flatten JavaScript objects

Question

I need to transform from one schema to another. Is there any way of achieving this without doing a for loop?

Original data

[
  {
    "browser": "Chrome",
    "count": 73,
    "verdict": "detected"
  },
  {
    "browser": "Opera",
    "count": 3,
    "verdict": "detected"
  },
  {
    "browser": "Chrome",
    "count": 3,
    "verdict": "blocked"
  },
  {
    "browser": "Edge",
    "count": 1,
    "verdict": "detected"
  }
]

Transformed data

[
  {
    "browser": "Chrome",
    "detected":73,
    "blocked":3
  },
  {
    "browser": "Opera",
    "detected": 3,
    "blocked": 0
  },
  {
    "browser": "Edge",
    "detected": 1,
    "blocked": 0
  }
]

Why not use an object for the result? { Chrome: { ... }, Opera: { ... }, ... } — k.tten
– k.tten, Commented Oct 25, 2022 at 19:39
Get familiar with how to access and process objects, arrays, or JSON, and how to create objects, and use the static and instance methods of Object and Array. — Sebastian Simon
– Sebastian Simon, Commented Oct 25, 2022 at 19:44

k.tten · Accepted Answer · 2022-10-25 19:47:25Z

Group them by the browser as a unique key, then the result is as easy as getting the values in the object.

const data=[{"browser":"Chrome","count":73,"verdict":"detected"},{"browser":"Opera","count":3,"verdict":"detected"},{"browser":"Chrome","count":3,"verdict":"blocked"},{"browser":"Edge","count":1,"verdict":"detected"}];

const grouped = data.reduce((o, { browser, count, verdict }) => {
    // If it's not in the map yet, add it as an empty entry
    if (!(browser in o)) o[browser] = { browser, detected: 0, blocked: 0 };
    
    // By now, it must be in the map, so it's as easy as adding the count to the verdict
    o[browser][verdict] += count;

    // Return modified map for the next iteration
    return o;
}, {});

const result = Object.values(grouped); // Get the values of the map

console.log(result); // Done!

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

See destructuring if you're wondering about what (o, { browser, count, verdict }) => is doing, and the in operator for checking if a key exists in an object.

GalAbra · Accepted Answer · 2022-10-25 19:45:19Z

I'd create a temporary map, so it can be accessed by its keys.
Then you can iterate the elements and update the temp map:

const initial = [{
    "browser": "Chrome",
    "count": 73,
    "verdict": "detected"
  },
  {
    "browser": "Opera",
    "count": 3,
    "verdict": "detected"
  },
  {
    "browser": "Chrome",
    "count": 3,
    "verdict": "blocked"
  },
  {
    "browser": "Edge",
    "count": 1,
    "verdict": "detected"
  }
];

const defaultValues = {
  detected: 0,
  blocked: 0
};
const ans = initial.reduce((acc, element) => {
  const {
    browser,
    verdict,
    count
  } = element;
  acc[browser] = {
    browser,
    ...(acc[browser] || defaultValues),
    [verdict]: count,
  };
  return acc;
}, {});

console.log(Object.values(ans));

Collectives™ on Stack Overflow

How to flatten JavaScript objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related