extracting individual elements from a compound structure

I have a scenario where I need to extract specific data from an object returned by an API request. The object contains a property called drinks that holds an array of drink objects, each with an id and name property. I want to create an array of objects containing only the id and name properties of each drink.

One approach I've come up with is as follows:

 const {drinks} = await [api request]
 const arrDrinks = drinks.map((drinkObj, i) => {
      return {drinkObj.idDrink, drinkObj.strDrink}
    })

I'm wondering if there's a way to achieve this in a more concise manner using nested destructuring?

javascriptarraysjavascript-objects

Answer №1

Your code logic for the object literal is incorrect. Try implementing destructuring within the parameter:

Update your code to: const arrDrinks = drinks.map(({idDrink, strDrink}) => ({idDrink, strDrink}));

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

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

javascripthtmlmeteorchat

Transforming BufferGeometry to Geometry using FBXLoader within the Three.js library

Check out my snippet below for loading a .fbx object. It defaults to loading an object as BufferGeometry: const loader = new THREE.FBXLoader(); async function loadFiles(scene, props) { const { files, path, childName, fn } = props; if (index > fi ...

javascriptthree.jsgeometrybuffer-geometry

Tips for looping through the initial div in JavaScript

Here is some HTML code that I am working with: <div class="col-lg-7 col-md-6 col-sm-6 text-left"> <a href="javascript:;" class="multiSelect active" id="lbAssistingStaff" title="Evelyn Lupardus, Jamison Hennigan, Kajal Jain, Milud De Silvaa"&g ...

javascriptjqueryhtmlloops

How can I ensure that the AppBar background color matches the color of the navigation bar?

Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...

javascriptcssreactjsmaterial-ui

Tips for implementing a callback or action once all divs have been rendered with html2canvas

I am currently looping through a list of divs, converting them to canvas elements, and then adding them to jspdf for further processing. Once this is done, I proceed to save the content to disk. function exportDataTablesAsPDF() { var dataTable ...

javascriptjqueryjspdfhtml2canvas

Codignator does not attach the array elements together

While building a registration form for my website, I encountered an issue with passing single element values into an array in CodeIgniter. The values are not being passed correctly, resulting in an error message about an empty alert. How can I resolve th ...

htmlcssarrays

Show all table entries on one page without the need for horizontal scrolling

I am struggling to display a large table on my website. With 60 columns and up to 2000 rows, it feels overwhelming when I simply add horizontal and vertical scrollbars to view all the data. As a beginner in web development, I am looking for guidance on sim ...

javascriptjqueryhtmltabular

There seems to be an issue with byRole as it is failing to return

Currently in the process of migrating my unit test cases from Jest and Enzyme to React Testing Library. I am working with Material UI's Select component and need to trigger the mouseDown event on the corresponding div to open the dropdown. In my previ ...

javascriptreactjsmaterial-uireact-testing-library

Utilizing the jQuery method $('#dividname'), we can add newline characters to a div container

I have added a <div> element to the body of my webpage using $('body').append('<div id="itemInfo"><h2>TEST</h2></div>'); This particular <div> is initially hidden in my CSS. I am then changing the ...

javascriptjqueryhtmlcss

Why is React JS unable to discover my exported modules?

Upon running my React app, the console displayed the following error message: Failed to compile. ./src/components/login/index.js Attempted import error: 'Login' is not exported from './login'. Here is an overview of the folder struct ...

javascriptreactjs

Trigger the UseEffect() function in a Material UI Dialog only when the dialog is open

In my project, I have a parent component that includes a Material UI Dialog as a child component. The purpose of this dialog is to fetch and display data from a REST API. Currently, I am using the UseEffect() function in the Dialog component to achieve th ...

javascriptreactjsreact-hooksmaterial-uiuse-effect

Using regular expressions to eliminate select special characters from text

What is the best way to eliminate certain special characters from a string using regex in JavaScript? apostrophes ' quotation marks " ampersand symbol & registered symbol ® trademark symbol ™ ...

javascriptjqueryregex

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

javascriptjquerycss

React Foundation accordion not functioning properly

Utilizing Foundation accordion within my React component has presented a challenge. The code functions properly when rendering static HTML, but when attempting to render it dynamically through a loop, the accordions lose their clickability. React code fo ...

javascriptreactjszurb-foundation

Ways to implement a function within a provider

I am utilizing a provider setup as follows: import {createContext, useContext, useState} from 'react' // Create Context object. const CartContext = createContext({ deliveryPersion:'own',//or other coupon:{}, updateCoupon: (obj ...

javascriptreactjsnext.js

The error message from Sequelize indicates that there is no connection between Model A and Model B

Recently, I encountered an issue that involves two Models: Client module.exports = (sequelize, DataTypes) => { const Client = sequelize.define('Client', { first_name: DataTypes.STRING, last_name: DataTypes.STRING, phone: DataTyp ...

javascriptmysqlnode.jsexpresssequelize.js

How to Retrieve Variables from a Separate .json File in Python

Seeking Assistance I am looking for a way to access variables from an external .json file located in the same directory using Python 2.7. (Import statement is not working for me) The goal is to store the variables in the .json file as shown below: valu ...

javascriptpythonpython-2.7

Javascript, removeFromString

I'm currently working on a JavaScript function that takes in two strings. The first string is any sentence provided by the user, and the second string consists of letters to be removed from the original sentence. My approach involves converting both s ...

javascriptarraysstringfunction

What is the most effective method for determining the distance between two UK Postcodes?

Can you suggest a reliable method for calculating the distance between two UK postcodes in order to determine if they are within range? I do not intend to display a map, but instead provide a list of results for valid locations. For example, showing loca ...

javascripthtmlmapsdistance

Tips for selecting array [0] and turning it into a clickable link with JavaScript

My challenge lies in redirecting to a different URL when the user clicks on <a href="javascript:void(0)">Hotel Selection</a>. Below is my current progress. Grateful for any assistance! <div id="menu"> <ul> <li class= ...

javascriptjqueryhtml