Git Product home page Git Product logo

adhoc-fetch's Introduction

Fetch

At Ad Hoc, our front-end applications often exchange JSON data with various RESTful APIs. We use modern JavaScript to interact with these APIs and to transform their responses into a format needed by the client application. In this homework, we provide a sample API with a single endpoint and ask you to write some JavaScript to request data from the API and transform the response.

Records API

You'll be provided with a /records API endpoint that returns a JSON array of items in the following format:

[
  {
    "id": 1,
    "color": "brown",
    "disposition": "closed"
  },
  {
    "id": 2,
    "color": "green",
    "disposition": "open"
  }
]

Each item returned from the /records endpoint will have the following:

  • id: A unique integer
  • color: One of "red", "brown", "blue", "yellow", or "green"
  • disposition: Either "open" or "closed"

The /records endpoint accepts the following options, sent as query string parameters on the request URL:

  • limit: The number of items to be returned
  • offset: The index of the first item to be returned
  • color[]: Which color to be included in the result set. May be included multiple times, once for each color. If omitted, all colors will be returned.

An example request URL might look like: /records?limit=2&offset=0&color[]=brown&color[]=green

Task

In api/managed-records.js, write a function named retrieve that requests data from the /records endpoint, transforms the result into the format outlined below, and returns a promise that resolves with the transformed object. In addition to retrieve, you may add as many helper functions as you wish.

  1. Get data from the /records endpoint using the Fetch API. Process pages of 10 items at a time. Note that the /records endpoint may return more than 10 items per request.

  2. The retrieve function accepts an options object and should support the following keys:

  • page - Specifies which page to retrieve from the /records endpoint. If omitted, fetch page 1.

  • colors - An array of colors to retrieve from the /records endpoint. If omitted, fetch all colors.

    As an example, to fetch the 2nd page of red and brown items from the API, retrieve might be called like this:

    retrieve({ page: 2, colors: ["red", "brown"] });
  1. You can assume standard HTTP status codes on the response. If a request is unsuccessful, output a simple error message via console.log() and recover.

  2. Upon a successful API response, transform the fetched payload into an object containing the following keys:

  • ids: An array containing the ids of all items returned from the request.
  • open: An array containing all of the items returned from the request that have a disposition value of "open". Add a fourth key to each item called isPrimary indicating whether or not the item contains a primary color (red, blue, or yellow).
  • closedPrimaryCount: The total number of items returned from the request that have a disposition value of "closed" and contain a primary color.
  • previousPage: The page number for the previous page of results, or null if this is the first page.
  • nextPage: The page number for the next page of results, or null if this is the last page.
  1. Return a promise from retrieve that resolves with the transformed data.

Additional requirements

  • Use the provided URI library to construct the request URL.
  • Write your solution using ES2015 or later. Any methods and syntax supported by Babel are fair game.
  • You must use the Fetch API to interact with the records endpoint.
  • Don't add any additional libraries or edit any files other than api/managed-records.js
  • We've provided a suite of unit tests. Your solution should pass all tests.
  • Please delete the node_modules directory before submitting your completed homework.

Setup

Requirements: NodeJS >= 14.0.0, and yarn >=1.22.0

yarn install to install.

yarn test to run the provided unit tests.

adhoc-fetch's People

Contributors

jocelo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.