Visualizing a mashup API in Postman

Question

The MusicBrainz API has information about artists and music bands. ¹
An example – a request for the British rock band Coldplay is:
http://musicbrainz.org/ws/2/artist/cc197bad-dc9c-440d-a5b5-d52ba2e14234?&fmt=json&inc=url-rels+release-groups.
The JSON response contains – among other things – the 25 earliest album titles by the artist/band.
This information is in the release-groups array.
The start of this array, including its first object, is:

…
  "release-groups": [
    {
      "id": "1dc4c347-a1db-32aa-b14f-bc9cc507b843",
      "secondary-type-ids": [],
      "first-release-date": "2000-07-10",
      "primary-type-id": "f529b476-6e62-324f-b0aa-1f3e33d313fc",
      "disambiguation": "",
      "secondary-types": [],
      "title": "Parachutes",
      "primary-type": "Album"
    },
…

This JSON snippet shows that the first album by Coldplay is Parachutes.
It also gives an id, in this case 1dc4c347-a1db-32aa-b14f-bc9cc507b843,
which is a unique identifier of the album.

This identifier can be used to make a lookup in the Cover Art Archive API :
http://coverartarchive.org/release-group/1dc4c347-a1db-32aa-b14f-bc9cc507b843. ²

For each album, the JSON response contains some images, one of which is the front cover of the album.
The first few lines of the response to the above request are:

{
  "images": [
    {
      "approved": true,
      "back": false,
      "comment": "",
      "edit": 22132705,
      "front": true,
      "id": 4086974851,
      "image": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851.jpg",
      "thumbnails": {
        "250": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-250.jpg",
        "500": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-500.jpg",
        "1200": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-1200.jpg",
        "large": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-500.jpg",
= = >   "small": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-250.jpg"
    },
…

Of interest here is the line
"small": "http://coverartarchive.org/release/435fc965-9121-461e-b8da-d9b505c9dc9b/4086974851-250.jpg".
That URL is a direct link to the front cover of the Parachutes album.

The code to create and visualize the API

The overall task is to use Postman to visualize all the album titles and front covers of a music band.
How to write code that achieves this has already been described in quite some detail in an answer to
How can I visualize an API mashup in Postman?
– Therefore, I will avoid lengthy discussions here and just present the code and a screenshot of the result:

const lock = setTimeout(() => {}, 43210);
const albumsArray = [];
const urlsArray = [];
const urlOuter = 'https://musicbrainz.org/ws/2/artist/' +
  pm.collectionVariables.get('MBID') + '?fmt=json&inc=url-rels+release-groups';
pm.sendRequest(urlOuter, (_, responseO) => {
  const bandName = responseO.json().name;
  const albums = responseO.json()['release-groups'];
  for (const item of albums) {
    albumsArray.push(item.title);
    urlsArray.push('https://coverartarchive.org/release-group/' + item.id);
  }
  albumsArray.length = urlsArray.length = 15;
  const images = [];
  let countDown = urlsArray.length;
  urlsArray.forEach((url, index) => {
    asynchronousCall(url, imageURL => {
      images[index] = imageURL;
      if (--countDown === 0) { // Callback for ALL starts on next line.
        clearTimeout(lock); // Unlock the timeout.
        const albumTitles = albumsArray.map(value => ({ title: value }));
        const albumImages = images.map(value => ({ image: value }));
        const albumsAndImages = albumTitles.map(
          (item, i) => Object.assign({}, item, albumImages[i]));
        const template = `<table>
          <tr><th>` + bandName + `</th></tr>
          {{#each responseI}}
          <tr><td>{{title}}<br><img src="{{image}}"></td></tr>
          {{/each}}
        </table>`;
        pm.visualizer.set(template, { responseI: albumsAndImages });
      }
    });
  });
  function asynchronousCall (url, callback) {
    pm.sendRequest(url, (_, responseI) => {
      callback(responseI.json().images.find(obj => obj.front === true)
        .thumbnails.small); // Individual callback.
    });
  }
});

The result for Coldplay – and the documentation

How to download and run the Postman Collection

Running the Postman Collection should be straightforward.
Assuming you are using the desktop version of Postman, do as follows:

1. Download and save
   https://raw.githubusercontent.com/henk9/Henke/main/MusicBands.pm_coll.json
   in a suitable place on your hard drive.

2. In Postman, Ctrl + O > Upload Files > MusicBands.pm_coll.json > Import.
   You should now see MusicBands among your collections in Postman.

3. Collections > MusicBands > DummyRequest > Send. ³

4. In the Postman Response Body, click Visualize.

5. There should now be 15 albums if you scroll down – as indicated by the above screenshot.

The result for Kate Bush

The Postman collection includes detailed documentation on
how to perform the same request for a different artist/music band.
Here is what it looks like when using the MBID for Kate Bush.

References

• Documentation of the MusicBrainz API
• Documentation of the Cover Art Archive API
• How can I visualize an API mashup in Postman?
• The desktop version of Postman

---

¹ This post relies heavily on How can I visualize a mashup API in Postman?.

² This URL is automatically redirected to: https://ia800503.us.archive.org/29/items/mbid-435fc965-9121-461e-b8da-d9b505c9dc9b/index.json.

³ If you get an error, Something went wrong while running your scripts, try hitting Send again.