Map array of object to create new array

Question

I have the following code snippet from my app component to create a dynamic form fields:

 const [basics, updateBasics] = useState({ controls: { name: { elementType: "input", elementConfig: { type: "text", label: "Full name", }, value: "John Doe", }, label: { elementType: "input", elementConfig: { type: "text", label: "Profession", }, value: "Programmer", }, phone: { elementType: "input", elementConfig: { type: "tel", label: "Phone", }, value: "(912) 555-4321", }, website: { elementType: "input", elementConfig: { type: "URL", label: "Website", }, value: "https://test.url", }, summary: { elementType: "textarea", elementConfig: { type: "textarea", label: "Summary", }, value: "A summary of John Doe...", }, }, }); const formElementsArray = []; for (let key in basics.control) { formElementsArray.push({ id: key, config: controls[key], }); } console.log(formElementsArray);

[

With the above code I get the following (shown in the picture)

How do I generate the data in the same format with the following array of object:

 const [profiles, setProfiles] = useState({ controls: [ { network: { elementType: "input", elementConfig: { type: "text", label: "Network", }, value: "Twitter", }, }, { username: { elementType: "input", elementConfig: { type: "text", label: "Username", }, value: "@john", }, }, { url: { elementType: "input", elementConfig: { type: "url", label: "URL", }, value: "tewt.url", }, }, ], });

As this is the array of object I couldn't work around it to generate the data in required format.

Answer 1

There you go:

 const [profiles, setProfiles] = useState({ controls: [ { network: { elementType: "input", elementConfig: { type: "text", label: "Network", }, value: "Twitter", }, }, { username: { elementType: "input", elementConfig: { type: "text", label: "Username", }, value: "@john", }, }, { url: { elementType: "input", elementConfig: { type: "url", label: "URL", }, value: "tewt.url", }, }, ], }); const formElementsArray = profiles.controls.map(item =>({ id: Object.keys(item)[0], config: item[Object.keys(item)[0]], })) console.log(formElementsArray);

Answer 2

You can try this

 obj = { controls: { name: { elementType: "input", elementConfig: { type: "text", label: "Full name", }, value: "John Doe", }, label: { elementType: "input", elementConfig: { type: "text", label: "Profession", }, value: "Programmer", }, phone: { elementType: "input", elementConfig: { type: "tel", label: "Phone", }, value: "(912) 555-4321", }, website: { elementType: "input", elementConfig: { type: "URL", label: "Website", }, value: "https://test.url", }, summary: { elementType: "textarea", elementConfig: { type: "textarea", label: "Summary", }, value: "A summary of John Doe...", }, }, } re = Object.entries(obj.controls).reduce((acc, curr) => [...acc, ...curr]) console.log({controls: re})