Tips on showcasing a nested array in Next.js or converting it into an object

Question

Tips on showcasing a nested array in Next.js or converting it into an object

{
    "count": 2,
    "rows": [
        {
            "id": "5ab46e31-391c-46a7-8e45-db9ada07626d",
            "name": "admin",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68090c050106280f05090104460b0705">[email protected]</a>",
            "phoneNumber": "95397454542325",
            "username": "admin",
            "password": "$2b$10$esLfedWAPEMAgWJ5HBAFQu6u47Cbfep7hnUTDZPswb4gWFhZW0rbm",
            "role": "admin",
            "isActive": true,
            "createdAt": "2023-09-29T11:00:55.388Z",
            "updatedAt": "2023-09-29T11:00:55.388Z"
        },
        {
            "id": "58aacbcd-2344-40f1-a9e9-11c70d44cbb4",
            "name": "Aman",
            "email": "<a href='/cdn-cgi/l/email-protection' className='__cf_email__' data-cfemail='84e5e9e5eab6b4b4b4c4e3e9e5ede8aae7ebe9'>tvejsvup@qjpnzd.qjabl</a>",
            "phoneNumber": "8304893218",
            "username": "Aman-admin",
            "password": "$2b$10$uZZrRz5bATzJ3jPCAURpKeEP/TaHhoWhmKUvWSyIrOvKMmD3yNuKi",
            "role": "user",
            "isActive": true,
            "createdAt": "2023-10-07T09:58:51.193Z",
            "updatedAt": "2023-10-07T10:00:31.590Z"
        }
    ]
}

The above JSON data should be presented

'use client'
import React from 'react';
const plans = async () => {
  const res = await fetch('http://localhost:3001/api/plans', { cache: 'no-store' });
  console.log(res);

  const users = await res.json();

  return (
    <div>
      <button className='bg-sky-600 text-black p-2 rounded-lg absolute top-4 right-40 hover:text-white transition-colors'>Create plans</button>
      <h1 className='absolute top-14 left-40'>Plans</h1>
      <div>
        <table className='table-column-group absolute top-24 left-40 min-w-full divide-y divide-gray-200 border'>
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            {users.map((data) => (
              <tr key={data.id}>
                <td>{data.name}</td>
                <td>{data.email}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default plans;

This code is for the frontend development using Next.js. As it appears to be a nested array, there might be formatting issues in display. Consider changing it to an object structure. Regular arrays display correctly, but this particular one seems to have some trouble rendering. Possible changes needed in the Next.js codebase to ensure proper display.

javascript arrays postgresql next.js

Answer 1

Answer №1

It seems like the API response you are receiving contains two keys count and rows. If you want to display the items within the rows key, make sure to replace users.map() with users.rows.map();

For Instance

'use client'
import React from 'react';
const plans = async () => {
  const res = await fetch('http://localhost:3001/api/plans', { cache: 'no-store' }); // utilize const res = await for promises
  console.log(res);//table table-zebra absolute top-24 left-40

  const users = await res.json();

  return (
    <div>
      <button className='bg-sky-600 text-black p-2 rounded-lg absolute top-4 right-40 hover:text-white transition-colors'>Create plans</button>
      <h1 className='absolute top-14 left-40'>Plans</h1>
      <div>
        <table className='table-column-group absolute top-24 left-40 min-w-full divide-y divide-gray-200 border'> 
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            {users.rows.map((data) => (
              <tr key={data.id}>
                <td>{data.name}</td>
                <td>{data.email}</td>
              </tr>your text
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default plans;

Answer 2

It seems like the API response you are receiving contains two keys count and rows. If you want to display the items within the rows key, make sure to replace users.map() with users.rows.map();

For Instance

'use client'
import React from 'react';
const plans = async () => {
  const res = await fetch('http://localhost:3001/api/plans', { cache: 'no-store' }); // utilize const res = await for promises
  console.log(res);//table table-zebra absolute top-24 left-40

  const users = await res.json();

  return (
    <div>
      <button className='bg-sky-600 text-black p-2 rounded-lg absolute top-4 right-40 hover:text-white transition-colors'>Create plans</button>
      <h1 className='absolute top-14 left-40'>Plans</h1>
      <div>
        <table className='table-column-group absolute top-24 left-40 min-w-full divide-y divide-gray-200 border'> 
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            {users.rows.map((data) => (
              <tr key={data.id}>
                <td>{data.name}</td>
                <td>{data.email}</td>
              </tr>your text
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default plans;

Tips on showcasing a nested array in Next.js or converting it into an object

Answer №1

Similar questions

Leveraging the power of context to fetch data from a store in a React component within the Next

Sync user information when alterations are made on a different device

Updating an element's HTML content from a template URL using AngularJS

Error has occurred: Unable to assign a value to an undefined property using axios

Passing variables dynamically in a created Express.js route

The proper way to retrieve data using getServerSideProps

How can one effectively manage asynchronous behavior on the client side of a Meteor application?

Encoding identification data from JSON using ColdFusion

Differentiating elements from two array objects in typescript: a guide

Combining two or more arrays containing similar values into a single array

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

jQuery Mishap - Creating an Unspecified Issue

I have successfully implemented ngCordova local notifications, but now I am looking for a way to make it trigger for each individual

Convert your Express.js API routes to Next.js API routes for better performance and flexibility

Error message received when calling a function within a Vue watcher states "function is not defined"

Having trouble deleting element despite having the correct ID?

Using third-party libraries like jQuery, CSS, and JavaScript in your React project by directly importing them into the index.html file can be a more efficient approach compared

a guide on expanding a submenu in a shiny dashboard sidebar without using automated functions

Switching from React version 15.6.2 to 16 results in disruptions to the functionality of the web

Ways to analyze three PHP arrays and organize outcomes that are not duplicated into separate new arrays