[Vuejs]-How can i change the labels of the filtered objects

1👍

If your data is sanitised (all items are objects and they all have billingAcc and System), the shortest syntax would be:

const prettyData = myData.map(({ billingAcc: bill, System: invoice }) => ({
  bill,
  invoice
}))

Test:

const myData = Array.from({ length: 10 }).map((_, key) => ({
  billingAcc: `Bill ${key + 1}`,
  System: `Invoice ${key + 101}`
}))

const prettyData = myData.map(({ billingAcc: bill, System: invoice }) => ({
  bill,
  invoice
}))

console.log(prettyData)

If you want to filter the items that don’t have either billingAcc or System and you don’t want bill or invoice to be set to undefined in the resulting items if they didn’t exist on the raw data, this would work:

const isDefined = (item) => item !== undefined
const prettyData = myData
  .filter(({ billingAcc, System }) => [billingAcc, System].some(isDefined))
  .map(({ billingAcc: bill, System: invoice }) =>
    Object.assign(
      {},
      isDefined(bill) ? { bill } : {},
      isDefined(invoice) ? { invoice } : {}
    )
  )

Test:

const myData = [
  { billingAcc: '1', System: 'foo' },
  { billingAcc: '2', System: 'bar' },
  { foo: 'Skipped, no billingAcc or System' },
  { billingAcc: '' },
  { System: null },
  { billingAcc: 0 },
  { System: NaN },
  { billingAcc: void 0 } // void 0 === undefined, should be skipped
]
const isDefined = (item) => item !== undefined
const prettyData = myData
  .filter(({ billingAcc, System }) => [billingAcc, System].some(isDefined))
  .map(({ billingAcc: bill, System: invoice }) =>
    Object.assign(
      {},
      isDefined(bill) ? { bill } : {},
      isDefined(invoice) ? { invoice } : {}
    )
  )

console.log(prettyData)
👤tao

Leave a comment