javascript - Handling complex data objects with Reactjs -
i trying create table of orders. work react+redux. have data stored in props. data structured similar this: (a bit more detailed)
[{ //stored in props(redux state) "id": 37, //order 1 "content": { "items": { "47427": { "price": "12.49", "format": "[\"1x12\"]", "quantity": 1, }, "23451": { "price": "18.99", "format": "[\"1x7\"]", "quantity": 1, }, } }, "address": { "first_name": "tyrion", "last_name": "lannister", "line1": "the red keep", "city": "king's landing", "country": "westeros", } }, { "id": 38, //order 2 "content": { "items": { "183429": { "price": "8.99", "format": "[\"1x7\"]", "quantity": "1", } } }, "address": { "first_name": "arya", "last_name": "stark", "line1": "23 wolf st.", "city": "winterfell", "country": "westeros", } }, { "id": 30, //order 3 "content": { "items": { "20399": { "price": "21.99", "format": "[\"1x12\"]", "quantity": 1, } } }, "address": { "first_name": "jon", "last_name": "snow", "line1": "29 winter here st.", "city": "the wall", "country": "westeros", } }] i want access "content" , "address" properties of each order , display in table. tried call orders.map() on object gives me access first layer of properties - instance order.id. when try access order.content.item.price error "can't read property of undefined".
my question goes on order.content.items. that's when have object iterate on since has different property names, contain properties inside them (.price, .format, .quantity). basically, how handle complex data, can grab every piece of info in object , place them in table?
//my render function of <orderstable /> render() { let filter = this.props.filter || {}; let orders = this.props.orders || []; let content = orders.map(order => { return ( <tr key={order.id}> <td>{order.content}</td> </tr> ) }) let address = orders.map(order => { return ( <tr key={order.id}> <td>{order.address.first_name}</td> </tr> ) }) return ( <div> <button classname="filter" onclick={this.props.showcontent}> show content </button> <button classname="filter" onclick={this.props.showaddress}> show address </button> <table classname='orders'> <thead classname={filter.showcontent?'content': 'content hidden'}> <tr> <th>items</th> <th>format</th> <th>quantity</th> <th>price</th> </tr> </thead> <thead classname={filter.showaddress?'address': 'address hidden'}> <tr> <th>first name</th> <th>last name</th> <th>country</th> <th>city</th> </tr> </thead> <tbody classname={filter.showcontent?'content': 'content hidden'}> {content} </tbody> <tbody classname={filter.showaddress?'address': 'address hidden'}> {address} </tbody> </table> </div> ) thank :)
edit: here's did trick in case: (with of @tw80000 , @tomdavies)
let content = orders.map(order => { const items= object.keys(order.content.items).map(id => { const item= order.content.items[id]; return( <tr key={id}> <td>{id}</td> <td>{item.format}</td> <td>{item.quantity}</td> <td>{item.price}</td> </tr> ) }) return items; }); const address = orders.map(order => { return ( <tr key={order.id}> <td>{order.address.first_name}</td> <td>{order.address.last_name}</td> <td>{order.address.country}</td> <td>{order.address.state}</td> <td>{order.address.city}</td> <td>{order.address.line1}</td> <td>{order.address.zip}</td> </tr> ) }); ... <tbody classname={filter.showcontent?'content': 'content hidden'}> {content} </tbody> <tbody classname={filter.showaddress?'address': 'address hidden'}> {address} </tbody>
since working complex data, i'd rather separate small subcomponents get's easier use , understand code later.
// order details const orderrow = (order) => { return ( <tr> { object.keys(order.content.items).map((key, index) => { const item = order.content.items[key] return ( <td key={index}>{item.price} {item.format} {item.quantity}</td> ) }) } </tr> ) } // address details const addressrow = (address) => { return ( <tr> <td>{adress.first_name}</td> </tr> ) } // in main component, render them render() { ... return ( <table> ... <tbody> {orders.map(order => <orderrow key={order.id} order={order} />)} </tbody> <tbody> {orders.map(order => <addressrow key={order.id} address={order.address} />)} </tbody> </table> ) } wiki
Comments
Post a Comment