Cannot Iterate props using map correctly

help
1

I have this data array which come from external source…

and I have this code

`{this.props.betsList.map((bet, i) => (
                            <Table.Row key={i}>
                                <Table.Cell>{bet.combination}</Table.Cell>
                                <Table.Cell>{bet.amount}</Table.Cell>
                                <Table.Cell>no data</Table.Cell>
                                <Table.Cell>{bet.price}</Table.Cell>
                            </Table.Row>
                        ))}`

however I only get 1 row instead of three.

I also try this

{this.props.betsList[0].map((bet, i) => (
                            <Table.Row key={i}>
                                <Table.Cell>{bet.combination}</Table.Cell>
                                <Table.Cell>{bet.amount}</Table.Cell>
                                <Table.Cell>no data</Table.Cell>
                                <Table.Cell>{bet.price}</Table.Cell>
                            </Table.Row>
                        ))}

but got this error instead TypeError: this.props.betsList[0].map is not a function

2

Doesn’t this.props.betsList[0] get you the object at index 0 of the array? So you’re calling .map on an object which doesn’t have that method.

3

Makes sense to me. You’re calling map on [0]. You need to call betsList.map(…

4

My problem is I want to show Object 0,1,2 which I wast not able to do using betsList.map(…

5

That’s weird, map should work. I use it a bunch in Meteor. I’ll throw you some code.

var groupIds = Posts.find({	type:"groups" }).map(function(group){			
	Meteor.subscribe('postsmeta', 'group_meta', group._id ); 			
	return group.parent_id; 
});

Maybe you can try a JS forEach like this:

var members = Posts.find({type:"group_member", status:"accepted"});
members.forEach(function(member){
	Meteor.subscribe('posts', 'group_member_user_profile', member.owner_id );
	Meteor.subscribe('posts', 'group_member_role', member.owner_id);
});

Might be worth a shot!

6

I actually use a MySQL query on my server then throw my data using publication (self.added…) and it’s true it wierd because some of my queries are actually working except for this… I am not sure if this because of the complexity of my query

7

Perhaps you should investigate the query, maybe it’s throwing you an invalid character or something.

8

@SkyRooms I find a work around but I felt this can be further improved.

betArr = []
       
        for (var item in this.props.betsList[0]) {
            if (!isNaN(item)) {
                betArr.push(this.props.betsList[0][item])
            }
        }

then render this way

       { betArr.map((bet, i) => (
              <Table.Row key={i}>
                  <Table.Cell>{bet.combination}</Table.Cell>
                 <Table.Cell>{this._formatAmount(bet.amount)}</Table.Cell>
                <Table.Cell>{bet.count}</Table.Cell>
               <Table.Cell>{this._floorAmount(bet.price)}</Table.Cell>
            </Table.Row>
     ))}
9

That looks so complicated. That must be angular or something.

Happy with my Blaze default stock install :slight_smile:

(I’m not as smart as you are :wink: )

Happy it works out for you!

10

somehow this does not make any sense to me … are you sure the screenshot you showed us in your OP is the actual betsList array? because in that case doing for (var item in this.props.betsList[0]) really should not work! :smiley:

11

yes, I am sure… =) and that is exactly I asked for some help :smiley:

12

I think your problem is that you got an Object of Objects instead of Array of Objects. You cannot map Object directly. Can you return Array of Objects easily?

Or you can also use Object.keys() and map that like this way:

SomeObject = {
  first: {
    sub: 'thing',
  },
  second: {
    sub: 'bar',
  },
};

Object.keys(SomeObject).map( (item) => {
  const subObj = SomeObject[item];
  console.log("this is subObj:", subObj) 
}

result should be something like that:

this is subObj:  {sub: 'thing'}
this is subObj:  {sub: 'bar'}

I hope this is clear example. And of course if you need that key value… it’s ‘item’.

1 Like
13

@Saksi thanks… i think you nailed it and your explanation is much more better compared to others I saw from other resources.

I will be changing my code to this as your method does save a lot of looping compared to mine…