Querying multiple rows of a table shows an [object] [object] instead of the actual data. How to fix?

Question

I have this query:

  const {data, error} = await supabase  
        .from('profiles')
        .select(`
          *,
          station (
            station_name, user_id
          ),
          type (
            *
          )
        `)
        .eq('id', searchParams.id)

I can see the data already, however, for the type I can only see the: [ [Object], [Object], [Object] ]

The types here may have multiple rows:

Sample output of the data:

[
  {
    id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    email: 'sample@gmail.com',
    full_name: 'Raven',
    `station: {
      station_name: 'Water Station 1',
      user_id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f'
    },
    type: [ [Object], [Object], [Object] ]
  }
]

This is the sample data for the type when I query it:

 const {data, error} = await supabase  
      .from('type')
      .select(`
        *,
        profiles(
          *
        )
      `)
      .eq('user_id', searchParams.id)

Output:

[
  {
    id: 'c12c5e82-c569-48d9-ae25-4c68f0ac2935',
    name: 'Distilled Water',
    price: 20,
    user_id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    profiles: {
      id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
      email: 'ravenousred18@gmail.com',
      full_name: 'Raven'
    }
  },
  {
    id: 'f6759420-8ae7-485f-99da-0f248a964d63',
    name: 'Mineral Water',
    price: 50,
    user_id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    profiles: {
      id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
      email: 'ravenousred18@gmail.com',
      full_name: 'Raven'
    }
  },
  {
    id: '70e2e497-37b0-4294-a3b3-94bbd95c989a',
    name: 'Sparkling Water',
    price: 500,
    user_id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    profiles: {
      id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
      email: 'sample@gmail.com',
      full_name: 'Raven'
    }
  }
] 

Expected Data is to show the list of types on this data:

[
  {
    id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    email: 'ravenousred18@gmail.com',
    full_name: 'Raven',
    station: {
      station_name: 'Water Station 1',
      user_id: '2d6c72a1-175c-4c08-823e-10e35c0d1d7f',
    },
    type: [
      {
        id: 'c12c5e82-c569-48d9-ae25-4c68f0ac2935',
        name: 'Distilled Water',
        price: 20,
      },
      {
        id: 'f6759420-8ae7-485f-99da-0f248a964d63',
        name: 'Mineral Water',
        price: 50,
      },
      {
        id: '70e2e497-37b0-4294-a3b3-94bbd95c989a',
        name: 'Sparkling Water',
        price: 500,
      },
    ],
  },
];

Answer 1

Based on the [Object] [Object] response I'm assuming you are using console.log() to debug and visualize the data, right?

If so, that's why you are seeing the [Object]. Console.log truncates the data to be more readable, but it's just a visual thing, your data is actually there.

There's a quick trick you can do if you want to see the complete response, which is to stringify the data in a formatted JSON, by doing the following:

console.log(JSON.stringify(data, null, 2))