Combine all elements into a single array using the map method in JavaScript

In my possession, I have an array of objects with IDs and names:

[
    {
        "id": 10,
        "name": "comedy"
    },
    {
        "id": 12,
        "name": "documentary"
    },
    {
        "id": 11,
        "name": "scifi"
    }
]

My goal is to extract only the ID values and combine them into a single array like this:

[ 10, 12, 13 ]

or

{ 10, 12, 13 }

So far, I've attempted the following code snippet:

const getIDs = value.map( ( { id } ) => ( {
  id: id
} ) );

However, the result turns out to be:

[
    {
        "id": 10
    },
    {
        "id": 12
    },
    {
        "id": 11
    }
]

Answer №1

Instead of returning objects inside the map, only return the id values

Check out this quick and easy solution:

const items = [
    {
        "id": 7,
        "name": "action"
    },
    {
        "id": 3,
        "name": "drama"
    },
    {
        "id": 5,
        "name": "thriller"
    }
]

const getIDs = items.map(({id}) => id);

console.log(getIDs)

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

Updating the content of a Telerik RadEditor using Javascript/jQuery

I am currently facing a challenge in manually cleaning the HTML of a Telerik RadEditor using Javascript. Despite my efforts, I am struggling to find the appropriate location to store the value in order for it to be saved during post back. Below is the Jav ...

Having trouble formatting JSON data in a jQuery datatable with accurate information

Currently, I am diving into the world of jQuery tables specifically for a report that I am working on. Despite successfully receiving the API response, I am facing challenges in binding it to the jQuery datatable. I have searched through various questions ...

Employ the vue.js method within the click EventListener of another method

In my Vue.js script, I have a method that generates an element called 'lens'. Now, I want to include an EventListener that triggers another method when the lens element is clicked. The problem: I have attempted two different approaches to add ...

Creating and downloading a Word document with Node.js by utilizing officegen

Recently, I've been trying to utilize the officegen npm module in order to generate a word (docx) file and then download it. Previously, I relied on the tempfile module to create a temporary path for the purpose of downloading. Below is the code snipp ...

I am struggling to apply custom CSS styles to the scrollbar within a Card component using MUI react

import React from "react"; import Card from "@mui/material/Card"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import CardMedia from "@mui/material/Ca ...

JavaScript: Receiving an error that function is undefined when working with data binding

Why is my code showing that it's not defined while I'm attempting a simple code with data binding? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht ...

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

Unlock the power of polymer iron-ajax by seamlessly linking input element data to the iron-ajax's body attribute

Having some trouble binding data from an input element to the "body" attribute of iron-ajax. In the past, using core-ajax in Polymer 0.5, I could easily bind values like so: <core-ajax id="ajax" method="POST" contentTy ...

The magical unveiling of words through the art of animation

After spending considerable time learning how to code, I find myself seeking assistance in creating a specific animation. For the past two days, I've been struggling to bring my vision to life (see attached image). Unfortunately, my current knowledge ...

use JavaScript to create indentation on the following line

I'm currently utilizing Komodo IDE 8.5. I've been attempting to indent my code to the next line in order to prevent it from extending too far to the right. However, every time I try to indent, it breaks the line and doesn't register properl ...

Display a "busy" indicator using Ajax, specifically for requests that take longer to process

Is there a way to delay the appearance of the busy indicator until a certain amount of time has passed? The code I'm using for the busy indicator is quite simple: jQuery.ajaxSetup( { beforeSend:function () { jQuery( "#busy-indicator" ...

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

I recently started learning AngularJS and Rails, and I attempted to develop a Rails application incorporating AngularJS. Currently, I am looking to make a POST request to send data and insert it into the database. In the Activity Controller: def create ...

Retrieve the name of the page instead of the page number using PHP in combination with AJAX

I found a helpful tutorial on using AJAX to load content on a website. However, the tutorial uses generic page names like "page1, page2, page3, etc." and I want to use specific page names like "products, about, etc.". I've been working on the code in ...

Navigating to a URL in the active tab using the Firefox WebExtension API

Embarking on the journey of creating a Firefox web extension/add-on has been an exciting experience for me. However, I am facing some challenges when it comes to navigating to a URL in the active tab. I have tried using document.open('https://www.gith ...

Encountering an AttributeError while attempting to write an array to a raster file with spatial attributes using the array2raster package, possibly due to

My workflow involves utilizing two different scripts. The first script uses hydrology tools to determine sink depths in a DEM and generates a binary sink/no-sink array. The second script is responsible for labeling pixel groups. To visualize the results sp ...

Learn how to dynamically disable unchecked checkboxes and apply specific CSS classes to checked checkboxes in Angular 12 with TypeScript

Currently, I am working on a project where I have successfully stored checkboxes dynamically using a JSON array of objects. However, I am facing an issue that requires your expertise. My goal is to allow the selection of only 5 checkboxes. Once this limit ...

Improved method for categorizing items within an Array

Currently working on developing a CRUD API for a post-processing tool that deals with data structured like: { _date: '3/19/2021', monitor: 'metric1', project: 'bluejays', id1: 'test-pmon-2', voltageConditio ...

Issue with React-Axios: File data being sent to Node server is undefined

My current challenge involves uploading a single file and saving it in a specific folder within my app directory. While I can successfully choose a file on the frontend and update the state of the Uploader component, I encounter an issue when sending a POS ...

A guide to using JavaScript to restrict the textarea's height while allowing it to expand dynamically and setting a maximum height

Seeking assistance with a challenge I have encountered and unsure how to resolve. Any help would be greatly appreciated! The issue at hand is as follows: I am currently working on a textarea. My goal is to have the input box start with a height of 36px, ...

How come emphasizing certain characters in a string doesn't display the <b> tag in React.js?

I am trying to make a specific part of a string bold in my React.js app, but I'm not getting the expected result. Below is the code I am using and the output it produces: data?.map((item) => (<li key={item.id}>{item.title.replace(new RegExp(v ...