将值分配给计算属性 vuejs

Question

I have this array of objects:

columnData=[
  {Address: "1 fake st"},
  {Application: "bts sport"},
  {Description: "good"},
  {Issue Date: "2012-08-09"},
  {Status: "active"},
  {Unit: null}
]

And then I want to assign some of columnData elements to a new array of objects using a computed property and the new array should look like:

newData= [
  {
    label: "Address",
    value: "1 fake st"
  },
  {
    label: "Descripttion",
    value: "good"
  },
  {
    label: "Unit",
    value: null
  }
]

I have tried this piece of code but it doesn't work:

computed:{
    newData() {
      return [
        {
          label: Object.keys(this.columnData[0]),
          value: Object.values(this.columnData[0])
        },
        {
          label: Object.keys(this.columnData[2]),
          value: Object.values(this.columnData[2])
        },
        {
          label: Object.keys(this.columnData[5]),
          value: Object.values(this.columnData[5])
        }
      ];
    }
}

How can I create the newData array the way I want it to look like using a computed property?

Answer 1

You need Object.keys(obj)[0] and Object.values(obj)[0] , respectively to get the first property name and value of each object in the array.

 const columnData=[ {Address: "1 fake st"}, {Application: "bts sport"}, {Description: "good"}, {"Issue Date": "2012-08-09"}, {Status: "active"}, {Unit: null} ]; const newData = columnData.slice(0,2).concat(columnData[5]).map(obj=>({ label: Object.keys(obj)[0], value: Object.values(obj)[0] })); console.log(newData);

You can also use Object.entries to get both the property name and value in one array.

 const columnData=[ {Address: "1 fake st"}, {Application: "bts sport"}, {Description: "good"}, {"Issue Date": "2012-08-09"}, {Status: "active"}, {Unit: null} ]; const newData = columnData.slice(0,2).concat(columnData[5]).map(obj=>{ const [label, value] = Object.entries(obj)[0]; return {label, value}; }); console.log(newData);