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);

[ output1

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.

Talmacel Marian Silviu · Accepted Answer · 2020-06-23 23:36:47Z

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);

Sven.hig · Accepted Answer · 2020-06-24 00:18:13Z

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})

Collectives™ on Stack Overflow

Map array of object to create new array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related