Transforming API data into a particular type using Typescript

Question

Transforming API data into a particular type using Typescript

I am looking to extract only specific properties from a given object. Can TypeScript interfaces be used to iterate through the data and eliminate unnecessary properties?

Sample data:

[
  0: {
    "original_language" : "en",
    "title" : "The First Title",
    "original_title" : "The First Original Title",
    "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac suscipit nulla.",
    "release_date": "2022-05-04",
    "popularity": 9411.64
  },
  1: {
    "original_language" : "en",
    "title" : "The Second Title",
    "original_title" : "The Second Original Title",
    "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac suscipit nulla.",
    "release_date": "2022-05-04",
    "popularity": 9411.64
  },
  2: {
    "original_language" : "es",
    "title" : "The Third Title",
    "original_title" : "The Third Original Title",
    "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac suscipit nulla.",
    "release_date": "2022-05-04",
    "popularity": 9411.64
  }
]

Desired object properties (Typescript Interface):

interface IMovie {
  overview: string,
  release_date: Date,
  title: string
}

My attempt at creating a mapper function:

const movieMapper = (movies: []): [IMovie] => {
  return movies.map(movie => <IMovie>movie);
}

javascript typescript

Answer 1

Answer №1

Two interfaces can be created: one for the actual API response array items and one for desired items:

interface FullMovie {
  original_language: string
  title: string
  original_title: string
  overview: string
  release_date: Date
  popularity: number
}

type Movie = Pick<FullMovie, 'overview' | 'release_date', 'title'>

A separate type Movie can be defined, but it is recommended to make it dependent on the original interface so any changes in FullMovie will automatically reflect in Movie.

Mapping can then be performed as follows:

const movieMapper = (movies: FullMovie[]): Movie[] => {
  return movies.map(movie => ({
    overview: movie.overview,
    release_date: movie.release_date,
    title: movie.title,
  }));
}
// or, using destructuring
const movieMapper = (movies: FullMovie[]): Movie[] => {
  return movies.map(({ overview, release_date, title }) => ({ overview, release_date, title }));
}

Answer 2

Two interfaces can be created: one for the actual API response array items and one for desired items:

interface FullMovie {
  original_language: string
  title: string
  original_title: string
  overview: string
  release_date: Date
  popularity: number
}

type Movie = Pick<FullMovie, 'overview' | 'release_date', 'title'>

A separate type Movie can be defined, but it is recommended to make it dependent on the original interface so any changes in FullMovie will automatically reflect in Movie.

Mapping can then be performed as follows:

const movieMapper = (movies: FullMovie[]): Movie[] => {
  return movies.map(movie => ({
    overview: movie.overview,
    release_date: movie.release_date,
    title: movie.title,
  }));
}
// or, using destructuring
const movieMapper = (movies: FullMovie[]): Movie[] => {
  return movies.map(({ overview, release_date, title }) => ({ overview, release_date, title }));
}

Answer 3

Answer №2

Your function is expecting a tuple as the return type, not an array.

To solve this, you can utilize object destructuring to select specific fields and transform them into a new object.

const filmTransformer = (films: any[]): IFilm[] => {
    return films.map(({plot, releaseDate, title}) => ({ plot, releaseDate, title }));
}

console.log(filmTransformer(films))

Answer 4

Your function is expecting a tuple as the return type, not an array.

To solve this, you can utilize object destructuring to select specific fields and transform them into a new object.

const filmTransformer = (films: any[]): IFilm[] => {
    return films.map(({plot, releaseDate, title}) => ({ plot, releaseDate, title }));
}

console.log(filmTransformer(films))

Answer 5

Answer №3

If you utilize io-ts, you have the option to create a codec like this:

// Codec implementation
import * as t from 'io-ts'

export const movieCodec = t.type({
  overview: t.string,
  release_date: t.string, // consider using custom codecs for decoding dates into JS Date objects
  title: t.string,
})

export const movieListCodec = t.array(movieCodec)

After defining the codec, you can validate the response data against it.

// Handling the response in your application
fetch(someEndpoint)
  .then<unknown>(r => r.json())
  .then(movieCodecList.is)
  .then(verifiedResponse => {
    // verifiedResponse is not only correctly typed but also validated at runtime
  })

This explanation may go beyond your initial query, but it's worth noting that performing runtime checks on external data is strongly recommended!

Answer 6

If you utilize io-ts, you have the option to create a codec like this:

// Codec implementation
import * as t from 'io-ts'

export const movieCodec = t.type({
  overview: t.string,
  release_date: t.string, // consider using custom codecs for decoding dates into JS Date objects
  title: t.string,
})

export const movieListCodec = t.array(movieCodec)

After defining the codec, you can validate the response data against it.

// Handling the response in your application
fetch(someEndpoint)
  .then<unknown>(r => r.json())
  .then(movieCodecList.is)
  .then(verifiedResponse => {
    // verifiedResponse is not only correctly typed but also validated at runtime
  })

This explanation may go beyond your initial query, but it's worth noting that performing runtime checks on external data is strongly recommended!

Transforming API data into a particular type using Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Function for querying database is not executing in an asynchronous manner

Using Axios with Mongoose to Update Documents in Not Working State

Remove any overlapping datetime values from a JavaScript array of objects

Validating Two DateTime Pickers as a Group with Javascript in asp.net

<use> - SVG: Circles with different stroke properties

Error: Unable to access the 'create' property of an undefined object while utilizing sequelize to register a user and add an entry

looking to display the latest status value in a separate component

Unable to establish a connection with the endpoint

Is it necessary to exclude the 'scripts' folder from your Aurelia project's .gitignore file?

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

Enhance Component Reusability in React by Utilizing Typescript

Ensure the CSS class stays on Quill clipboard.dangerouslyPasteHTML

Ways to retrieve a specific attribute within a detailed JSON reply

Sharing a state object with another React file can be accomplished by using props or context to

Is there a way to identify a change in the URL using JQuery?

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

Executing PHP include statement with ajax: A step-by-step guide

Dealing with the challenge of managing multiple instances in a setup involving Ajax long polling (comet) and PHP on Lighttpd v1

Converting data into a multidimensional array in AngularJS: A comprehensive guide