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
– Andreas, Commented Oct 12, 2019 at 16:08

Patrick Roberts · Accepted Answer · 2019-10-12 16:26:48Z

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, 2019 at 16:26

answered Oct 12, 2019 at 16:09

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Khadam Ikhwanus Over a year ago

it is returning "TypeError: data.flatMap is not a function"

Patrick Roberts Over a year ago

@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.

Khadam Ikhwanus Over a year ago

i'm do it in my terminal and using node js version 10.16.3

Khadam Ikhwanus Over a year ago

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 ?

Patrick Roberts Over a year ago

@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.

|

Nenad Vracar · Accepted Answer · 2019-10-12 16:25:21Z

4

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);

edited Oct 12, 2019 at 16:25

answered Oct 12, 2019 at 16:09

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

4 Comments

Mulan Over a year ago

this is precisely what .flatMap does

Khadam Ikhwanus Over a year ago

flatmap cannot be used in my console , i think this might work ,but can you explain where r and rest came from

Nenad Vracar Over a year ago

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 Over a year ago

@Khadam Ikhwanus For better understanding you could also do this jsfiddle.net/t28uy79g/1

Collectives™ on Stack Overflow

transform array of object into new array following with its child

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related