How do i loop through this in react

Question

When i use map().I got this error "this.props.getCart.items.map is not a function"

{
 "70": 
  [
    {
      "numberPick": 13,
      "numberPrice": 200
    },
    {
      "numberPick": 44,
      "numberPrice": 300
    }
  ],
 "81": 
  [
   {
     "numberPick": 31,
     "numberPrice": 50
   },
   {
     "numberPick": 22,
     "numberPrice": 90
   },
   {
     "numberPick": 38,
     "numberPrice": 50
   }
  ]
}

This is how i get it #redux

 var newData = (state.items[action.parent] === undefined)?[]:state.items[action.parent]
        state = {
            ...state,
            items:{
                ...state.items,
                [action.parent]:[...newData,{
                    numberPick:action.item,
                    numberPrice:action.price
                }]
            }
        }

Results that i want.Should be like this

Your parent id is 70:

first: itemID = 13 and price = 200

second: itemID = 44 and price = 200

Your parent id is 81:

first: itemID = 31 and price = 50

second: itemID = 22 and price = 90

Can anyone please help me.Thank you so much

what you want to get from this ? .map will not work, as it is not an array. — Arup Rakshit, Aug 24 '18 at 03:22
please check this https://reactjs.org/docs/lists-and-keys.html — Thilina Sampath, Aug 24 '18 at 03:25
is this items object? the you want to get numberPick sepatrate? — Thilina Sampath, Aug 24 '18 at 03:27
map can be used with arrays, but this is not array its object, you can't apply map on it. — Amruth, Aug 24 '18 at 04:22

score 1 · Answer 1 · answered Aug 24 '18 at 03:25

You can loop through object:

for (var key in this.props.getCart) {
    if (this.props.getCart.hasOwnProperty(key)) {
        console.log(key + " -> " + this.props.getCart[key]);
        this.props.getCart[key].map(item => {/*return items*/})
    }
}

Then grab the array elements and push into another array.

How do I loop through or enumerate a JavaScript object?

score 1 · Accepted Answer · answered Aug 24 '18 at 04:27

There is no map for Object, but you want use below

Object.keys(myObject).map(function(key, index) {
   myObject[key] *= 2;
});

console.log(myObject);

but easily iterate an object using for ... in:

for(var key in myObject) {
    if(myObject.hasOwnProperty(key)) {
        myObject[key] *= 2;
    }
}

check below code for your example.

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      getCart: {
        "70": [{
            "numberPick": 13,
            "numberPrice": 200
          },
          {
            "numberPick": 44,
            "numberPrice": 300
          }
        ],
        "81": [{
            "numberPick": 31,
            "numberPrice": 50
          },
          {
            "numberPick": 22,
            "numberPrice": 90
          },
          {
            "numberPick": 38,
            "numberPrice": 50
          }
        ]
      }
    }
  }

  render() {
    
    for (var k in this.state.getCart) {
        // console.log(k);
        this.state.getCart[k].map(i => {
            // you want to get induvidual items 
            console.log('items : ', i);
            console.log('numberPick : ', i['numberPick']);
            console.log('numberPrice : ', i['numberPrice']);
      
        })
    }
    
    return (
      <div> check console log</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

How do i loop through this in react

2 Answers2