Substitute values depending on response content in Vue 2?

Question

Aim

I am trying to retrieve data via an API which takes data from a DB. When I retrieve the data, I receive a response that looks like this (this is my mock data, stored in a mock.js file) -

[
{ id: '2000', description: 'Big Company and Co.', fooType: 0},
{ id: '2213', description: '3g Capital', fooType: 1},
{ id: '2936', description: 'AAA Pokemon Company', fooType: 2},
{ id: '3456', description: 'World Wrestling Entertainment', fooType: 0},
{ id: '4040', description: 'Brave Old Company', fooType: 0},
{ id: '9367', description: 'The Wild Wild Blessed', fooType: 1}
]

I am trying to change the response after it has been received so that fooType is one of 3 values depending on whether fooType returns with 0, 1 or 2 as the value. The API will only send fooType as 0, 1 or 2.

e.g. fooType: 1 => fooType: 'abcd', fooType: 2 => fooType: 'efg', fooType: 0 => fooType: 'abcdefgh'

MORE INFO

Items, listed in the tag below, is a map of the (key, value)'s from my data above, which is rendered as rows in a table by the component being used.

<NiceDataTable
    striped
    small
    fixed
    :items="fooData"
    :fields="fields"
    add-table-classes="table-bordered"
/>

While I am likely overcomplicating a fairly simple issue, any help would be appreciated.

Question

What can I do to transform a specific response key's value depending on the value in the initial response (without touching the backend API)?

Answer 1

Try this code

const data = [{ id: '2000', description: 'Big Company and Co.', fooType: 0 }, { id: '2213', description: '3g Capital', fooType: 1 }, { id: '2936', description: 'AAA Pokemon Company', fooType: 2 }, { id: '3456', description: 'World Wrestling Entertainment', fooType: 0 }, { id: '4040', description: 'Brave Old Company', fooType: 0 }, { id: '9367', description: 'The Wild Wild Blessed', fooType: 1 }];
const map = { 0: "abcdefgh", 1: "abcd", 2: "efg" };
const output = data.map(responseItem => {
  return { ...responseItem, fooType: map[responseItem.fooType] }
});
console.log(output)