Steps for transforming Object A into an array of objects, each containing the properties and assigned values and labels from Object A

I have an object with specific key-value pairs and I would like to transform it into an array where each item has a label and a value:

{
 "id": 12432,
 "application": "pashmodin",
 "unit": null,
 "status": "gholam",
 "issueDate": "1999-06-24T00:00:00",
 "description": "hasan"
}

The desired array format is:

[
  {"label": "id", "value": 12432},
  {"label": "application", "value": "pashmodin"},
  {"label": "unit", "value": null},
  {"label": "status", "value": "gholam"},
  {"label": "issueDate", "value": "1999-06-24T00:00:00"},
  {"label": "description", "value": "hasan"}
]

How can I accomplish this transformation?

javascriptarrayskeyjavascript-objects

Answer №1

Utilizing Object.entries() alongside map()

const obj = {"id":12432,"application":"pashmodin","unit":null,"status":"gholam","issueDate":"1999-06-24T00:00:00","description":"hasan"}

const res = Object.entries(obj).map(([label, value]) => ({label, value}))

console.log(res)

Answer №2

let dataObject= {
 "id": 12432,
 "application": "pashmodin",
 "unit": null,
 "status": "gholam",
 "issueDate": "1999-06-24T00:00:00",
 "description": "hasan"
}

const dataArr =[];
Object.keys(dataObject).forEach((key, i)=> dataArr.push({label: key, value: Object.values(dataObject)[i]}))

console.log(dataArr)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to make the fixed table header scroll along with the table body data?

I am facing an issue with my table where I have multiple columns. I have managed to fix the table header successfully, however, when I scroll horizontally through the table body columns, the header remains fixed and does not move accordingly. How can I res ...

javascriptjquerycsshtml

Incorporating CSS styling dynamically using Javascript

Just a heads up - I am completely new to coding and JavaScript, and this happens to be my very first post, so please bear with me. I have a set of Hex codes representing various colors, and my goal is to utilize JQuery to style some empty divs in the HTML ...

javascriptjqueryhtmlcssarrays

The combination of setInterval() and if(confirm()) is not possible in pure JavaScript

One day, I encountered a simple if(confirm()) condition like this: if(confirm('Some question')) { agreed_function(); } else { cancel_function(); } function agreed_function() { console.log('OK'); } function cancel_function( ...

javascript

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

I recently set up a Sharepoint Page with a custom masterpage, where I deployed my SPFx Webpart that requires certain javascript files. While the Webpart functions correctly at times, there are instances when it doesn't work due to the javascript bein ...

javascripttypescriptsharepointdocument-readyspfx

Serialize a form while keeping the submitted data private

Is there a way to achieve serialization without triggering the submit function for an ajax call? I've searched extensively for a solution to this issue without any luck. The java script function is invoked when a button within the form is clicked. do ...

javascriptajaxforms

The error message "Next.js 14 does not recognize res.status as a function"

I'm a newcomer to Next.js and I've been wrestling with an issue all day. Here's my API for checking in MongoDB if a user exists: import {connect} from '../../../../lib/mongodb'; import User from '../../../models/userModel&ap ...

javascriptreactjsnext.js

Incorporating an NPM module with dependencies within the Meteor framework

I'm encountering some difficulties while attempting to integrate an NPM package into my meteor project. The specific module I am trying to utilize is the steam package. In order to make this work, I have included the meteorhacks:npm package for mete ...

javascriptmeteornpm

React - Why does React fail to update the state when expected? (not retaining)

Hello there, I'm currently working on fetching JSON data from an API and populating it into a table. It seems pretty straightforward but here's where things get tricky – I can see that the "tableData" state is getting updated as new rows are ad ...

javascriptnode.jsreactjs

C++ program encounters a crash when attempting to delete memory

In my c++ application, I have a class called OrderBook that I need to create an array of dynamically. To achieve this, I have defined a pointer in the header file like so: OrderBook* pOrderBooks; // In header file During runtime, I create the array using ...

c++arraysnew-operator

Tips for effortlessly moving content by dragging and dropping it into a text box

Before attempting to create something, I want to verify its feasibility. Begin with a text area that can be pre-filled with text and allow users to add or delete text. Alongside the text area, there are small elements that can be images or HTML components ...

javascriptjqueryjquery-uidrag-and-drop

Looking for assistance with finding a specific value in Firestore?

As I venture into using firestore for the first time, I'm in the process of creating a registration page with vue. One crucial step before adding a new user to the database is to validate if the provided username already exists. If it does not exist, ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Xstream produced a JSON response for a collection of objects

Utilizing Xstream for generating JSON in my application. Utilizing JSON for ajax support as well. When attempting: xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records" responseStream.println(xstream.toXML(jsonModel)); where j ...

javascriptjqueryajaxjsonxstream

Issue with Angular dropdown menu not showing the initial option

I am trying to set up a drop-down menu with the first item in the list appearing after it has been sorted by 'name' using the code snippet below: <h2 class="presentation site is-input-header">Site</h2> <div class="modal-select-ele ...

javascriptangularjs

Developing asynchronous DOM functions for optimal performance

Imagine having a large amount of data that needs to be processed. In this scenario, the processing must happen on the client side rather than the server side. The data processing involves iterating through each element in the data set: for element in data ...

javascript

What is the method to change between input sources in php?

Imagine this scenario: when a user clicks on a specific button, I want them to be presented with either a dropdown list or an input field. This decision would allow the user to choose an existing item or create a new one. <select name="choose[rowId]"&g ...

javascriptphpsql

Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

I've been attempting to display a loading gif while an ajax call is in progress. However, I encountered an error at the show statement and the console displayed: TypeError {stack: (...), message: "undefined is not a function"} Here's my code sn ...

javascriptajaxdojo

I am attempting to develop a basic express application, but it doesn't appear to be functioning as expected

I am currently working on developing a straightforward express application. However, I am facing network errors when trying to access it through my browser at localhost:3000 while the application is running in the console. The root cause of this issue elud ...

javascriptnode.jsexpress

Guide to implementing a personalized filter in AngularJS 1.6

I am struggling with injecting a custom filter, status, into my component. Below is the code for my component: function ClaimsListController(dpClaimsListService) { var ctrl = this; ctrl.claims = null; ctrl.searchCriterion = null; ctrl.l ...

javascriptangularjs

What are the best practices for ensuring secure PUT and DELETE requests?

For the backend of my current project, I have a question regarding security measures. As an illustration, one of the tasks involves handling various "/notes" requests. /notes => retrieve all notes belonging to the authenticated user /notes => creat ...

javascriptphpnode.jsbackend

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

I'm facing an issue with dispatching a custom event called "select-date" from a custom web component date picker to a React functional component. Despite testing, the event doesn't seem to be reaching the intended component as expected. Below is ...

javascriptreactjstypescriptreact-hooksreact-functional-component