Error Type: Using type 'string[]' as an index type is not allowed

Something is not right here:

let organization = organizationList2[context.params?.organizationId];
Failed to compile.

./pages/[lang]/designer/[organizationId].tsx:337:40
Type error: Type 'string[]' cannot be used as an index type.

  335 |   });
  336 |   let organizationList2 = await organizationList2Data.json();

> 337 |   let organization = organizationList2[context.params?.organizationId];

Curious why rganization is undefined.

organizationList2 {
  'EC763372-277D-46B9-AD87-F45519E7D606': {
    name: 'TADA moment',
    events: { 'tada-moment-asztalivaza': [Object] }
  },
  ...
}
context.params?.organizationId 7181fdc7-a58e-45b1-a377-a21e4c62442c
oraganization undefined

and organizationId:

let organizationId: string = context.params?.organizationId as string;

and the entire method:

export const getStaticProps: GetStaticProps = async ({ ...context }) => {
  let organizationList2Data = await fetch(`${baseURL}getSMOrganizations`, {
    method: "post",
    headers: { "Content-Type": "application/json" },
  });
  let organizationList2 = await organizationList2Data.json();
  let organization = organizationList2[context.params?.organizationId];
  console.log("organizationList2", organizationList2);
  console.log("context.params?.organizationId", context.params?.organizationId);
  console.log("oraganization", organization);
  let zz = Object.keys(organizationList2);
  console.log("zz", zz);
  let organizationId: string = context.params?.organizationId as string;
  return {
    props: {
      organizationId: context.params?.organizationId,
      organization: organization ?? "",
    },
    revalidate: 600,
  };
};

Answer №1

The reason for this discrepancy is due to the fact that context.params?.organizationId (which corresponds to "7181fdc7-a58e-45b1-a377-a21e4c62442c") is in lowercase, while the keys in organizationList2 are in uppercase.

To resolve this issue, simply execute the following code snippet:

let organization = organizationList2[context.params?.organizationId?.toUpperCase()];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

Encountering the error cannot read property 'setDirtyAttribute' of null even when using YourModel.create({...}) in ember-typescript-cli to instantiate an EmberObject. Model: import DS from 'ember-data'; import {computed} from "@ember/ ...

Display sqllite database information in an HTML view using Ionic 2

After executing a select query against the database, I am able to read the results from the logcat and view the data there. However, I am encountering an issue where the data is not rendering in the HTML view after binding. //data retrieve section db.exec ...

Tips for simulating Firebase authentication providers like FacebookAuthProvider?

My goal is to create a mock for the firebase.auth object in react-native-firebase, specifically targeting the signInWithCredential method. This mock will allow me to test my code effectively. The code I am testing looks like this: public async FacebookSi ...

What is the best way to create a button that functions as a toggle and changes its styling when clicked?

I have implemented the following code to update prices in my pricing table: function updatePrices() { var x = document.getElementById("prijs-small"); if (x.innerHTML === "17,50") { x.innerHTML = "13,50"; } else { x.innerHTML = "17,50"; } ...

The VSCode Extension fails to launch after being packaged

I'm currently working on a straightforward VSCode extension that scans the active open file for any comments containing "//TODO: " and then presents a list of all TODO comments in a webview sidebar tab. While I have a functional prototype that runs s ...

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

Leverage Java variables within JavaScript

Currently encountering an issue with integrating a java variable (obtained from a database record) into JavaScript for the datePicker UI. The goal is to assign the java variable to the javascript var "unavailable" so that already booked dates become unclic ...

Iterate through a nested array in JavaScript and extract specific properties by comparing them to another array

Within my code, there is a kids object structured as follows: const kids = { name: 'john', extra: { city: 'London', hobbies: [ { id: 'football', team: &apos ...

Guide to dividing a string and structuring it into an array

I need help breaking apart these strings: var str = '(john) the quick brown (emily) fox jumps over (steam) the lazy dog.' var str1 = '(john) the quick brown fox jumps over (steam) the lazy dog.' to create an array like this: joh ...

How do I limit search bar queries to only display results from my website and provide suggestions?

Is there a way to customize the search bar on my website so that it only finds results within my pages and also provides suggestions? ...

What sets apart the usage of :host from its absence?

I'm finding it quite confusing to understand the usage of :host in Angular. For instance, let's consider a CSS file named a-component.component.css and its corresponding HTML file named a-component.component.html with a selector of app-a-compone ...

What is the best method for storing and retrieving data retrieved from an HTTP response?

Utilizing the request module, I am making a call to an API that sends me a Base64 encoded response in the form of a file. app.get("/report", async(request, response) => { const newReq = new mdl.Request const newSources = new mdl.Datasource ...

Leverage generics to assign a static type to the key of a record in a way that refers back to

I am working on developing a finite state machine companion for my chatbot automation library. The aim is to guide users towards different conversation phases while interacting with the bot. The plan is for the users of the library to supply a "state mach ...

Guide on detecting errors when parameters are not provided with req.params in Node.js

My question revolves around a piece of code that I have been working on. Here is the snippet: const express = require('express') const app = express() app.get('/test/:name', (req, res) => { const {name} = req.params; res.send(`P ...

Display a different image while another image is in the process of loading

I am currently facing an issue with a div that has a background image set up as follows: <div class="carousel-image" style="background: url(img/background.gif) no-repeat center center;"> </div> Upon loading my webpage, there is a brief ...

Seeking assistance with iterating through a specific JSON data structure

I am dealing with JSON data that has a specific format: {"errors":{"toDate":["Date error_message"],"name":["name error_message"]}} OR {"success":{"toDate":["Date update_data"],"name":["name update_data"]}} I am looking for a way to loop through this d ...

Troubleshooting broken links on a multi-page website built with node.js and ejs

I am encountering some difficulties with my multi-page website created in node.js/ejs. I suspect that the issue lies within the routing mechanism, although I have double-checked my routes and they seem to be configured correctly. The problem arises when I ...

Guide on using jQuery to update data in a form upon submission

Below is the form code: <div id="myForm"> <form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"> <div class="row uniform"> <div class="6u 12u$(medium)"&g ...

The `$scope variable fails to update in another controller`

I am currently facing an issue with updating a value on my view. Let me walk you through my code along with a brief explanation of the situation. The code may look messy as I have been experimenting with different combinations lately. The controller in qu ...

Having trouble deciphering the code snippet in JavaScript

I'm having trouble grasping the execution of these code lines. What does `project(camera)` do and what is the significance of `screenVector` in this context? function labelBox(Ncardinal, radius, domElement) { this.screenVector = new T ...