What is the best way to save the properties of elements in an array of objects within another array?

I have obtained attributes from objects within an array that I need to store in another array. Here is the data I am working with:

My goal is to extract the `displays` name attribute and save it in the `opt[]` array, which would result in something like this:

opt = ['info1', 'info2', 'info3', ... ]

getEditData (id) {

            axios.get('/api/campaign/getEdit/' + id)
                .then(response =>{
                    this.campaign = response.data.campaign;
                })
                .catch(e=>{
                    console.log(e.data);
                    this.error = e.data
                })
        }

The snippet above shows how the campaign object is being sourced.

Answer №1

Here is one way you can extract names from the campaigns:

campaigns.displays.map(({name}) => name );

const campaigns = { displays: [{ name: 'example1'}, { name: 'example2'}] };

const results = campaigns.displays.map(({name}) => name );

console.log(results);

Answer №2

In the following code snippet, an array is displayed that contains the property names of each object in the displays array

    var info = {
      displays: [
        {
          capacity: 9000,
          id: 1,
          imei: 44596
        }
      ]
    };
    info.displays.forEach(function(object, index) {
      console.log(Object.keys(object));
    });

Object.keys() is a helpful method to achieve this functionality

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

Executing Python script via AJAX or jQuery

I need to execute Python scripts from JavaScript. The goal is to provide an input String to the Python script as an argument and then showcase the output on our webpage. Below is the Python code that runs smoothly on my Linux box: ./sample.py 12345 produc ...

Having trouble with retrieving JSONP data? Unsure how to access the information?

Why do I keep getting a -403 error? https://i.stack.imgur.com/T53O9.png However, when I click on the link, I see this: https://i.stack.imgur.com/8GiMo.png How can I retrieve the message? ...

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="display:none"> The table's new ...

"NodeJS application interfacing with Elasticsearch utilizes promise-based search function instead of direct

Within my Node server, I have successfully made a request to Elasticsearch. However, I am encountering an issue where instead of the actual results, I always receive a promise. Although the results display perfectly when logged in the console, they either ...

Ways to integrate PHP MySQL with NodeJS and SocketIO

Currently, I am working on developing a chat application. I have successfully implemented features like creating accounts, logging in, selecting, viewing, and more using PHP MySQL. Now, I am venturing into the Instant Messaging aspect by utilizing NodeJS a ...

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

Maximizing Efficiency: Sending Multiple Responses during computation with Express.js

Seeking a way to send multiple responses to a client while computing. See the example below: app.get("/test", (req, res) => { console.log('test'); setTimeout(() => { res.write('Yep'); setTime ...

Vue Django application access denied: CSRF verification failed

It seems like I have encountered a Django issue with the backend system. My Vue code is located in frontend/ (127.0.0.1:8080) while the Django code resides in backend/ (127.0.0.1:8000). I have carefully followed the instructions provided by Django regardin ...

Advantages of choosing between the <NextLink/> and the <Button href="/somePage"/> components in the powerful Mui React UI libraries

Currently engaged in a project, I am wondering if there exists a substantial disparity in the utilization of these two components. Prior to this change, the return button was implemented as follows: <NextLink href="/settings" ...

The visibility of the AmCharts' OLHC chart is compromised

Here is my unique StockGraph object: "stockGraphs": [ { "id": "g5", "title": "anotherText", "precision": 4, "openField": "open2", "closeField": "close2", "highField": "high2", "lowField": "low2", ...

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

What is the proper way to invoke a function that is part of a child component as a property in a React application?

In my app.js file, I have included a unique component called "SigningComponent" with the following code: onSign = () => { this.setState({ route: "home" }); }; registerFunction = () => { this.setState({ route: "registration" }); }; render() { ...

Tips for extracting nested data in Vue.js without redundancy

Here's a query regarding my "Avatar database" project. I am aiming to gather all tags from each avatar and compile them into a single array without any duplicates. For instance, if there are 3 avatars tagged as "red", the list in the array should onl ...

Alter the reply prior to being dispatched to the customer

Node 16.14.2, Express 4.18.1 There have been several instances where individuals have altered res.send in order to execute actions before the response is sent to the client. app.use(function (req, res, next) { originalSend = res.send; res.send = f ...

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

When no values are passed to props in Vue.js, set them to empty

So I have a discount interface set up like this: export interface Discount { id: number name: string type: string } In my Vue.js app, I am using it on my prop in the following way: export default class DiscountsEdit extends Vue { @Prop({ d ...

When embedding HTML inside an Angular 2 component, it does not render properly

Currently, I am utilizing a service to dynamically alter the content within my header based on the specific page being visited. However, I have encountered an issue where any HTML code placed within my component does not render in the browser as expected ( ...

Error: Attempting to access a property of an undefined object resulting in TypeError (reading 'passport')

I am currently working on a project that requires me to display user profiles from a database using expressjs and mongoDB. However, I have encountered an issue and would appreciate any solutions offered here. Here is the code from my server: const express ...

How can I convert Typescript absolute paths to relative paths in Node.js?

Currently, I am converting TypeScript to ES5/CommonJS format. To specify a fixed root for import statements, I am utilizing TypeScript's tsconfig.json paths property. For instance, my path configuration might look like this: @example: './src/&ap ...