Converting an array of object values to an Interface type in Typescript

Question

Converting an array of object values to an Interface type in Typescript

In my JSON document, I have an array named dealers that consists of various dealer objects like the examples below:

"dealers" : [ 
    {
        "name" : "BMW Dealer",
        "country" : "Belgium",
        "code" : "123"
    },
        {
        "name" : "Audi Dealer",
        "country" : "France",
        "code" : "124"
    },
        {
        "name" : "VW Dealer",
        "country" : "Germany",
        "code" : "125"
    }
]

Additionally, there is an interface type defined as follows along with a variable of this interface type.

interface IDealer extends IZone {
    dealerName: string;
    dealerCode: string;
    dealerCountry: string
}

var countryDealers IDealer;

I am looking for guidance on how to loop through the dealers array and populate the countryDealers variable accordingly.

Any suggestions on how to achieve this effectively?

javascript typescript

Answer 1

Answer №1

Have you experimented with utilizing the .map() function from ES6?

For example:


let myInterfacesArray = countryDealers.map(xx => {
    return <IDealer>
    {
        dealerName: xx.name,
        dealerCode: xx.code,
        dealerCountry: xx.country
        // and so on
    };
});

I hope this solution proves useful to you!

Answer 2

Have you experimented with utilizing the .map() function from ES6?

For example:


let myInterfacesArray = countryDealers.map(xx => {
    return <IDealer>
    {
        dealerName: xx.name,
        dealerCode: xx.code,
        dealerCountry: xx.country
        // and so on
    };
});

I hope this solution proves useful to you!

Answer 3

Answer №2

I was unable to utilize

return <IInterface>
{
  ...
}

within tsx files due to encountering errors.

You must instead use

return {
  ...
} as IInterface;

instead

Answer 4

I was unable to utilize

return <IInterface>
{
  ...
}

within tsx files due to encountering errors.

You must instead use

return {
  ...
} as IInterface;

instead

Converting an array of object values to an Interface type in Typescript

Answer №1

Answer №2

Similar questions

Inaccurate Guild Member Filtering

Struggling to transfer information between different components?

A guide on showcasing items on an html webpage through the use of javascript

Retrieve data from a Rails controller using Ajax

What is the best way to retrieve JSON data in ReactJS through ExpressJS?

Substitute all attributes of objects with a different designation

Error: The function 'check' is not defined and cannot be called when the 'on

You are able to use a null type as an index in angular.ts(2538) error message occurred

"Unlock the power of Meteor: dynamically serve up the specific range of items

When you click anywhere on the page, JavaScript's method __dopostback is triggered

Incorporating a Component with lazy-loading capabilities into the HTML of another Component in Angular 2+

What is the method to retrieve the data type of the initial element within an array?

What are the available events offered by Express websockets?

In the event that the hash consists of just one string, disregard any additional conditional statements

The specified property is not present on the given type

Employ various iterations of the leaflet library

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP

The useEffect function is executing two times

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

Prevent the ability to add options dynamically to a drop-down select list