Select information from an array and store it within an object

I want to extract all objects from an array and combine them into a single object. Here is the current array data:

userData = [
{"key":"firstName","checked":true},
{"key":"lastName","checked":true},
{"key":"userName","checked":false},
{"key":"email","checked":false}
]

and I am using the following code snippet:

let results = {
   data: userData.forEach((k) =>({ ...k}))
}

console.log (results)

The current output looks like this:

[
{"key":"firstName","checked":true},
{"key":"lastName","checked":true},
{"key":"userName","checked":false},
{"key":"email","checked":false}
]

However, my desired result is as follows:

{"firstName":{"key":"firstName", "checked":false},
"lastName":{"key":"lastName", "checked":false},
"username":{"key":"username", "checked":false}
"email":{"key":"email","checked":false},
}

Answer №1

Here is the solution for you.

const data = [
{"item":"apple","size":5},
{"item":"banana","size":6},
{"item":"orange","size":7},
{"item":"grapes","size":8}
]

const result = data.reduce((acc, curr) => ({...acc, [curr.item]: curr}), {})
console.log(result)

Answer №2

To populate the result, iterate through the array and extract the key of each item

const values = [
  {"key":"firstName","checked":true}, 
  {"key":"lastName","checked":true},
  {"key":"userName","checked":false},
  {"key":"email","checked":false}
]

const result = {}

values.forEach(value => {
  result[value.key] = value
})

console.log(result)

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

Countdown Clock for Displaying Parsing Time in C#

On my aspx page, I have a submit button that triggers the parsing of ".txt" files when clicked. The parsing process generates results stored in tables and then redirects the user to another page. However, the issue at hand is that the parsing operation t ...

What is causing my AJAX Contact Form to navigate away from the original page?

I configured a contact form on my website more than 5 years ago, and I vividly remember that it used to show error/success messages directly on the page within the #form-messages div. However, recently, instead of staying on the contact form page and displ ...

Deleting a row from a Material UI table: Step-by-step guide

I'm currently working on a CRUD table using React and Material-UI. I have successfully fetched data from an API and displayed it in a table, but now I am facing a challenge with deleting a row. As this is my first project in React, I am seeking guidan ...

What is the process for creating an additional username in the database?

As a beginner frontend trainee, I have been tasked with configuring my project on node-typescript-koa-rest. Despite my best efforts, I encountered an error. To set up the project, I added objection.js and knex.js to the existing repository and installed P ...

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

Receive real-time price updates from Next.js using GetServerSideProps data

I'm currently working on fetching live bitcoin prices from CoinGecko. In my index.js file, I have an async GetServerSideProps function that is functioning correctly. The returned props are then passed down to the <Home /> component, and subseque ...

What is the best location for implementing role-based authentication in a MeanJS application?

I am working with a meanJS starter template that includes a yeoman generator. I'm trying to figure out where I can add specific permissions to my modules. For example, 'use strict'; // Configuring the Articles module angular.module(' ...

Modifying JavaScript using JavaScript

I'm looking for a solution to change the URL of a button in sync with the iframe displayed on the screen using JavaScript. The challenge I'm facing is figuring out how to dynamically update the button's URL based on the iframe content. Here ...

Deleting an element from a JavaScript array

I have a collection of javascript functions that manage intervals by setting and clearing them. The intervals are stored in an array called intervals[]. config: { settings: { timezone: 'Australia/Perth,', base_url: location.p ...

Transforming an Established React Project into a Progressive Web Application

Currently, I have an existing react tsx project that has been set up. My goal is to transform it into a PWA by adding service workers. However, after adding the service workers in the src folder, I encountered an error when attempting to deploy on firebase ...

Tips for creating animated clouds that move across the screen using Flash, jQuery, or JavaScript

Are there methods to create scrolling clouds using tools such as Flash, jQuery or JavaScript? If so, can you provide me with the code required to implement this on my homepage? I have three small cloud images that I would like to animate moving in the bac ...

Using Laravel to retrieve the selected value of a dynamically generated radio button through a for loop in jQuery

In my view, there is a form with dynamically populated radio buttons sourced from the database. The code snippet for this functionality is as follows: <div class="row"> @foreach($status as $s) <div class="col-md-6"> <label class ...

Utilize Protractor Selenium to extract content from a popup window

Having trouble capturing the text from a popup using Protractor with getText? The HTML structure can be found here. This popup only appears for a few seconds before disappearing. Can anyone assist me in retrieving the text from this popup? To retrieve the ...

The detection of my query parameters is not working as expected

Creating an Angular application that dynamically loads a different login page based on the "groupId" set in the URL is my current challenge. The approach involves sending each client a unique URL containing a specific "groupId" parameter. A template is the ...

What could be causing my table to appear multiple times in the HTML when using jQuery?

Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...

Error message "Uncaught MatSnackBar provider error encountered while attempting to execute 'ng test' command"

I've been encountering issues while trying to execute "ng test" on my Angular 4 project using Angular CLI. One of the problems I face is that the UI doesn't provide any useful feedback when a test fails, but fortunately, the console does display ...

An HTML attribute with a blank value will not display the equals sign operator

jQuery can be used like this: $select.append('<option value="">All</option>'); This code appears to insert the element in HTML as follows: <option value>All</option> However, what is intended is to append the elemen ...

Retrieve all items that match the ids in the array from the database

I'm having trouble receiving a list of items that match with my array of ids. Here's a snippet from the Angular component code: this.orderService.getSpecyficOrders(ids) .subscribe(orders => { ... Where ids is an array of [{_id : ID }, ...

Different ways to modify the style of a MenuItem component in PrimeNG

Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far: <p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu> ...

The attribute 'name' cannot be found within the class 'MyComponent'

I'm a beginner in Angular2 and I have no previous knowledge of version 1. Can you help me understand why this error is occurring and guide me on how to fix it? import { Component } from 'angular2/core'; @Component ({ selector: 'my- ...