Question 245172 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I Iterate over a nested JS object?

I’m using useState and axios to perform API call and GET response and passing it to Component to render it.

const [state,setState] = useState([]);
const getCurrData = () => {
  axios.get('working api endpoint url').then(res => setState(res.data))   
}

Now using that response I’m passing it to the component

<KlineInfo myPasser={state} />

My KlineInfo component content is this:

import React from 'react'
    
const KlineInfo = (myPasser) => {
  return (
    <div>
      {console.log('Mapping')}
      {Object.entries(myPasser)
         .map( ([key, value]) => `My key is ${key} and my value is ${value}` )
      }
    </div>
  )
}

export default KlineInfo

Console log output is:

> "['My key is myPasser and my value is [object Object]']"

Now, my problem:

The content I get in the KlineInfo component is below:

{
  myPasser: {
    retCode: 0,
    retMsg: "OK",
    result: {
      symbol: "KORN",
      category: "look",
      list: [
        ["1694444820000", "25125.5", "25166.5", "25119.5", "25159.5", "1096706", "43.63253731"],
        ["1694444760000", "25067", "25125.5", "25053", "25125.5", "760836", "30.32376935"],
        ["1694444700000", "25110", "25126.5", "25067", "25067", "1785068", "71.11550939"],
      ],
    },
    retExtInfo: {},
    time: 1694444852507,
  },
}

How do I loop over the properties to get to myPasser-> result-> list to be able to:

  1. Print out single list elements [ ...],[...] and also
  2. Loop over individual elements of each list to store them in file and / or database?

In this case simple:

Object.entries(myPasser).map( ([key, value]) => `${key} ${value}`)

is not enough.

Tags:

2

Answers


  1. 0

    value is the Object itself, so you can’t render that as is.

    You should add a second map() inside your code so you can loop over value.result.list.map to render each list:

    const { useState } = React;

const Example = () => {

    const [state, setState] = useState(
        {
            "myPasser": {
                "retCode":0,
                "retMsg":"OK",
                "result":{
                    "symbol":"KORN",
                    "category":"look",
                    "list": [
                        ["1694444820000","25125.5","25166.5","25119.5","25159.5","1096706","43.63253731"],
                        ["1694444760000","25067","25125.5","25053","25125.5","760836","30.32376935"],
                        ["1694444700000","25110","25126.5","25067","25067","1785068","71.11550939"]
                    ]
                },
                "retExtInfo":{},
                "time":1694444852507
            }
        }
    );

    return (
        <div>
            <h1>{'Example'}</h1>
            {Object.entries(state).map( ([key, value]) => (
              <div>
                  <em>{key}</em>
                  {value.result.list.map(ll => <pre>{ll}</pre>)}
              </div>)) }
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
  2. 0

    You could simply do:

    myPasser.myPasser.result.list.forEach(list => console.log(list))

    Insert whatever logic you need inside the forEach function. For example, to iterate over the inner elements and operate on them:

    myPasser.myPasser.result.list.forEach(
  list => list.forEach(x => myDatabaseStorageFunction(x)))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search