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

Trigger the click event on the ul element instead of the li element using jQuery

Transferring an array to PHP using AJAX

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

Show just a single error message if there are two validation errors present

Node.js encountering difficulty extracting JSON data

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Issue - Basic Data Protection and Unscrambling - Node.js

How can you apply filtering to a table using jQuery or AngularJS?

Reactivity in Vue.js powered by ES6 classes

What is the best method to erase data from an AutoComplete Box when clicking?

Utilizing Jquery to Pass an Optional Function to Another Function

react-widgets: deciding on the return value for the onSearch function in Multiselect

development session not persisting on local server (localhost:4200)

Exploring TypeORM: Leveraging the In() function within @ManyToMany relationships

Leveraging Angular2's observable stream in combination with *ngFor

can you explain the concept of a backing instance in react?

Expect a reply within the loop

Differentiating categories in the second parameter for controller method in AngularJS?

Node.js: Handling Undefined Request Parameters

Challenge involving CSS and Javascript for solving puzzles