javascript - error in getting data from firebase "user": "[object Object]"} in firebase - St

I'm working on a React Native project where I need to display user information from a pet object. The pet object has a user field, but when I log pet?.user, it shows as [object Object]. I want to display the user's email and userImage, but I’m not sure why the object isn't displaying as expected.

Here’s the structure of the pet object I’m working with:.

{
  "about": "Lorem ipsum dolor sit amet...",
  "address": "342 Maplewood Avenue Springfield",
  "age": "0.2",
  "breed": "Golden Fish",
  "category": "Fish",
  "imageUrl": ".jpg...",
  "name": "Goldy",
  "user": {
    "email": "[email protected]",
    "userImage": ".jpeg...",
    "name": "John Carry"
  }
}

Problem:

When I log pet?.user, I get [object Object] instead of the actual user data (like email and userImage). I want to display the email and userImage from the user object.

import { View, Text, Image } from "react-native";
import React, { useEffect } from "react";

export default function OwnerInfo({ pet }) {
  // Log the entire pet object to check its structure
  useEffect(() => {
    console.log("Pet Data:", pet);
  }, [pet]);

  const user = pet?.user;

  if (user && typeof user === "object") {
    console.log("User email:", user.email || "No email found");
  } else {
    console.log("User data is missing or invalid.");
  }

  return (
    <View>
      <Image
        source={{ uri: pet?.user?.userImage }}
        style={{
          width: 40,
          height: 40,
        }}
      />
      <Text>{pet?.user?.email}</Text>
    </View>
  );
}

What I’ve tried:

• I’ve checked the structure of pet and it seems to be correct.
• I’m using pet?.user?.email and pet?.user?.userImage to access the properties.
• The issue seems to be with the user field being logged as [object Object].

Questions:

• Why does pet?.user log as [object Object] and not display the actual user data?
• How can I properly access and display the user's email and userImage?

I'm working on a React Native project where I need to display user information from a pet object. The pet object has a user field, but when I log pet?.user, it shows as [object Object]. I want to display the user's email and userImage, but I’m not sure why the object isn't displaying as expected.

Here’s the structure of the pet object I’m working with:.

{
  "about": "Lorem ipsum dolor sit amet...",
  "address": "342 Maplewood Avenue Springfield",
  "age": "0.2",
  "breed": "Golden Fish",
  "category": "Fish",
  "imageUrl": "https://img.freepik.com/free-photo/halfmoon-betta-fish_1150-7812.jpg...",
  "name": "Goldy",
  "user": {
    "email": "[email protected]",
    "userImage": "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg...",
    "name": "John Carry"
  }
}

Problem:

When I log pet?.user, I get [object Object] instead of the actual user data (like email and userImage). I want to display the email and userImage from the user object.

import { View, Text, Image } from "react-native";
import React, { useEffect } from "react";

export default function OwnerInfo({ pet }) {
  // Log the entire pet object to check its structure
  useEffect(() => {
    console.log("Pet Data:", pet);
  }, [pet]);

  const user = pet?.user;

  if (user && typeof user === "object") {
    console.log("User email:", user.email || "No email found");
  } else {
    console.log("User data is missing or invalid.");
  }

  return (
    <View>
      <Image
        source={{ uri: pet?.user?.userImage }}
        style={{
          width: 40,
          height: 40,
        }}
      />
      <Text>{pet?.user?.email}</Text>
    </View>
  );
}

What I’ve tried:

• I’ve checked the structure of pet and it seems to be correct.
• I’m using pet?.user?.email and pet?.user?.userImage to access the properties.
• The issue seems to be with the user field being logged as [object Object].

Questions:

• Why does pet?.user log as [object Object] and not display the actual user data?
• How can I properly access and display the user's email and userImage?

• javascript
• firebase
• react-native

Share Improve this question Follow edited Jan 4 at 14:01 Doug Stevenson 319k3636 gold badges456456 silver badges473473 bronze badges asked Jan 4 at 8:46 Jennifer GrahamJennifer Graham 4111 silver badge55 bronze badges 2

• 1 We can't see what pet is. To us, it is just a variable being passed to this component, and we know nothing about where it came from. Please edit the question to share some more code and information about what this is and where it came from. – Doug Stevenson Commented Jan 4 at 14:01
• Try logging with: console.log(JSON.serialize(pet?.user));, as the logger can't directly log objects. – Taha Paksu Commented Jan 4 at 20:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This is Javascript's console.log behavior. It will redact Object as [object Object]. You can try to stringify the Object using JSON.stringify() when log them.

Example:

   useEffect(() => {
    console.log("Pet Data:", JSON.stringify(pet, null, 2));
  }, [pet]); Convert json and print to console.
  {user?.userImage && (
        <Image
          source={{ uri: user.userImage }}
          style={{
            width: 40,
            height: 40,
            borderRadius: 20,
          }}
        />
      )}         You can also try conditionally fetching the image with if.