Javascript - transforming an object of array list to new formated one?

Viewed 83

I'm trying to transform an object contain array to another one with javascript. Below is an example of the object field and what the formatted one should look like.

let Fields = {
  GAME: [
    { code: '{{PES}}', title: { en: "playPES"} },
    { code: '{{FIFA}}', title: { en: "playFIFA " } },
  ]
};

I need The new Fields to looks like this

let newFields = {
name: 'GAME', 
tags:[
   { name: 'playPES', value: "{{PES}}" },
   { name: 'playFIFA', value: "{{FIFA}}" }
      ]},
 

One contributor suggested me a method like this but i think something need to modify in it but couldn't figure it out.

export const transform = (fields) => ({
  tags: Object .entries (fields) .map (([name, innerFields]) => ({
    name,
    tags: innerFields.map(({code, title: title: {en})=>({name: en, value: code}))
  }))
});

// newFields= transform(Fields)

I'm new working with javascript so any help is greatly appreciated, Thanks.

6 Answers

const transform = (o) => {
    return Object.entries(o).map((e)=>({
        name: e[0],
        tags: e[1].map((k)=>({name: (k.title)?k.title.en:undefined, value: k.code}))
    }))[0]
}

console.log(transform({
  GAME: [
    { code: '{{PES}}', title: { en: "playPES"} },
    { code: '{{FIFA}}', title: { en: "playFIFA " } },
  ]
}))

I think that this is more readable, but not easier... If you want the result as object you need to use reduce, because when you do this

Object.keys(Fields)

Your object transform to array, but reduce can change array to object back.

let Fields = {
  GAME: [
    { code: '{{PES}}', title: { en: "playPES"} },
    { code: '{{FIFA}}', title: { en: "playFIFA " } },
  ]
};

const result = Object.keys(Fields).reduce((acc, rec) => {
    return {
      name: rec,  
      tags: Fields[rec].map(el => {
        return {
          name: el.title.en,
          value: el.code
        }
    })
    }
}, {})

console.log(result)

Using the entries method you posted:

let Fields = {
  GAME: [
    { code: '{{PES}}', title: { en: "playPES"} },
    { code: '{{FIFA}}', title: { en: "playFIFA " } },
  ]
};

// 1. Obtain keys and values from first object
Fields = Object.entries(oldFields);

// 2. Create new object
const newFields = {};

// 3. Create the name key value pair from new Fields array
newFields.name = Fields[0][0];

// 4. Create the tags key value pair by mapping the subarray in the new Fields array
newFields.tags = Fields[0][1].map(entry => ({ name: entry.title.en, value: entry.code }));

Object.entries(Fields) will return this:

[
  "GAME",
  [TagsArray]
]

And Object.entries(Fields).map will be mapping this values.

The first map, will receive only GAME, and not an array.

Change the code to something like this:

export const transform = (Fields) => {
  const [name, tags] = Object.entries(Fields);

  return {
    name,
    tags: tags.map(({ code, title }) => ({
      name: title.en,
      value: code
    }))
  }
}

Hope it help :)

let Fields = {
    GAME: [
      { code: '{{PES}}', title: { en: "playPES"} },
      { code: '{{FIFA}}', title: { en: "playFIFA " } },
    ]
  };
  let newFields = {
    name: 'GAME', 
        tags:[
            { name: 'playPES', value: "{{PES}}" },
            { name: 'playFIFA', value: "{{FIFA}}" }
        ]
    }
  let answer = {
    name: "Game",
        tags: [

        ]
  }
  Fields.GAME.map(i => {
      var JSON = {
        "name": i.title.en,
        "value": i.code
      }
      answer.tags.push(JSON);
  });
  console.log(answer);

    let Fields = {
    GAME: [
      { code: '{{PES}}', title: { en: "playPES"} },
      { code: '{{FIFA}}', title: { en: "playFIFA " } },
    ]
};

const transform = (fields) => ({
    tags: Object .entries (fields) .map (([name, innerFields]) => ({
      name,
      tags: innerFields.map(({code, title: title,en})=>({name: title.en, value: code}))
    }))
  });
//check required output in console
console.log(transform(Fields));
Related