How do I return array data from a foreach loop in Angular

Question

I'm looping through a nested object to get a some data. This is working, but I can't seem to return the data and use it elsewhere.

I've tried putting the loop in a promise and couldn't get anywhere either. What am I doing wrong?

data: any = {
    '1234': {
        url: 'https://example1.com/',
        path: 'uploads',
        link: 'https://example1.com/uploads',
    },
    '5678': {
        url: 'https://example2.com/',
        path: 'uploads',
        link: 'https://example2.com/uploads',
    }
}


onSubmit(formData) {

    this.formdata = formData;

    Object.keys(this.data).forEach(key => {
        if (key == this.formdata.pin) {
            const url = this.data[key].url;
            // have also tried this.url to no avail
        }
    });

    // says undefined
    console.log(url);

    // set up headers, etc...

    // I need to use here
    this.http.post(url, body, head)
    ...
}

url is undefined in your above example as it is limited in scope. — Rastalamm
– Rastalamm, Commented May 28, 2019 at 22:22

dota2pro · Accepted Answer · 2019-05-28 22:13:11Z

2

onSubmit(formData) {

this.formdata = formData;
let url; // Define here so that its accessible
Object.keys(this.data).forEach(key => {
    if (key === this.formdata.pin) {
         url = this.data[key].url;
        // have also tried this.url to no avail
    }
});

// Now url is in scope
console.log(url);

    ...
}

answered May 28, 2019 at 22:13

dota2pro

7,9548 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rastalamm Over a year ago

This solution moves url to the onSubmit block scope and can therefore be used/accessed in your console.log statement

Rastalamm · Accepted Answer · 2019-05-29 14:42:10Z

1

Switching your forEach to a map can simplify this; map return values, whereas forEach does not.

Old:

Object.keys(this.data).forEach(key => {
    if (key == this.formdata.pin) {
        const url = this.data[key].url;
    }
});

// says undefined
console.log(url);

New: (I've also added a === in here based on the comment below)

const urls = Object.keys(this.data).map(key => {
    if (key === this.formdata.pin) {
        return this.data[key].url;
        // have also tried this.url to no avail
    }
});

console.log(urls);

map docs and forEach docs

edited May 29, 2019 at 14:42

answered May 28, 2019 at 22:24

Rastalamm

1,7823 gold badges24 silver badges33 bronze badges

1 Comment

dota2pro Over a year ago

Better to use === than ==

Collectives™ on Stack Overflow

How do I return array data from a foreach loop in Angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related