transform array of object into new array following with its child

Question

i have an array like this

var data = [
    {
        name: "Movies", info: "category_name",
        content: [
            { name: "Interstellar", info: "category_data" },
            { name: "Dark Knight", info: "category_data" },
        ]
    },
    {
        name: "Music", info: "category_name",
        content: [
            { name: "Adams", info: "category_data" },
            { name: "Nirvana", info: "category_data" },
        ]
    },
    {
        name: "Places", info: "category_name",
        content: [
            { name: "Jordan", info: "category_data" },
            { name: "Punjab", info: "category_data" },
        ]
    },
]

and a want to transform it into like this

var transformedArray= [
  { name: "Movies", info: "category_name" },
  { name: "Interstellar", info: "category_data" },
  { name: "Dark Knight", info: "category_data" },
  { name: "Music", info: "category_name" },
  { name: "Adams", info: "category_data" },
  { name: "Nirvana", info: "category_data" },
  { name: "Places", info: "category_name" },
  { name: "Jordan", info: "category_data" },
  { name: "Punjab", info: "category_data" },
]

i dont know what is the keyword suitable for this case , i have tried mapping it into new array but it's not same like i expected

var newArr = []

var manipulate = data.map(item => {
    return (
        newArr.push(item),
        new1.map(items => {
            return (
                new1.push(items)
            )
        })
    )
})

then how to manipulate "data" into "transformedArray"

Would you mind explaining your code? It doesn't make that much sense (at least for me) — Andreas, Oct 12 '19 at 16:08

Patrick Roberts · Accepted Answer · 2019-10-12T16:26:48.903

6

Use Array.prototype.flatMap(). If your browser or version of Node.js does not yet natively support this function, you can include a simple polyfill below, based on the specification:

if (!Array.prototype.flatMap) {
  Object.defineProperty(Array.prototype, 'flatMap', {
    configurable: true,
    writable: true,
    value: function flatMap (callback, thisArg = undefined) {
      return this.reduce((array, ...args) => {
        const element = callback.apply(thisArg, args);

        if (Array.isArray(element)) array.push(...element);
        else array.push(element);

        return array;
      }, []);
    }
  });
}

const data = [{name:'Movies',info:'category_name',content:[{name:'Interstellar',info:'category_data'},{name:'Dark Knight',info:'category_data'}]},{name:'Music',info:'category_name',content:[{name:'Adams',info:'category_data'},{name:'Nirvana',info:'category_data'}]},{name:'Places',info:'category_name',content:[{name:'Jordan',info:'category_data'},{name:'Punjab',info:'category_data'}]}];
const transformedArray = data.flatMap(({ content, ...o }) => [o, ...content]);

console.log(transformedArray);

edited Oct 12 '19 at 16:26

answered Oct 12 '19 at 16:09

Patrick Roberts

49,224
10
102
153

it is returning "TypeError: data.flatMap is not a function" – Khadam Ikhwanus Oct 12 '19 at 16:17
1

@KhadamIkhwanus it's a relatively new function in the specification, you might need a polyfill depending on what browser you're using. I'll update my answer to include that in just a second. – Patrick Roberts Oct 12 '19 at 16:18
i'm do it in my terminal and using node js version 10.16.3 – Khadam Ikhwanus Oct 12 '19 at 16:20
thankyou somuch brother you made my day ,but why i can't use flatmap directly ? is it the my node js problem or anything else ? – Khadam Ikhwanus Oct 12 '19 at 16:34
@KhadamIkhwanus your version of Node.js is not problematic, it just doesn't support ES2019 specification. I believe `flatMap` support isn't available until Node v12.x. – Patrick Roberts Oct 12 '19 at 16:35
the only improvement I would do here would be to change `o` to some other letter to avoid confusion visually with `0` in some fonts – Mark Schultheiss Oct 12 '19 at 16:43
@MarkSchultheiss `o` is a common abbreviation for a generic object. If your editor's font cannot differentiate `o` from `0`, I suggest you find a different font that can. – Patrick Roberts Oct 12 '19 at 16:45

Nenad Vracar · Answer 2 · 2019-10-12T16:25:21.323

You could do this using reduce method and spread syntax ....

var data = [{"name":"Movies","info":"category_name","content":[{"name":"Interstellar","info":"category_data"},{"name":"Dark Knight","info":"category_data"}]},{"name":"Music","info":"category_name","content":[{"name":"Adams","info":"category_data"},{"name":"Nirvana","info":"category_data"}]},{"name":"Places","info":"category_name","content":[{"name":"Jordan","info":"category_data"},{"name":"Punjab","info":"category_data"}]}]

const result = data.reduce((r, {content, ...rest}) => {
  r.push({...rest}, ...content)
  return r;
}, []);

console.log(result);

You can also use concat and reduce instead of spread syntax.

var data = [{"name":"Movies","info":"category_name","content":[{"name":"Interstellar","info":"category_data"},{"name":"Dark Knight","info":"category_data"}]},{"name":"Music","info":"category_name","content":[{"name":"Adams","info":"category_data"},{"name":"Nirvana","info":"category_data"}]},{"name":"Places","info":"category_name","content":[{"name":"Jordan","info":"category_data"},{"name":"Punjab","info":"category_data"}]}]
const result = data.reduce((r, {content, ...rest}) => r.concat(rest, content), []);
console.log(result);

flatmap cannot be used in my console , i think this might work ,but can you explain where r and rest came from — Khadam Ikhwanus, Oct 12 '19 at 16:25
`r` is the accumulator parameter and next parameter is current object in iteration so we use parameter destructuring to get the content property and also rest parameter to get the rest of the properties. — Nenad Vracar, Oct 12 '19 at 16:27
@Khadam Ikhwanus For better understanding you could also do this https://jsfiddle.net/t28uy79g/1/ — Nenad Vracar, Oct 12 '19 at 16:33

transform array of object into new array following with its child

2 Answers2

Linked