display data that is nested in a json object dispatched from Redux - reactjs

Question

I am fetching a endpoint that contains nested data, i can display the business information fine. But the location part of the data, i cannot. The location data i need to iterate over and no matter what i try, i just can't seem to, i tried normalizing my data, and at first that looked like it would work, but had issues accessing the data on the front end.
below is the raw data that i grabbed from the Redux DevTools.
payload: {
data: {
id: 1,
user_id: 1,
businessName: 'LUNCH',
featured: false,
logo: 'image.jpg',
logoThumbnail: null,
deleted: false,
deletedOn: null,
stripe_subscription_id: null,
plan_id: null,
subscription_active: true,
referral_code: '8',
website: '8',
tags: null,
category: null,
business_locations: [
{
id: 1,
business_id: 1,
address: '88',
address2: null,
city: '*',
province: '*',
country: '*',
postalCode: '*',
coordinates_lat: *,
coordinates_lon: *,
phone: '*',
featured: true,
locationName: '*',
businessName: '*',
},
{
id: 2,
business_id: 1,
address: '*',
address2: null,
city: '*',
province: '*',
country: '*',
postalCode: '*',
coordinates_lat: *,
coordinates_lon: *,
phone: '*',
featured: true,
locationName: '*',
businessName: 'LUNCH',
}
],
business_images: [],
plan: null
}
}
}
this is my view simplified:
class Locations extends React.Component {
componentDidMount() {
this.props.dispatch(fetchBusinesses());
}
render() {
if (this.props.isLoading) {
return (
<SpinContainer>
<Spin size="large" />
</SpinContainer>
);
}
console.log('locations: ',this.props.business)
console.log('locations: ',this.state)
return (
<React.Fragment>
HERE IM TRYING TO MAP THE CARDS ONE FOR EACH LOCATION
<Card>
{
this.props.business.business_locations.map(location =>
<div>
<tr><td>{location.id}</td>
<td>{location.businessName}</td></tr>
</div>
)
}
</Card>
</React.Fragment>
);
}
}
function mapStateToProps(state) {
const { isLoading, data } = state.business;
return {
business: data,
isLoading,
};
}
export default connect(mapStateToProps)(Locations);
no matter what i seem to put on the front of the map function, its undefined or this.props.business.map is not a function
ive tried starting with data and business and every combo i thought
this console.log('locations: ',this.props.business)
it returns Object and the same response as above

Answer 1

Here's a component that renders a table on the data that you provided.
Runnable example: https://codesandbox.io/embed/k3wrx2pv55
function App() {
const data = {
"id": "asuh",
"user_id": 1,
"businessName": "Place",
"featured": false,
"logo": "image.jpg",
"logoThumbnail": null,
"deleted": false,
"deletedOn": null,
"created_at": "2017-03-23T13:00:51.000Z",
"updated_at": "2017-05-26T13:21:33.000Z",
"stripe_subscription_id": null,
"plan_id": null,
"logo_url": "***",
"logo_thumb_url": "**",
"referral_code": "**",
"website": "**",
"tags": null,
"category": null,
"business_locations": [
{
"id": 1,
"business_id": 1,
"address": "*",
"address2": null,
"city": "*",
"province": "*",
"country": "*",
"postalCode": "*",
"coordinates_lat": 45,
"coordinates_lon": 75,
"phone": "**********",
"locationName": "***",
"businessName": "ACME",
},
{
"id": 2,
"business_id": 1,
"address": "***",
"address2": null,
"city": "***",
"province": "***",
"country": "**",
"postalCode": "***",
"coordinates_lat": 45,
"coordinates_lon": 75,
"phone": "**********",
"locationName": "Secondary",
"businessName": "ACME",
}
],
"business_images": [],
"plan": null
};
return (
<div className="App">
<table>
<thead>
<tr><td>id</td></tr>
</thead>
<tbody>
{data.business_locations.map(location => <tr><td>{location.id}</td><td>{location.businessName}</td></tr>)}
</tbody>
</table>
</div>
);
}