Manipulate objects in Vue.js by converting them into an Array of Objects, each containing a key and its

Question

Manipulate objects in Vue.js by converting them into an Array of Objects, each containing a key and its

Is there a way to convert this object into an array of objects?

const failed = { 
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

The desired output should be like this:

[
  {
    "fieldName": "4579043642",
    "message": "set number '4579043642' exists!"
  },
  {
    "fieldName": "4579043641",
    "message": "set number '4579043641' exists!"
  },
  {
    "fieldName": "4579043640",
    "message": "set number '4579043640' exists!"
  }
]

data() {
  return {
    formattedList: [],
  };
},

I have attempted conversion using the following method;

uploadFeedbackReject: {
  handler: function(newFeed) {
    if (failed) {
        this.formattedList = [response.failed];
      }
  },
  immediate: true,
  deep: true,
},

Your assistance would be greatly appreciated.

Thank you.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

This code snippet is functioning perfectly

const errors = {
  123456789: "Item with ID '123456789' already exists!",
  987654321: "Item with ID '987654321' already exists!",
  2468101214: "Item with ID '2468101214' already exists!",
};

const errorArray = Object.entries(errors).map((item) => ({
  fieldID: item[0],
  errorMessage: item[1],
}));

console.log(errorArray);

Answer 2

This code snippet is functioning perfectly

const errors = {
  123456789: "Item with ID '123456789' already exists!",
  987654321: "Item with ID '987654321' already exists!",
  2468101214: "Item with ID '2468101214' already exists!",
};

const errorArray = Object.entries(errors).map((item) => ({
  fieldID: item[0],
  errorMessage: item[1],
}));

console.log(errorArray);

Answer 3

Answer №2

Iterate over the object properties and create an array of objects with each property as a field name and its value as the message:

const formerList = {
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

let resultArray = []

for (prop in formerList) {
  resultArray.push({
    fieldName: prop,
    message: formerList[prop]
  })

}

console.log(resultArray)

Alternatively, you can map over the object properties to achieve the same result:

const formerList = {
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

let resultArray = []

resultArray = Object.keys(formerList).map((field) => {

  return {
    fieldName: field,
    message: formerList[field]
  }
})

console.log(resultArray)

Answer 4

Iterate over the object properties and create an array of objects with each property as a field name and its value as the message:

const formerList = {
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

let resultArray = []

for (prop in formerList) {
  resultArray.push({
    fieldName: prop,
    message: formerList[prop]
  })

}

console.log(resultArray)

Alternatively, you can map over the object properties to achieve the same result:

const formerList = {
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

let resultArray = []

resultArray = Object.keys(formerList).map((field) => {

  return {
    fieldName: field,
    message: formerList[field]
  }
})

console.log(resultArray)

Answer 5

Answer №3

To iterate through the object, you can utilize Object.keys() to extract both the name and value pairs, then store them in a new object before adding it to an array.

let obj = {
  daisy: "qwerty",
  eve: 7,
  frank: 54.32
}

let arr = [];

for(let j=0; j<Object.keys(obj).length; j++){

  // Extracting the name and value from the original object
  let key = Object.keys(obj)[j];
  let val = obj[key];
  
  // Creating a new object with the extracted data
  let newObj = {
    label: key,
    content: val
  }

  // Adding the new object to the array
  arr.push(newObj);
}

Answer 6

To iterate through the object, you can utilize Object.keys() to extract both the name and value pairs, then store them in a new object before adding it to an array.

let obj = {
  daisy: "qwerty",
  eve: 7,
  frank: 54.32
}

let arr = [];

for(let j=0; j<Object.keys(obj).length; j++){

  // Extracting the name and value from the original object
  let key = Object.keys(obj)[j];
  let val = obj[key];
  
  // Creating a new object with the extracted data
  let newObj = {
    label: key,
    content: val
  }

  // Adding the new object to the array
  arr.push(newObj);
}

Manipulate objects in Vue.js by converting them into an Array of Objects, each containing a key and its

Answer №1

Answer №2

Answer №3

Similar questions

Tips for integrating Grails ${createLink} into your javascript code

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

Send the array of data to the table in a separate component

Ajax updates to an element are not reflected until the for loop has completed

How to dynamically display content based on option selection in AngularJS using ng-show

Updating the list state does not trigger a re-render in Next.js/React

The error message "CommonFunctions is not defined" appears due to an uncaught ReferenceError

Tips for handling a disabled button feature in Python Selenium automation

Tips for showing information in a column based on a selection in a webgrid handsontable

What is the best way to ensure consistency in a value across various browsers using Javascript?

What are the steps to confirm form submission with $pristine and $dirty in Angular?

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

Execute functions upon the completion of jQuery ajax requests

Determining if a user's email is already in use with the account-password package

Maintain the property characteristics (writable, configurable) following the execution of JSON.parse()

Display alternative component upon button click in React.js

JavaScript modularizing for early termination

How to Align a Button in the Middle with Bootstrap?

What is the best way to retrieve search data using Express and MongoDB?

Having problems uploading and resizing images using Express.js