Converting JSON data types into TypeScript interface data types

Question

Converting JSON data types into TypeScript interface data types

Struggling to convert data types to numbers using JSON.parse and the Reviver function. I've experimented with different options and examples, but can't seem to figure out where I'm going wrong. The Typescript interface I'm working with has defined types, but the incoming JSON file uses "" for all values.

My only requirement is to change strings to numbers, nothing else.

Here's an example of the JSON input ->

{"sub_type": "0", "year": "2023", "peak": "N"}

Expected output:

{"sub_type": 0, "year": 2023, "peak": "N"}

I have attempted the following code snippet to achieve this:

    let cards: Array<Card> = pt_cards['data'];
    let tstCard: Card = JSON.parse(JSON.stringify(cards[0]), (key, value) => {
        if(!isNaN(value)) {
            return(key: value);
        }
        return value;
    });

Should I consider replacing the current Interface declaration instead?

javascript typescript

Answer 1

Answer №1

Here's a method you can use:

JSON.parse(jsonString, (key, value) => {

   if (!isNaN(value)) {
      return Number(value);
   }

   return value;
});

This code snippet only converts the value to a number if it represents a number.

Answer 2

Here's a method you can use:

JSON.parse(jsonString, (key, value) => {

   if (!isNaN(value)) {
      return Number(value);
   }

   return value;
});

This code snippet only converts the value to a number if it represents a number.

Answer 3

Answer №2

Why go through the hassle of using JSON.stringify just to turn around and use JSON.parse again? Check out this demonstration on typescript playground -

type t_card = {
  sub_type: number
  year: number
  peak: string
}

type t_serialized_card = {
  sub_type: string
  year: string
  peak: string
}

function stringToNumberExn(s: string): number {
  const n = Number.parseInt(s)
  if (Number.isNaN(n))
    throw Error(`stringToNumberExn: ${s} is not a number`)
  return n
}

async function getCards(): Promise<Array<t_card>> {
  // format as returned from backend
  const res: Array<t_serialized_card> = 
    await fetch("/path/to/cards").then(r => r.json())

  // map to desired format 
  return res.map(card => ({
    sub_type: stringToNumberExn(card.sub_type),
    year: stringToNumberExn(card.year),
    peak: card.peak
  }))
}

Answer 4

Why go through the hassle of using JSON.stringify just to turn around and use JSON.parse again? Check out this demonstration on typescript playground -

type t_card = {
  sub_type: number
  year: number
  peak: string
}

type t_serialized_card = {
  sub_type: string
  year: string
  peak: string
}

function stringToNumberExn(s: string): number {
  const n = Number.parseInt(s)
  if (Number.isNaN(n))
    throw Error(`stringToNumberExn: ${s} is not a number`)
  return n
}

async function getCards(): Promise<Array<t_card>> {
  // format as returned from backend
  const res: Array<t_serialized_card> = 
    await fetch("/path/to/cards").then(r => r.json())

  // map to desired format 
  return res.map(card => ({
    sub_type: stringToNumberExn(card.sub_type),
    year: stringToNumberExn(card.year),
    peak: card.peak
  }))
}

Converting JSON data types into TypeScript interface data types

Answer №1

Answer №2

Similar questions

tips for uploading image data using JavaScript

The random number generator in TypeScript not functioning as expected

"Retrieving an element from an array may result in a value of

Execute a JavaScript function when an HTML list element is clicked

Tips for determining if a player (canvas) is in contact with a drawn wall for collision detection

Challenges with retrieving all text records in a profile using ethers.js

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

Access an attribute using slashes in Jquery

Guide on how to send files to an API using a form in React with MUI

Pass along a variable with either "&" or "%" to a PHP file utilizing JavaScript

"Encountering a RangeError with Node.js Sequelize while working with

What is the best way to use React to display all user post images on a webpage in real

Issue with exporting to Excel in AngularJS in Internet Explorer not functioning as expected

Initiating the Gmail React component for composing messages

CoffeeScript is failing to run the code

A bug in the modal dialog is causing it to disregard the value of

Tips for automatically expanding all nodes with children when the page loads in the Wix Angular tree control

Retrieve information from subcategories in the Realtime Database using Firebase

Tips for preventing the occurrence of undefined when retrieving data?

Unusual actions exhibited by a combination of JavaScript functions