What is the best way to loop through a nested object and extract values into an array?

Question

What is the best way to loop through a nested object and extract values into an array?

I'm currently working on extracting data points from an API response to use in graphing. My goal is to extract an array of the "4. close" values from the object below.


let res = {
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "amzn",
        "3. Last Refreshed": "2020-03-20",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-03-20": {
            "1. open": "1926.3100",
            "2. high": "1957.0000",
            "3. low": "1820.7300",
            "4. close": "1846.0900",
            "5. volume": "9740990"
        },
        "2020-03-19": {
            "1. open": "1860.0000",
            "2. high": "1945.0000",
            "3. low": "1832.6500",
            "4. close": "1880.9300",
            "5. volume": "10399943"
        },
        "2020-03-18": {
            "1. open": "1750.0000",
            "2. high": "1841.6600",
            "3. low": "1745.0000",
            "4. close": "1830.0000",
            "5. volume": "9596297"
        }
    }
}

// Desired output => [1846, 1880, 1830]

Here's my current code:

const parsed = res["Time Series (Daily)"]

const datesArr = Object.entries(parsed).map((e) => ({ [e[0]]: e[1] }))


function getYCoords() {
  for(i=0;i<datesArr.length;i++) {
  let dateObj = datesArr[i]
  console.log(dateObj["4. close"])
  }
}

I attempted to map the nested object into an array of objects, thinking it would help me iterate through the data correctly, but I seem to be facing issues as I am getting undefined values. Any assistance would be greatly appreciated!

javascript arrays nested-object

Answer 1

Answer №1

One issue you are facing is that Object.entries(parsed) returns an array structured like this:

[ "2020-03-20", { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" } ], [ "2020-03-19", { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" } ], [ "2020-03-18", { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } ] ]

By mapping e[0] as the key of a new object, you're assigning the date as the key instead of the properties like "4. close" from your objects. An easy solution would be to map the entries to the object stored at e[1], which contains all the numbered properties:

const res = { "Meta Data": { "1. Information": "Daily Prices (open, high, low, close) and Volumes", "2. Symbol": "amzn", "3. Last Refreshed": "2020-03-20", "4. Output Size": "Compact", "5. Time Zone": "US/Eastern" }, "Time Series (Daily)": { "2020-03-20": { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" }, "2020-03-19": { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" }, "2020-03-18": { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } } }
const parsed = res["Time Series (Daily)"];


function getYCoords() {
  for (i = 0; i < datesArr.length; i++) {
    let dateObj = datesArr[i]
    console.log(dateObj["4. close"])
  }
}

const datesArr = Object.entries(parsed).map((e) => e[1]);
getYCoords();

However, if you are only interested in the values, there's no need to use entries. You can directly get the Object.values() (an array of your objects) and then map those to retrieve the values stored at "4. close":

const res = { "Meta Data": { "1. Information": "Daily Prices (open, high, low, close) and Volumes", "2. Symbol": "amzn", "3. Last Refreshed": "2020-03-20", "4. Output Size": "Compact", "5. Time Zone": "US/Eastern" }, "Time Series (Daily)": { "2020-03-20": { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" }, "2020-03-19": { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" }, "2020-03-18": { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } } }
const parsed = res["Time Series (Daily)"];
const datesArr = Object.values(parsed).map((e) => +e["4. close"]); // + to turn string into number
console.log(datesArr);

Answer 2

One issue you are facing is that Object.entries(parsed) returns an array structured like this:

[ "2020-03-20", { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" } ], [ "2020-03-19", { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" } ], [ "2020-03-18", { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } ] ]

By mapping e[0] as the key of a new object, you're assigning the date as the key instead of the properties like "4. close" from your objects. An easy solution would be to map the entries to the object stored at e[1], which contains all the numbered properties:

const res = { "Meta Data": { "1. Information": "Daily Prices (open, high, low, close) and Volumes", "2. Symbol": "amzn", "3. Last Refreshed": "2020-03-20", "4. Output Size": "Compact", "5. Time Zone": "US/Eastern" }, "Time Series (Daily)": { "2020-03-20": { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" }, "2020-03-19": { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" }, "2020-03-18": { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } } }
const parsed = res["Time Series (Daily)"];


function getYCoords() {
  for (i = 0; i < datesArr.length; i++) {
    let dateObj = datesArr[i]
    console.log(dateObj["4. close"])
  }
}

const datesArr = Object.entries(parsed).map((e) => e[1]);
getYCoords();

However, if you are only interested in the values, there's no need to use entries. You can directly get the Object.values() (an array of your objects) and then map those to retrieve the values stored at "4. close":

const res = { "Meta Data": { "1. Information": "Daily Prices (open, high, low, close) and Volumes", "2. Symbol": "amzn", "3. Last Refreshed": "2020-03-20", "4. Output Size": "Compact", "5. Time Zone": "US/Eastern" }, "Time Series (Daily)": { "2020-03-20": { "1. open": "1926.3100", "2. high": "1957.0000", "3. low": "1820.7300", "4. close": "1846.0900", "5. volume": "9740990" }, "2020-03-19": { "1. open": "1860.0000", "2. high": "1945.0000", "3. low": "1832.6500", "4. close": "1880.9300", "5. volume": "10399943" }, "2020-03-18": { "1. open": "1750.0000", "2. high": "1841.6600", "3. low": "1745.0000", "4. close": "1830.0000", "5. volume": "9596297" } } }
const parsed = res["Time Series (Daily)"];
const datesArr = Object.values(parsed).map((e) => +e["4. close"]); // + to turn string into number
console.log(datesArr);

What is the best way to loop through a nested object and extract values into an array?

Answer №1

Similar questions

The watch functionality is failing to work within a specialized attribute directive that is being utilized within a separate custom element directive

Stop the WebGL Three.js container from capturing scroll events

Is Cognito redirect causing issues with Angular router responsiveness?

Looking for assistance with implementing the Vue CDN script in a Laravel Blade template

Generatively generating a new element for the react application to be mounted on

Utilizing Ajax to dynamically load files within the Django framework

Accept a JSON-sending POST request in a JSP file via JavaScript

Unable to upload any further verification documents to Stripe Connect bank account in order to activate payouts

What steps can I take to stop the window/body from scrolling "through" a modal div?

"Socket io Simplified: Embracing the Power of Drag

Every initial test with Protractor ends in failure

Choose an XPath formula that will target every single element, text node, and comment node in the original sequence

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

Creating an Angular form that adapts to changing input values

How to implement caching using XMLHttpRequest?

a function that repeats every single second

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Testing the seamless integration of Mocha, Node.js, and PostgreSQL

Arrange the HTML DOM elements in the order of their appearance in a list

Achieving automatic restarts with grunt-express when files are updated