I am working on an angular app. I have data as follows.

data = [
{
  "sampleData": [{
    "id":"1"
  }],
  "status": "completed"
},
{
  "sampleData": [{
    "id":"1"
  }],
  "status": "not completed"
},
{
  "sampleData": [],
  "status": "completed"
}
]

Above one is the sample array.. Like this at run time my array can 200-300 records. I want to add a attribute/field "category" to each element on the basis of following condition.

• if length of sample data is greater than 0, then check for status. If status is completed than attribute/field "category": "completed" will be added. If status is not completed than attribute/field "category": "not completed" is added.

• If length of sample data is equal to 0, then "category": "on hold" attribute/field is added to array.

So, above array after manupulation should look like as follows:

data = [
{
  "sampleData": [{
    "id":"1"
  }],
  "status": "completed",
  "category": "completed"
},
{
  "sampleData": [{
    "id":"1"
  }],
  "status": "not completed"
  "category": "not completed"
},
{
  "sampleData": [],
  "status": "completed"
  "category": "on hole"
}
]

Similarly I can have 200-300 elements in an array at runtime and I need to add category to each and every element on the basis of above condition and make a final array. How can I do it in a good and efficient way?

CodePudding user response：

Loop through the array and check whether the item's sampleData property length is greater than 0, and if so, set the item's category property to the item's status property. Otherwise, set it to "on hold".

Show code snippet

const data = [{
    "sampleData": [{
      "id": "1"
    }],
    "status": "completed",
  },
  {
    "sampleData": [{
      "id": "1"
    }],
    "status": "not completed"
  },
  {
    "sampleData": [],
    "status": "completed"
  }
]


data.forEach(e => e.category = e.sampleData.length > 0 ? e.status : "on hold")

console.log(data)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The same logic can be implemented if you don't want to mutate the original by using Array.map:

Show code snippet

const data = [{
    "sampleData": [{
      "id": "1"
    }],
    "status": "completed",
  },
  {
    "sampleData": [{
      "id": "1"
    }],
    "status": "not completed"
  },
  {
    "sampleData": [],
    "status": "completed"
  }
]


const res = data.map(e => ({ ...e,
  category: e.sampleData.length > 0 ? e.status : "on hold"
}))

console.log(res)

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

With an if statement (as per OP's request):

Show code snippet

const data = [{
    "sampleData": [{
      "id": "1"
    }],
    "status": "completed",
  },
  {
    "sampleData": [{
      "id": "1"
    }],
    "status": "not completed"
  },
  {
    "sampleData": [],
    "status": "completed"
  }
]


data.forEach(e => e.category = e.sampleData.length > 0 ? e.status : "on hold")

console.log(data)

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use Array.map():

function addCategory(source) {
  return source.map( item => ({
    ...item,
    category: item.sampleData.length === 0
      ? 'on hold'
      : item.status === 'completed'
      ? 'completed'
      : 'non completed';
  });
}
.
.
.
const withCategory = addCategory( getMeSomeSourceData() );

That's about as easy as it gets.