Mapping over data after fetching nested objects - arrays

Question

Hello guys so i have component homescreen which i am fetching data inside and, the data i am getting contains some objects that has arrays inside, so i want to push all that arrays and data inside my state otherDetails key .
the data i am getting looks like this
{
id: 5,
url: "http://www.tvmaze.com/shows/5/true-detective",
name: "True Detective",
type: "Scripted",
language: "English",
genres: [
"Drama",
"Crime",
"Thriller"
],
status: "To Be Determined",
runtime: 60,
premiered: "2014-01-12",
officialSite: "http://www.hbo.com/true-detective",
schedule: {
time: "21:00",
days: [
"Sunday"
]
},
rating: {
average: 8.2
},
weight: 97,
network: {
id: 8,
name: "HBO",
country: {
name: "United States",
code: "US",
timezone: "America/New_York"
}
},
webChannel: null,
externals: {
tvrage: 31369,
thetvdb: 270633,
imdb: "tt2356777"
},
image: {
medium: "http://static.tvmaze.com/uploads/images/medium_portrait/178/445621.jpg",
original: "http://static.tvmaze.com/uploads/images/original_untouched/178/445621.jpg"
},
summary: "<p>Touch darkness and darkness touches you back. <b>True Detective</b> centers on troubled cops and the investigations that drive them to the edge. Each season features a new cast and a new case.</p>",
now what i am trying to do inside home screen i have my state with the object key otherDetails which i am trying to get genres language network schedule and summary so i am not sure what is happening wrong
this is my HomeScreen.js
import React, {Component} from 'react';
const axios = require('axios');
import Card from '../Components/Card/card';
import {
View,
Text,
Button,
Image,
ScrollView,
ActivityIndicator,
} from 'react-native';
import DetailsScreen from './detailsScreen';
import DetailedCard from '../Components/DetailedCard/DetailedCard';
export default class HomeScreen extends React.Component {
state = {
title: [],
image: [],
rating: [],
otherDetails:[{
genres:[],
schedule:[],
language:'',
network:[],
summary:'',
} ],
isLoading: true,
};
componentDidMount() {
this.getData();
}
getData = () => {
const requestUrls = Array.from({length: 9}).map(
(_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
);
const handleResponse = data => {
const shows = data.map(show => show.data);
this.setState({
isLoading: false,
title: shows.map(show => show.name),
image: shows.map(show => show.image.medium),
rating: shows.map(show => show.rating.average),
otherDetails:shows.map((show,index)=>{
return [
show.genres[index],
show.schedule[index],
show.language[index],
show.network[index],
show.summary[index],
];
}),
});
};
const handleError = error => {
this.setState({
isLoading: false,
});
};
console.log(this.state.otherDetails.genres);
Promise.all(requestUrls.map(url => axios.get(url)))
.then(handleResponse)
.catch(handleError);
};
render() {
const {isLoading, title, image, rating, otherDetails} = this.state;
if (isLoading) {
return <ActivityIndicator size="large" color="#0000ff" />;
}console.log(this.state);
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{backGroundColor: 'red'}} />
<ScrollView style={{flex: 1}}>
<Card
title={this.state.title}
rating={this.state.rating}
source={this.state.image}
navigation = {this.props.navigation}
/>
</ScrollView>
<Text>here images</Text>
</View>
);
}
}
any help would be nice thank you in advanced ...!

Answer 1

Storing the response from tvmaze as an array instead of trying to map all the values to keys would make your life a bit easier.. Something like this should work:
import axios from 'axios'
import React from 'react'
import { ActivityIndicator, ScrollView, Text, View } from 'react-native'
import Card from '../Components/Card/card'
export default class HomeScreen extends React.Component {
state = {
shows: [],
isLoading: true
}
componentDidMount () {
this.getData()
}
getData = () => {
const requestUrls = Array.from({length: 9}).map(
(_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`
)
const handleResponse = data => {
console.log(data)
this.setState({
isLoading: false,
shows: data
})
}
const handleError = error => {
console.log(error)
this.setState({
isLoading: false
})
}
Promise.all(requestUrls.map(url => axios.get(url)))
.then(handleResponse)
.catch(handleError)
}
render () {
const {isLoading, shows} = this.state
if (isLoading) {
return <ActivityIndicator size='large' color='#0000ff' />
}
console.log(this.state)
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{backGroundColor: 'red'}} />
<ScrollView style={{flex: 1}}>
{shows.length && shows.map(show => (
<Card key={show.data.id}
title={show.data.name}
{/*navigation={this.props.navigation}*/}
/>
))}
</ScrollView>
<Text>here images</Text>
</View>
)
}
}