Retrieving Tracks

In this example, we will show how to get a list of music using the iTunes API with the @app/request library.

Main Steps

Since we previously learned how to create screens, let's get straight to the point and start with importing libraries.

Importing Libraries

import {request} from '@app/request';

We import the request function from the @app/request library, which is used to make requests to external APIs.

Fetching Data from iTunes API

const response = await request.get(`https://itunes.apple.com/search?&term=rock`);
const results = response.body.results;

In this code, we use the get method to make a request to https://itunes.apple.com/search?&term=rock, and upon receiving the data, we store it in the variable results.

Let's execute a request for the first item and see what we have in the logs.

const results = response.body.results[0];
ctx.log(results)

{
"wrapperType": "track",
"kind": "song",
"artistId": 486597,
"collectionId": 169003304,
"trackId": 169003415,
"artistName": "Journey",
"collectionName": "Greatest Hits (2024 Remaster)",
"trackName": "Don't Stop Believin' (2024 Remaster)",
"collectionCensoredName": "Greatest Hits (2024 Remaster)",
"trackCensoredName": "Don't Stop Believin' (2024 Remaster)",
"artistViewUrl": "https://music.apple.com/us/artist/journey/486597?uo=4",
"collectionViewUrl": "https://music.apple.com/us/album/dont-stop-believin-2024-remaster/169003304?i=169003415&uo=4",
"trackViewUrl": "https://music.apple.com/us/album/dont-stop-believin-2024-remaster/169003304?i=169003415&uo=4",
"previewUrl": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview126/v4/5c/72/97/5c72974f-6022-f760-ad82-35964fb636b5/mzaf_12752096049347330756.plus.aac.p.m4a",
"artworkUrl30": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/30x30bb.jpg",
"artworkUrl60": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/60x60bb.jpg",
"artworkUrl100": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/100x100bb.jpg",
"collectionPrice": 10.99,
"trackPrice": 1.29,
"releaseDate": "1981-06-03T07:00:00Z",
"collectionExplicitness": "notExplicit",
"trackExplicitness": "notExplicit",
"discCount": 1,
"discNumber": 1,
"trackCount": 16,
"trackNumber": 2,
"trackTimeMillis": 250835,
"country": "USA",
"currency": "USD",
"primaryGenreName": "Rock",
"isStreamable": true
}

In this log, we see a list of songs with keys such as:

• song title
• artist
• genre
• icon URLs
• price, etc.

We have learned how to make API requests and retrieve objects; now let's render the elements on the page.

List of Tracks

Let's display the list of tracks on the main screen.

import { request } from '@app/request'

app.screen('/', async (ctx, req) => {
  const response = await request.get(`https://itunes.apple.com/search?&term=rock`)
  const results = response.body.results

  return (
    <screen title="audioplayer">
      {results.map(item => (
        <list-item
          icon={{ url: item.artworkUrl100}}
          content={{ title: item.trackName, subTitle: item.artistName }}
        />
      ))}
    </screen>
  )
})

Using map, we iterate over all the logs and create rows for our songs, which will consist of:

• icon - the icon pulled from artworkUrl100
• content
  • title - trackName, the name of the songs.
  • subTitle - artistName, the name of the artist.

Let's add some styles, and we should end up with the following:

In the next example, we will show how to open and play tracks: "How to create a player?".