An API endpoint is the URL used to request for a particular data or resource. Visit https://leetcode.com/problemset/all/, you’ll find a table listing problems. As there are a large number of problems listed, it’s highly unlikely these are hardcoded to the HTML and rather fetched via an API call. Let’s find out the API endpoint that needs to be used to retrieve all the problems on this page. It can be done by checking the HTTP requests made when we load this webpage.

Chrome Developer Tools (DevTools) can help us see all the HTTP requests and responses made to load the webpage. One of the requests would be an API call to retrieve all the problems.

TODO -

• Visit www.google.com on your Chrome browser

• Right-click and select Inspect to open DevTools (or hit Ctrl + Shift + I if you prefer shortcuts)

• The Network tab lists the HTTP requests made. Goto the Network tab - Yes, by clicking on it! (See below screenshot)

• Only the HTTP requests made after opening the Network tab will be shown. Refresh the browser tab and you’ll see the Network tab get populated with the HTTP requests.

You can clear the existing requests displayed by clicking on the clear button (button on the right of the red circle).

Note: Ensure you don’t have the below fields selected

To fetch data from an API endpoint without refreshing the webpage, XMLHttpRequest (XHR) is used. It enables the webpage to update a part of it without disrupting the overall view for the user.

TODO -

• Visit https://leetcode.com/problemset/all/ with the DevTools open.

• Do you see the large number of HTTP requests being made?

• Filter the XHR requests (Click on "XHR" in one of the bars, as shown below)

You’ll now be able to see a quick overview of all the XHR requests made when the page was loaded. It can include the HTTP request method (eg: GET, POST), HTTP response status code (eg: 200) and the type of request which will be XHR, since we’ve filtered for it. Do any of the request names look like they were used to fetch all the problems?

TODO -

• Click on the all/ request on the left, to open up its details on the right. You’ll see the Headers section displayed on the panel that opened. This panel shows both the Request and the Response.

• Can you figure out the API endpoint used for this request?

The API endpoint (or the HTTP request URL) is https://leetcode.com/api/problems/all/. You’ll notice that this is different from the overall webpage URL - https://leetcode.com/problemset/all/. Try opening the API endpoint directly in your browser. Do you see a webpage?

The data returned in the response is in JSON format.

JavaScript Object Notation (JSON) is a commonly used format to transfer data between computers. JSON is a human readable format with key-value pairs.

Example:

{

    "symbol": "AAPL",

    "quantity": 100,

    "purchaseDate": "2019-01-02"

}

Here, we have three keys: symbol, quantity, purchaseDate and their corresponding values. The keys have to be a String whereas values come from a much wider pool of objects like String, Integer, Boolean, Array, or even another JSON nesting.

Let’s ensure this is the correct endpoint by checking the response.

TODO -

• Click Preview on top of the panel to view the API response, you’ll see the JSON response

• What do you think? Did we select the correct API call? (You can double-click on keys with values like an Array or a JSON nesting to expand it)

You’ll be able to see there are lines numbered for 0-1586. Each of these could be representing one question on leetcode.

TODO -

• Expand the keys to find the value for the 0th entry

• Can you find out if the question is available for only paid users?

• What is the question id for this problem and it’s title? What about the total number of submissions?

• The paid_only key is a boolean referring to the problem being accessible to a paid user or all users.

• frontend_question_id key is part of the value for the stat key. This can also be referred to as stat.frontend_question_id. It’s value gives the question id of the problem.

• stat.question_title gives the display title for the problem

• stat.total_submitted gives the total number of user submissions for this problem

TODO -

• Visit the API endpoint directly from a new tab to see the response key-value pairs in its actual form. (A Chrome extension like JSONView helps to pretty-print the JSON value)

• Do you have any ideas about how we could programmatically get the question attributes like id, title, total submissions etc., for each of the questions?

• You’ll see that the stat_status_pairs key has as its value, a list of JSON objects, one for each question. This list was wrapped in Developer Tools Preview to groups of 100 (0-99, 100-199) for ease of viewing.

• We can programmatically loop through this list to find the values for attributes like stat.question_title, stat.frontend_question_id.