I get TypeError: Undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url') when i try to pull the Image source_URL from my wordpress API.

.jpg

.jpg

The error messages in the attached images above points to the following lines of code

{this.state.data && this.state.data.length > 0 && ( this.state.data.map(post => (

{post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (

source={{ uri: subitem.media_details.sizes.medium.source_url }}

I have gone through the JSON data from my wordpress API and there is definitely a URL.

 class HomeScreen extends React.Component {

 constructor(){
 super();
  this.state = {
      data: null,
      loaded: true,
      error: null
   }
}
baseURL = 'https://wordpress-URL';

getData = (ev)=>{
this.setState({loaded:false, error: null});
let url = this.baseURL + '/posts?_embed';

let req = new Request(url, {

    method: 'GET'
});

fetch(req)
.then(response=>response.json())
.then(this.showData)
.catch(this.badStuff)
}
showData = (data)=>{
    this.setState({loaded:true, data});
    console.log(data);
}
badStuff = (err) => {
    this.setState({loaded: true, error: err.message});
}
ponentDidMount(){
    this.getData();

}

  render() {

return (
  <ScrollView>
    { this.state.error && ( <Text style={styles.err}>{this.state.error}</Text> )}
    {this.state.data && this.state.data.length > 0 && (
      this.state.data.map(post => (
        <View key={post.id} >
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Details', { article: post.content.rendered, title: post.title.rendered} )} >
            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', paddingTop: 25 }}
              borderBottomWidth={0.8}
              borderBottomColor={'gold'}  >
              <View>
                {post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (
                  <Image
                    source={{ uri: subitem.media_details.sizes.medium.source_url }}
                    style={{ width: width / 3, height: height / 5, borderRadius: 10 }}
                    key={index} />

                ))
                }
                {/* <Image source={require('../assets/Hotelcalifornia.jpg')}
                  style={{ width: 150, height: 150, borderRadius: 10 }} /> */}
              </View>
              <View style={{ height: 170 }} >
                <Text style={{ width: width / 2, height: height / 5 }}
                  fontSize={30} >
                  {post.title.rendered}
                </Text>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      )))}

  </ScrollView>
);
}
}

I expect Images from the URL to be displayed in the tags inside the View, but instead i get the TypeError: undefined is not an object

I get TypeError: Undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url') when i try to pull the Image source_URL from my wordpress API.

https://i.sstatic/rhSZc.jpg

https://i.sstatic/T4PMO.jpg

The error messages in the attached images above points to the following lines of code

{this.state.data && this.state.data.length > 0 && ( this.state.data.map(post => (

{post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (

source={{ uri: subitem.media_details.sizes.medium.source_url }}

I have gone through the JSON data from my wordpress API and there is definitely a URL.

 class HomeScreen extends React.Component {

 constructor(){
 super();
  this.state = {
      data: null,
      loaded: true,
      error: null
   }
}
baseURL = 'https://wordpress-URL';

getData = (ev)=>{
this.setState({loaded:false, error: null});
let url = this.baseURL + '/posts?_embed';

let req = new Request(url, {

    method: 'GET'
});

fetch(req)
.then(response=>response.json())
.then(this.showData)
.catch(this.badStuff)
}
showData = (data)=>{
    this.setState({loaded:true, data});
    console.log(data);
}
badStuff = (err) => {
    this.setState({loaded: true, error: err.message});
}
ponentDidMount(){
    this.getData();

}

  render() {

return (
  <ScrollView>
    { this.state.error && ( <Text style={styles.err}>{this.state.error}</Text> )}
    {this.state.data && this.state.data.length > 0 && (
      this.state.data.map(post => (
        <View key={post.id} >
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Details', { article: post.content.rendered, title: post.title.rendered} )} >
            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', paddingTop: 25 }}
              borderBottomWidth={0.8}
              borderBottomColor={'gold'}  >
              <View>
                {post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (
                  <Image
                    source={{ uri: subitem.media_details.sizes.medium.source_url }}
                    style={{ width: width / 3, height: height / 5, borderRadius: 10 }}
                    key={index} />

                ))
                }
                {/* <Image source={require('../assets/Hotelcalifornia.jpg')}
                  style={{ width: 150, height: 150, borderRadius: 10 }} /> */}
              </View>
              <View style={{ height: 170 }} >
                <Text style={{ width: width / 2, height: height / 5 }}
                  fontSize={30} >
                  {post.title.rendered}
                </Text>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      )))}

  </ScrollView>
);
}
}

I expect Images from the URL to be displayed in the tags inside the View, but instead i get the TypeError: undefined is not an object

• javascript
• wordpress
• react-native
• react-navigation

3 Answers 3

Debug and check each element in that filtered array you are trying to map to see if all of the nested objects exist for each of the elements. There is probably a nested object down the subitem.media_details.sizes.medium.source_url chain that does not exist for at least one of the elements.

You can prevent it by doing source={{ uri: subitem.media_details.sizes.medium.source_url || '' }}

Check if you perhaps have any recursive references in your JSON data scheme! Same kind of error makes problems using swagger editor to define OpenAPI REST APIs (JSON/YAML) with swagger editor. Recursive references are reported in swagger editor as "undefined is not an object (evaluating 'm[b]')". It took me a number of hours to find the reason for that behavior. See also the issue at: https://github./swagger-api/swagger-ui/issues/3325 Hope this helps. Good luck!