Search code examples
javascriptarraysfor-of-loop

JavaScript - Return individual values from one array, inside of a for-of loop calling another array

I'm returning two values, svcCenterBands sortedBands, from one function and calling sortedBands inside a for of loop inside of another function.

svcCenterBands is an array of objects inside of the getMileageBand function that returns an array of unique objects that are string values representing a range of miles.

const getMileageBand = refSrcData => {
    const mileageBand = refSrcData.data.map(e => e['97']); // Mileage Band Name

    // Reduce the array to only unique values, no repeats
    const svcCenterBands = mileageBand.reduce((unique, i) => {
        if (!unique.some(obj => obj.label === i.label && obj.value === i.value)) {
            unique.push(i);
        }
        return unique;
    }, []);

    // Get only the values from svcCenterBands
    const numberedBands = svcCenterBands
        .map(band => Object.values(band))
        .join()
        .split('-')
        .map(str => str.split(',')[0]);

    // Sort numberedBands in ascending order
    const sortedBands = numberedBands
        .map(Number)
        .sort((first, next) => first - next);

    console.log(svcCenterBands, sortedBands);
    return [svcCenterBands, sortedBands];
};

sortedBands goes a bit further and takes svcCenterBands, grabs only it's last value and converts that to a number and sorts it. For example, if svcCenterBands returns a value of ["0-30"], sortedBands takes that string inside of the array and extracts the number past the hyphen, converts it to a number and sorts all array values in ascending order.

Inside of another function, I'm calling getMileageBand and running sortedBands (getMileageBand(facData)[1]) through a for of loop.

    const mileageRanges = getMileageBand(facData)[0];
    const mileageBand = getMileageBand(facData)[1];

    // generate radius for each mileage band, mileage === coordinates
    for (mileage of mileageBand) {
        // for (mileage of getMileageBand(facData)) {
        ...
        // console.log(mileageRanges.map(range => range.value));

        const mileageValue = `${mileageRanges.map(range => range.value)} miles`;
        ...

I can get the values for sortedBands no problem which is what I need to generate my radial bands on my map.

enter image description here

But I'm trying to iterate through the values of svcCenterBands inside of the for (mileage of mileageBand) loop, but I'm getting the array of objects when I log mileageRanges inside of the mileageBand band for loop.

enter image description here

If i log mileageRange[mileage] with the for of index, I only get the first value in mileageRange and undefined for the rest.

enter image description here

What I would like to see is the values inside of the array of objects by their range, which I can get when I call getMileageBand but I can't get these values inside of the for of loop.

This is what I'm trying to get inside of the for of loop:

enter image description here

This is what shows up on my screen beneath my map with radial bands.

enter image description here

Ultimately, I'd like each card to show a sequence of 0-30, 31-60, etc. instead of all values being displayed in each card.

I can't include all of my code to test because it's too much and too many environment variables to extract the data I'm pulling from the database, so I included as much code as I could to back up my question.

Solution

  • It seems like you want to grab the element from mileageRanges which is at the same index as the current element of mileageBand in your for..of loop. I would suggest not using for..of in this case as I dont believe it provides the index. Here is a simple for loop.

    const [mileageRanges, mileageBand] = getMileageBand(facData); // just call that expensive function once.

for (let i=0; i < mileageBand.length; i++) {
  const mileage = mileageBand[i];
  const mileageRange = mileageRanges[i].value;
}