How to replace values in my array of objects using key from other object in another array

Question

I have 2 arrays of objects

NOTE: status and original-language can't be set manually as they change all the time, these are custom fields. The slugs from fields make up all custom fields.

const items = [
  {
    name: 'Surviving the Game',
    status: 'ffdb29ba075fcbc0b71295c31a13d64f',
    original-language: 'b4ebbe06702794d1cf375274197267b2',
  },
  {
    name: 'Some Movie',
    status: 'cd53c082c6ca9e7d3ec66890e66c01f3',
    original-language: '7a1cac74217747933bb3915888dea090',
  },
];
const fields = [
  {
    slug: 'status',
    options: [
      {
        name: 'Released',
        id: 'ffdb29ba075fcbc0b71295c31a13d64f',
      },
      {
        name: 'Upcoming',
        id: 'cd53c082c6ca9e7d3ec66890e66c01f3',
      },
    ],
  },
  {
    slug: 'original-language',
    options: [
      {
        name: 'de',
        id: 'b4ebbe06702794d1cf375274197267b2',
      },
      {
        name: 'en',
        id: '7a1cac74217747933bb3915888dea090',
      },
    ],
  },
];

status and original-language in [items] have an id value which matches an option in the corresponding fields array.

I am trying to return a new array for [items] with the name from options with the matching id.

eg:

[
  {
    name: 'Surviving the Game',
    status: 'Released',
    original-language: 'de',
  },
  {
    name: 'Some Movie',
    status: 'Upcoming',
    original-language: 'en',
  },
];

How would I go about this with ES6/7?

I am not sure where to start

Nick · Accepted Answer · 2019-08-24 17:12:19Z

1

I would accomplish this by creating a lookup object that houses lookups for both your statuses and languages. You can then use this lookup object when mapping through your items.

var items = [
  {
    name: 'Surviving the Game',
    status: 'ffdb29ba075fcbc0b71295c31a13d64f',
    "original-language": 'b4ebbe06702794d1cf375274197267b2'
  },
  {
    name: 'Some Movie',
    status: 'cd53c082c6ca9e7d3ec66890e66c01f3',
    "original-language": '7a1cac74217747933bb3915888dea090'
  }
];

var fields = [
  {
    slug: 'status',
    options: [
      {
        name: 'Released',
        id: 'ffdb29ba075fcbc0b71295c31a13d64f'
      },
      {
        name: 'Upcoming',
        id: 'cd53c082c6ca9e7d3ec66890e66c01f3'
      }
    ]
  },
  {
    slug: 'original-language',
    options: [
      {
        name: 'de',
        id: 'b4ebbe06702794d1cf375274197267b2'
      },
      {
        name: 'en',
        id: '7a1cac74217747933bb3915888dea090'
      }
    ]
  }
];

const lookup = {};

fields.forEach(field => {
  lookup[field.slug] = field.options.reduce((all, option) => ({
    ...all,
    [option.id]: option.name
  }), {})
});

const translatedItems = items.map(item => {
  return Object.entries(item)
    .reduce((all, [key, val]) => ({
      ...all,
      [key]: lookup[key] ? lookup[key][val] : val
    }),{});
});

console.log(translatedItems);

edited Aug 24, 2019 at 17:12

answered Aug 24, 2019 at 16:26

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

2 Comments

AndyJamesN Over a year ago

Thanks.. so close. The issue is that status and original-language are not constant so 'translatedItems' needs to be dynamic not set manually. These keys will change all the time. The slugs in fields is the way to know what the keys in items will be. So if fields had another item slug: 'color', then each item would have a color key and value too.

Nick Over a year ago

Sure, the code has been updated to essentially look in our lookup for any key that may exist in our item object. If there is no lookup for it, the value from items is maintained.

Alex Broadwin · Accepted Answer · 2019-08-24 16:43:27Z

1

I'd define a function that obtains the value for a field, like so:

function valueForField(field, id) {
    const field = fields.find((itemfields) => itemfields.slug === field);
    if(!field) return null;
    const option = field.options.find(option => option.id === id);
    if(!option) return null;
    return option.name;
}

This can then be used like so:

const newItems = items.map(item => {
    const { name } = item;
    const newItem = {name};
    newItem["original-language"] = valueForField('original-language', item["original-language"]);
    newItem.status = valueForField('status', item.status);
    return newItem;
});

edited Aug 24, 2019 at 16:43

answered Aug 24, 2019 at 16:38

Alex Broadwin

1,34811 silver badges24 bronze badges

Comments

ThS · Accepted Answer · 2019-08-24 16:54:04Z

Use map to create a new array of objects having name, status and originalLanguage fields along with the find method to get the name from fields for every status identifier.

const items = [{
    name: 'Surviving the Game',
    status: 'ffdb29ba075fcbc0b71295c31a13d64f',
    originalLanguage: 'b4ebbe06702794d1cf375274197267b2',
  },
  {
    name: 'Some Movie',
    status: 'cd53c082c6ca9e7d3ec66890e66c01f3',
    originalLanguage: '7a1cac74217747933bb3915888dea090',
  },
];
const fields = [{
      slug: 'status',
      options: [{
          name: 'Released',
          id: 'ffdb29ba075fcbc0b71295c31a13d64f',
        },
        {
          name: 'Upcoming',
          id: 'cd53c082c6ca9e7d3ec66890e66c01f3',
        },
      ],
    },
    {
      slug: 'original-language',
      options: [{
          name: 'de',
          id: 'b4ebbe06702794d1cf375274197267b2',
        },
        {
          name: 'en',
          id: '7a1cac74217747933bb3915888dea090',
        },
      ],
    },
  ],
  newArr = items.map(i => ({
    name: i.name,
    status: fields.find(f => f.slug == 'status').options.find(o => o.id == i.status).name,
    originalLanguage: fields.find(f => f.slug == 'original-language').options.find(l => l.id == i.originalLanguage).name
  }));

console.log(newArr);

Collectives™ on Stack Overflow

How to replace values in my array of objects using key from other object in another array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related