Implementing Google APIs with Next.js: Managing arrays without keys

Question

Implementing Google APIs with Next.js: Managing arrays without keys

Recently, I've started using next.js and came across the getStaticProps function. In this function, I'm loading data from a Google Sheet table into a constant. The result is an array of arrays, just like what the Google API returns shown below:

[ [ "CLIENT A", "MIKE", "UNKNOWN", "TRADICIONAL" ], [ "CLIENT B", "MARY", "UNKNOWN", "MOROSO" ], [ "CLIENT C", "MIKE", "CLIENT C S.A DE C.V.", "TRADICIONAL" ], [ "CLIENT D", "JOHN", "RAZON SOCIAL CLIENT", "TRADICIONAL" ] ]

I am passing this array as props but struggling to manipulate the information in order to display it in the desired format:

CLIENT A
Salesperson: MIKE
Razón Social: UNKNOWN
Category: TRADICIONAL

--------------------

CLIENT B
Salesperson: MARY
Razón Social: UNKNOWN
Category: MOROSO

--------------------

CLIENT C
Salesperson: MIKE
Razón Social: CLIENT C S.A DE C.V.
Category: TRADICIONAL

I have been trying to figure out a way to add keys to the array, such as:

{ client: "CLIENT A", salesperson: "MIKE", razonsocial: "UNKNOWN", category: "TRADICIONAL", }

I also attempted to map the array of arrays but encountered an error stating that mapping was not possible.

If anyone could provide guidance on the best approach to handling this array, I would greatly appreciate it!

javascript arrays google-api next.js

Answer 1

Answer №1

Does this suit your needs?

let details = [
  ["CUSTOMER A", "MIKE", "UNKNOWN", "TRADITIONAL"],
  ["CUSTOMER B", "MARY", "UNKNOWN", "OVERDUE"],
  ["CUSTOMER C", "MIKE", "CUSTOMER C S.A DE C.V.", "TRADITIONAL"],
  ["CUSTOMER D", "JOHN", "COMPANY NAME CUSTOMER", "TRADITIONAL"]
];
const headings = ['', 'Salesperson', 'Company Name', 'Category'];
details.map(detail => {
  detail.forEach((element, index) => {
    console.log(`${headings[index]?headings[index]+": ":''}${element}`)
  })
  console.log('------------------');
})

Answer 2

Does this suit your needs?

let details = [
  ["CUSTOMER A", "MIKE", "UNKNOWN", "TRADITIONAL"],
  ["CUSTOMER B", "MARY", "UNKNOWN", "OVERDUE"],
  ["CUSTOMER C", "MIKE", "CUSTOMER C S.A DE C.V.", "TRADITIONAL"],
  ["CUSTOMER D", "JOHN", "COMPANY NAME CUSTOMER", "TRADITIONAL"]
];
const headings = ['', 'Salesperson', 'Company Name', 'Category'];
details.map(detail => {
  detail.forEach((element, index) => {
    console.log(`${headings[index]?headings[index]+": ":''}${element}`)
  })
  console.log('------------------');
})

Answer 3

Answer №2

Essentially, my goal is to pass the data array as props to my default function. The issue lies in my inability to map the renglon object and assign keys to it. In the function home, the client.name property is not functioning due to the key creation constraint and I am unable to access properties using client[0].

import { google } from 'googleapis';

export async function getStaticProps() {
  
    const auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'] });

    const sheets = google.sheets({ version: 'v4', auth });
    const range = `Sheet!A$2:D`;

    const response = await sheets.spreadsheets.values.get({
        spreadsheetId: process.env.SHEET_ID,
        range,
    });

    // The challenge of adding keys to renglon persists
    const renglon = response.data.values;
    
    if (renglon.length) {
      return {
        props: {
          renglon,
        }
      };
    }

}

export default function Home( { renglon } ) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {renglon.map((client) => {
         return (
            <li>Client: {client.name}</li>  //Unable to create this key or access using client[0]
            Sales person: {client.salesperson}<br />//Unable to create this key or access using client[1]
            Razón Social: {client.razonsocial}<br />//Unable to create this key or access using client[2]
            Category: {client.category}<br /> //Unable to create this key or access using client[3]
         )
       })}
      </div>
    );
}

Answer 4

Essentially, my goal is to pass the data array as props to my default function. The issue lies in my inability to map the renglon object and assign keys to it. In the function home, the client.name property is not functioning due to the key creation constraint and I am unable to access properties using client[0].

import { google } from 'googleapis';

export async function getStaticProps() {
  
    const auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'] });

    const sheets = google.sheets({ version: 'v4', auth });
    const range = `Sheet!A$2:D`;

    const response = await sheets.spreadsheets.values.get({
        spreadsheetId: process.env.SHEET_ID,
        range,
    });

    // The challenge of adding keys to renglon persists
    const renglon = response.data.values;
    
    if (renglon.length) {
      return {
        props: {
          renglon,
        }
      };
    }

}

export default function Home( { renglon } ) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {renglon.map((client) => {
         return (
            <li>Client: {client.name}</li>  //Unable to create this key or access using client[0]
            Sales person: {client.salesperson}<br />//Unable to create this key or access using client[1]
            Razón Social: {client.razonsocial}<br />//Unable to create this key or access using client[2]
            Category: {client.category}<br /> //Unable to create this key or access using client[3]
         )
       })}
      </div>
    );
}

Implementing Google APIs with Next.js: Managing arrays without keys

Answer №1

Answer №2

Similar questions

The Use of Arrays and Rvalues as Function Parameters

What is the best way to retrieve distinct id values from a form in Rails when sending a DELETE request via AJAX?

In search of assistance with accessing API data from an object, not an array, in React

How to target a class in jQuery that contains two specific strings

Activating/Deactivating the Submit Button with jQuery and Bootstrap

Sending a Form Generated in Real Time with a Button Located Outside the Form

Converting a list of data into a two-dimensional array for easy processing

Guide on separating a variable by commas using jQuery

Why do class definitions become unavailable in Javascript due to the semantics of `require()`?

What is the reason for Jquery AJAX appending additional path to the relative path?

Protecting client-side game logic operations with web application security

Replace the current CSS styles of a pre-installed package

The Workbench has "Rejected the setting of an insecure header 'content-length'"

Is there a way to identify the top five elements that are most frequently occurring in the array?

Is it possible to update the CSS file of an external SVG file in real-time?

The modal window obstructs my view on the screen

The JSON parser is still encountering issues with newlines, despite attempting to fix the problem by adding

Encountering challenges with implementing debouncing functionality in React programming

How can I toggle the radio button based on the dropdown selection?

What is the most efficient way to update a large batch of documents in MongoDB?