Creating dynamic keys using Typescript and JSON data format

Question

Creating dynamic keys using Typescript and JSON data format

Currently, I am developing an application using Typescript and React Native. Within my app, I have a JSON file containing information about poker hands that needs to be accessed.

The structure of the JSON data is as follows:

{
  "22": [
    [
      0,
      20
    ]
  ],
  "32o": [
    [
      0,
      20
    ]
  ],
  "32s": [
    [
      0,
      20
    ]
  ],
  "33": [
    [
      0,
      20
    ]
  ],

To import the JSON data, I use the following code:

import * as pdata from './push.json';

To access the data, this syntax can be used:

pdata['AA'][0][1]

However, when attempting to access the JSON using dynamically generated keys like so:

currentHand = '32o';
console.log(pdata[currentHand][0][1]);

An error message appears stating "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '...' No index signature with a parameter of type 'string' was found on type '{ "22": number[][];...'. This issue arises due to the inability to hardcode all possible key options given the large number of keys present in the dataset.

I have been exploring various solutions to resolve this issue but have yet to find one that effectively addresses it.

json typescript

Answer 1

Answer №1

When you declare currentHand without using const, Typescript assumes that the value of currentHand can be changed and therefore assigns the type of string to it.

However, if you declare it with const:

import data from "./push.json";

const currentHand = "22";
console.log(data[currentHand][0][1]);

The type of currentHand will now be specifically "22" instead of just a general string, eliminating the error.

Due to the large number of keys, hardcoding all possibilities is impractical. I have searched for solutions but nothing has worked so far.

You can try this approach:

type DataKey = keyof typeof data; // DataKey type will be "22" | 32o" | "32s" | ...

const currentHand: DataKey = "22";
// or
const currentHand = "22" as DataKey;

console.log(data[currentHand][0][1]);

Another alternative method is:

import data from "./push.json";

const dynamicData = <Data>((<any>data));

type Data = {
  [key: string]: [number[]];
  // or if value structure is consistent
  [key: string]: [[number, number]];
};


let currentHand = "22";
console.log(dynamicData[currentHand][0][1]);

Answer 2

When you declare currentHand without using const, Typescript assumes that the value of currentHand can be changed and therefore assigns the type of string to it.

However, if you declare it with const:

import data from "./push.json";

const currentHand = "22";
console.log(data[currentHand][0][1]);

The type of currentHand will now be specifically "22" instead of just a general string, eliminating the error.

Due to the large number of keys, hardcoding all possibilities is impractical. I have searched for solutions but nothing has worked so far.

You can try this approach:

type DataKey = keyof typeof data; // DataKey type will be "22" | 32o" | "32s" | ...

const currentHand: DataKey = "22";
// or
const currentHand = "22" as DataKey;

console.log(data[currentHand][0][1]);

Another alternative method is:

import data from "./push.json";

const dynamicData = <Data>((<any>data));

type Data = {
  [key: string]: [number[]];
  // or if value structure is consistent
  [key: string]: [[number, number]];
};


let currentHand = "22";
console.log(dynamicData[currentHand][0][1]);

Answer 3

Answer №2

I stumbled upon a solution to this problem by using the website . After saving the generated converter in a file named Convert.ts, I was able to access JSON data like so:

import * as pdata from './push.json';
import { Convert } from './Convert'
    
const pushHands = Convert.toHands(JSON.stringify(pdata));
var ch = '42o';
console.log(pushHands['default'][ch][0][1]);

Answer 4

I stumbled upon a solution to this problem by using the website . After saving the generated converter in a file named Convert.ts, I was able to access JSON data like so:

import * as pdata from './push.json';
import { Convert } from './Convert'
    
const pushHands = Convert.toHands(JSON.stringify(pdata));
var ch = '42o';
console.log(pushHands['default'][ch][0][1]);

Creating dynamic keys using Typescript and JSON data format

Answer №1

Answer №2

Similar questions

Gathering the output from every function within an array of functions

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

Dynamic data manipulation with Angular ReactiveForms

What is the best way to extract a JSON value using key-value pairs?

The useState variable remains unchanged even after being updated in useEffect due to the event

Unable to retrieve a valid JSON from a freemaker collection

The functionality of .getJSON() in JSON/JQuery is not compatible with IE8 or IE9 browsers

What is the significance of the error message "The Type 'Any' does not align with the 'Sequence' protocol" when trying to iterate through a 'JSON' result?

Understanding the structure of JSON files without prior knowledge

Assigning value to a member variable in a TypeScript Angular class

NPM: There are no valid TypeScript file rules specified

Executing functions in Vue TypeScript during initialization, creation, or mounting stages

Encountering a SyntaxError while utilizing framer-motion in Next JS

Error in Typescript: The data type 'string | undefined' does not meet the requirements of 'string | number | symbol' constraint

show image data from json source

Issues arise with the escape key functionality when attempting to close an Angular modal

"Is there a way for me to retrieve the name of my object property and use it

Retrieve specific JSON information

Ionic 3 Plugin for Handling HTTP Requests

Utilizing WebWorkers with @mediapipe/tasks-vision (Pose Landmarker): A Step-by-Step Guide