What is the best way to loop through an object in TypeScript and replace a string value with its corresponding number?

Question

What is the best way to loop through an object in TypeScript and replace a string value with its corresponding number?

My situation involves handling data from a 3rd party API that consists of multiple properties, all stored as strings. Unfortunately, even numbers and booleans are represented as strings ("5" and "false" respectively), which is not ideal. I am determined to rectify this issue.

To address this, I have created a type to receive the API response and store the corrected values:

interface Person {
  age: string | number,
  name: string,
  hasChildren: string | boolean,
  ...
}

My goal is to convert data like this:

const responseFromApi: Person = {
  age: "20",
  name: "John",
  numberOfChildren: "true"
  ...
}

into this format:

const afterTreatment: Person = {
  age: 21,
  name: "John",
  numberOfChildren: true
  ...
}

It's worth noting that my actual object contains many more properties than shown in this example. Therefore, individually addressing each property is not a feasible solution for me.

My plan is to iterate through the object and convert any eligible values to their correct types based on the defined interface.

javascript typescript

Answer 1

Answer №1

If you iterate through the array using a for loop, you can check if the element's age is a string and if so, convert it to an integer using parseInt. Alternatively, a more efficient approach would be to use the map method on the list, applying the same logic as before but creating a new array with the updated values.

Here's an example:

const updatedList = people.map((person: Person) => {
  if (typeof person.age === "string") {
    return {
      ...person,
      age: parseInt(person.age)
    }
  }
  return person;
});

Answer 2

If you iterate through the array using a for loop, you can check if the element's age is a string and if so, convert it to an integer using parseInt. Alternatively, a more efficient approach would be to use the map method on the list, applying the same logic as before but creating a new array with the updated values.

Here's an example:

const updatedList = people.map((person: Person) => {
  if (typeof person.age === "string") {
    return {
      ...person,
      age: parseInt(person.age)
    }
  }
  return person;
});

Answer 3

Answer №2

As long as you maintain consistent variable naming conventions like person1, person2, person3, and ensure you provide the total number of added persons, this code snippet should function correctly.

interface Person {
    age: string | number,
    name: string
}
const person1: Person = {
  age: 20,
  name: "John",
}
const person2: Person = {
  age: "21",
  name: "Marie",
}
const lengthOfPersons: number = 2;
const newArray = [];
for(let i = 0; i < lengthOfPersons; i++)
{
 const n = i + 1;
 const row = eval('person'+n);
 newArray.push({...row, age: +row.age})
}
console.log(newArray);

Answer 4

As long as you maintain consistent variable naming conventions like person1, person2, person3, and ensure you provide the total number of added persons, this code snippet should function correctly.

interface Person {
    age: string | number,
    name: string
}
const person1: Person = {
  age: 20,
  name: "John",
}
const person2: Person = {
  age: "21",
  name: "Marie",
}
const lengthOfPersons: number = 2;
const newArray = [];
for(let i = 0; i < lengthOfPersons; i++)
{
 const n = i + 1;
 const row = eval('person'+n);
 newArray.push({...row, age: +row.age})
}
console.log(newArray);

What is the best way to loop through an object in TypeScript and replace a string value with its corresponding number?

Answer №1

Answer №2

Similar questions

What is the best way to implement a custom NgbDateParserFormatter from angular-bootstrap in Angular 8?

How to access a specific element within an ng-grid

Is there a way to pass around jest mocks across numerous tests?

Why does AngularJS treat $http response.data as an object, even though PHP sends back a JSON string?

Could not locate the express.js file

Troubleshooting the Bootstrap4 NavBar toggle button malfunction

Integrate Javascript code into a JavaScript file

I aim to display interconnected information from various APIs in a cohesive manner

Error in Angular 2: The requested URL https://imgur-apiv3.p.mashape.com/ cannot be loaded. The use of a wildcard '*' is not allowed in the 'Access-Control-Allow-Origin' header

Angular developers are struggling to find a suitable alternative for the deprecated "enter" function in the drag and drop CDK with versions 10 and above

Learn the method of exhibiting array elements in a dropdown menu with React JS

Every time I make updates, I have to reload the page to see the changes take effect

single-spa: revolutionizing console.log for each microfrontEnd

Trouble getting AngularJS $scope arrays to populate with multiple PHP to MySQL queries

The Axios post .then feature works correctly in Chrome, but it does not behave the same way in Firefox, Safari

Error: Unable to locate sportsRecord due to missing function

Ways to incorporate services into functions within Angularjs

Tips for adjusting the size of Material UI icons

Displaying FancyBox iframe on third visit to a page

Error encountered while importing ES6 npm module in Meteor causing SyntaxError