{"id":22358403,"url":"https://github.com/thedvlprs/ghibli-app","last_synced_at":"2025-03-26T13:43:45.094Z","repository":{"id":114653941,"uuid":"247473989","full_name":"thedvlprs/ghibli-app","owner":"thedvlprs","description":"Ghibli App ✨","archived":false,"fork":false,"pushed_at":"2020-03-15T13:41:36.000Z","size":1201,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T15:17:22.847Z","etag":null,"topics":["demo","dom","ghibli","javascript","json","studio-ghibli-api","vanilajs","xmlhttprequest"],"latest_commit_sha":null,"homepage":"https://striped-trees.surge.sh/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedvlprs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-03-15T13:40:58.000Z","updated_at":"2020-11-21T09:16:58.000Z","dependencies_parsed_at":"2024-02-08T05:35:08.297Z","dependency_job_id":null,"html_url":"https://github.com/thedvlprs/ghibli-app","commit_stats":null,"previous_names":["thedvlprs/ghibli-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fghibli-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fghibli-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fghibli-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fghibli-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedvlprs","download_url":"https://codeload.github.com/thedvlprs/ghibli-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245667554,"owners_count":20652982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","dom","ghibli","javascript","json","studio-ghibli-api","vanilajs","xmlhttprequest"],"created_at":"2024-12-04T15:14:44.440Z","updated_at":"2025-03-26T13:43:45.073Z","avatar_url":"https://github.com/thedvlprs.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# API with JavaScript | Ghibli App\nA plain JavaScript to connect to the API using HTTP requests\n\n## Demo\n\n![](demo.png)\n\n## Quick overview\n\n**API** stands for Application Program Interface, which can be defined as a set of methods of communication between various software components. In other words, an API allows software to communicate with another software.\n\nWe'll be focusing specifically on Web APIs, which allow a web server to interact with third-party software. In this case, the web server is using HTTP requests to communicate to a publicly available URL endpoint containing JSON data. If this is confusing now, it will make sense by the end of the article.\n\nYou may be familiar with the concept of a `CRUD` app, which stands for `Create, Read, Update, Delete`. Any programming language can be used to make a CRUD app with various methods. A web API uses HTTP requests that correspond to the CRUD verbs.\n\n\n\n| Action  | HTTP Method   | Description                  |\n| --------|:-------------:| ----------------------------:|\n| **Create**  | `POST`        | Creates a new resource       |\n| **Read**    | `GET`         | Retrieves a resource         |\n| **Update**  | `PUT`/`PATCH` | Updates an existing resource |\n| **Delete**  | `DELETE`      | Deletes a resource           |\n\n\n\n\u003e If you've heard REST and RESTful APIs, that is simply referring to a set of standards that conform to a specific architectural style. Most web apps do, or aim to conform to REST standards. Overall, there are a lot of terms, acronyms and concepts to understand - HTTP, API, REST - so it's normal to feel confused and frustrated, especially when API documentation assumes you already know what to do.\n\n\n## Connecting to the API\n\nLet's take a look at the [Studio Ghibli API documentation](https://ghibliapi.herokuapp.com/). This API was created to help developers learn how to interact with resources using HTTP requests. Since an API can be accessed by many different methods - JavaScript, PHP, Ruby, Python and so on - the documentation for most APIs doesn't tend to give specific instructions for how to connect.\n\n\n## Retrieving the data with an HTTP request\n\nBefore we try to put anything on the front end of the website, let's open a connection the API. We'll do so using `XMLHttpRequest` objects, which is a way to open files and make an HTTP request.\n\nWe'll create a `request` variable and assign a new `XMLHttpRequest` object to it. Then we'll open a new connection with the `open()` method - in the arguments we'll specify the type of request as `GET` as well as the URL of the API endpoint. The request completes and we can access the data inside the `onload` function. When we're done, we'll send the request.\n\n```javascript\n// Create a request variable and assign a new XMLHttpRequest object to it.\nvar request = new XMLHttpRequest()\n\n// Open a new connection, using the GET request on the URL endpoint\nrequest.open('GET', 'https://ghibliapi.herokuapp.com/films', true)\n\nrequest.onload = function() {\n  // Begin accessing JSON data here\n}\n\n// Send request\nrequest.send()\n```\n\n## Working with the JSON response\n\nNow we've received a response from our HTTP request, and we can work with it. However, the response is in JSON, and we need to convert that `JSON` in to `JavaScript` objects in order to work with it.\n\nWe're going to use `JSON.parse()` to parse the response, and create a data variable that contains all the `JSON` as an array of `JavaScript objects`. Using `forEach()`, we'll console log out the title of each film to ensure it's working properly.\n\n```javascript\n// Begin accessing JSON data here\nvar data = JSON.parse(this.response)\n\ndata.forEach(movie =\u003e {\n  // Log each movie's title\n  console.log(movie.title)\n})\n```\nUsing Inspect on index.html and viewing the console, you should see the titles of 20 Ghibli films. **Success!**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fghibli-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedvlprs%2Fghibli-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fghibli-app/lists"}