API stands for Application Programming Interface. The link below will take you to the Wikipedia page, which explains very thoroughly what an API is. But for our purposes, here is an example. Let's say that myFitnessPal had never been created, and I (or you) would be the soon-to-be-very-rich genius to come up with the idea for this app. I would need nutritional data for every potential food item that can possibly be consumed. So using the USDA API, I can get data from USDA, such as nutrition facts, which I can then use in my own app, which could then hopefully make me a ton of money.
API
Click here for more in-depth information about APIs at Wikipedia
Intro to JS and JSON
JS (Javascript) is the language and JSON (Javascript Object Notation) is the format that we need to know to use the USDA API. This section assumes that you have basic knowledge of Javascript.
Click here for citations for the images on this website listed in the order that they appear
Example Code
The sample codes in this section use AJAX - Asynchronous Javascript and XML. This allows us to send a request asking USDA for information. To learn more about AJAX and the inner workings, click here for the MDN tutorial on AJAX.
In the code below, I am sending an asynchronous GET request using the USDA search API. I am searching for the terms "chocolate" and "milk", the number of results I want is no more than 25, and offset is 0 so I am only searching the first 25. If I want to search the next 25, I will set my offset value to 25. I am interested in getting the NDBNO number back, which I need to use on other API methods. I am storing my JSON object into the variable response, and in a loop, I am accessing and pushing the names and NDBNO numbers into empty arrays that I initialized in the beginning. Then I am looping through the arrays to print out the names and NDBNO numbers onto the webpage. Note that the variable for apikey says 'DEMO_KEY'. This should work, but you can replace that with your own API key.
Once you get the NDBNO number, you can use it to get more data using the API. The format is the same as the code above, but pay attention to the URL that is passed in the GET request. Now instead of passing search terms in the query field, it passes the NDBNO numbers. Now I can access the nutritional information, which will help me if I wanted to make a fitness app, for example. This example gets nutritional facts of the food "Abiyuch, raw". I have no idea what food this is, but I like the name.
Combining these two requests allows me to make a program that lets a user enter in the food they're searching for and prints out a list with items that match their query. Then when the user picks the exact food item, the program can get the NDBNO number and pass it into the second request, which will return the nutritional information associated with the food item.
Javascript
This section briefly goes over some Javascript code that you will need to know when working with the USDA API
We are going to go over arrays. The following code snippet first initializes an empty array in the variable myArray, then pushes the number 1, 2, 3 into the empty array. It then prints out the array, and then it prints out the number at index 1. To learn more about arrays, click here for the MDN tutorial on arrays.
To learn more about Javascript, click here for a link to a Javascript class on Codecademy. Click here for a link to the book Eloquent Javascript.
Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by Mathavan Jaya. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.
You can download the PSD template in this portfolio sample item at FreebiesXpress.com.
JSON
Javascript Object Notation
JSON is a file format that sends data objects in a way that we can also read it. The two main JSON methods we will be using with the USDA API is JSON.parse() and JSON.stringify(). The former takes a string and turns it into an object for a computer to read it, and the latter takes an object and turns it into a string so humans can read it. Find out more about JSON by clicking here. It is very important that you know how to deal with objects. The following code snippet demonstrates handling objects.
To give you a better idea of what's going on in the above code, here are some visual representations of each example.
It is important before proceeding to the next section that you understand this section. To learn more about working with objects, click here for the MDN tutorial on objects.
USDA API
The API Key
Get your API key here. It is under the section "Gaining Access". An API key allows you to make requests at a rate of up to 1,000 requests per hour.
The API Request
We will use this link as an example. This will take you to the USDA's Food Report API. You will see it has a section titled "Request Parameters". The query is key=value format, and the request parameter is the key. If you scroll to the bottom of the page, it has a section under "Some Examples" that is titled "JSON". The URL in bold is the format that we will use to send our request.Requesting information from the USDA API is sent using this format to query data. The query begins after the "?". According to the request parameters, only the ndbno number and the api key are necessary. The other queries are optional, like "type=b" which asks for a basic report, instead of full or stats, and "format=json", instead of xml. Notice in request parameters back at the top of the page, they provide default values for "type" and "format". So in the example URL under the example, "type=b" and "format=json" are not necessary, because the values that are passed are the default values anyway. The parameter, or key, ndbno, asks for a value that is the ID of the food. We will discuss this further in the next section when we go over the example code.
The API Response
Under the "Request Parameters" section of the Food Report API, you will find a section titled "Response Elements". This is a list of the information that will come back in the response. The type of response will be an object. If you sent the request through an html file, you can open it in a browser and press Ctrl+Shift+I to inspect the response. The type of response will be an object. It will look something like this:
The following image is of the object response that has been expanded. Notice the words surrounded in the green boxes. These are the nested properties of the object. The properties that are words can be handled as methods, and the ones that are numbers can be accessed as arrays. Let's say, for example, you want to access the name property that holds the value "Water". In Javascript, this value would be accessed by something like: console.log(ObjectNameHere.foods[0].food.nutrients[0].name). You can see this by following the words that are wrapped in green. Let's say that you want to access the type of measurement it uses and want the output of "cup". What would be the code for that? (see below the image for the answer).
