Exploring the Cooper Hewitt API using JavaScript

The Cooper Hewitt Smithsonian Design Museum has made its collection available through a public API. This provides a wealth of data about the objects in the collection, including information about the objects' creators, materials, and historical context.

In this guide, we'll walk through some examples of how to use the Cooper Hewitt API with JavaScript.

Authentication

Before we begin, we'll need to obtain an API key from the Cooper Hewitt API website. Once we have our API key, we can authenticate our requests to the API by including the key as a parameter in the URL of our request.

const apiKey = "YOUR_API_KEY";
const apiUrl = `https://api.collection.cooperhewitt.org/rest/?method=METHOD_NAME&access_token=${apiKey}`;

Making API Requests

To make a request to the Cooper Hewitt API, we'll need to construct a URL with the appropriate parameters. We'll also need to include any additional parameters required for the specific method we're using.

For example, if we want to retrieve information about a specific object in the Cooper Hewitt collection, we can use the 'cooperhewitt.objects.getObjects' method. We'll need to include the object ID as a parameter in the URL:

const objectID = 18729433;
const apiUrl = `https://api.collection.cooperhewitt.org/rest/?method=cooperhewitt.objects.getInfo&access_token=${apiKey}&id=${objectID}`;

Handling API Responses

Once we've made our API request, we'll receive a JSON response containing information about the requested object. We can use JavaScript's built-in fetch function to make the request and receive the response.

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    // Handle API response data
  });

We can then use the information in the API response to display information about the object on our website or in our application.

Example Code

Here's an example of how to retrieve information about a specific object in the Cooper Hewitt collection and display the object's title and image:

const objectID = 18729433;
const apiUrl = `https://api.collection.cooperhewitt.org/rest/?method=cooperhewitt.objects.getInfo&access_token=${apiKey}&id=${objectID}`;

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    const objectTitle = data.object.title;
    const objectImage = data.object.images[0].b.url;

    const titleElement = document.querySelector('#object-title');
    const imageElement = document.querySelector('#object-image');

    titleElement.textContent = objectTitle;
    imageElement.setAttribute('src', objectImage);
  });

This code retrieves information about the object with an ID of 18729433. It then extracts the object's title and the URL of its first image from the API response.

Finally, the code sets the text content of an HTML element with the ID 'object-title' to the object's title and sets the 'src' attribute of an HTML 'img' element with the ID 'object-image' to the URL of the object's image.

There are many other methods available in the Cooper Hewitt API that allow us to retrieve a wide variety of information about the objects in the collection. By experimenting with these methods and using JavaScript to interact with the API responses, we can create rich and engaging experiences for users of our applications or websites.