I have done a lot of coding/programming training on and off again throughout the years (even got a degree years ago) so a lot of the programming has come fairly naturally up to this point. The Quote Machine was much easier than expected because there was an effective way to accomplish the goals of the project with what I already knew. However, the API/JSON/etc area is relatively new to me and I can’t seem to wrap my head around it, even after reading a lot of the forum topics and looking at some external resources. It’s frustrating to feel like I had a lot of momentum finally and to run into this type of wall. After years of failure due to the wrong strategies (mistakenly thinking degrees/certifications/etc would cause an employer to hire and train me) I now realize that building things to create my own experience is the best strategy and feel with these types of projects I’m on the right track. Just feeling a lot of frustration and disappointment with this new development and trying to figure out a way to overcome it. I think I might just need a break or to build something else on my own that doesn’t involve this API stuff until I can make some sense of it. I suppose it isn’t necessary to put all my eggs in one basket.
An API (Application Programming Interface) is just a fancy-schmancy way of saying it’s another website with it’s own www.domain.com name. But instead of spitting out a webpage with text and cat or dog pictures back at you, it spits out a boring, plain text arranged in a certain format. This text format is called JSON (Javascript Object Notation). Basically, if you use this JSON text format in your Javascript program, it basically/becomes an Object. And as an Object, it’s basically a container for lots of different data. It’s then up to your Javascript program to consume this Object and extract whatever different pieces of information you want from it.
So if your program talked to a Weather API, this website then will spit back at you weather-related information in it’s response Object. Within this Object may be additional data like temperature, humidity, forecast, wind direction, etc.
I always run into a brick wall with all this CORS (Cross-Origin-Resource-Sharing) stuff. I think that APIs are cool, but annoying at the same time.
JSON is starting to make a little more sense to me. Very similar to a Javascript Object. What is puzzling me is what exactly to use in a getJSON request to get info from the API. Not sure if it’s a url, secret code, etc. For the weather app, there appears to be a need to sign up and access some type of code. Is that code what goes inside the getJSON request? It would help if FCC or other sources had some real life examples of it being used with actual APIs.
This is the point where you refer to the documentation of the API. Each API service will be different depending on how it’s creators designed it.
Watching this made it click for me a few days ago. I LOVE metaphors so the author using the waiter metaphor was perfect for me: https://youtu.be/s7wmiS2mSXY
As for what you need to do - try to get in the habit of googling for answers and/or reading documentation: http://api.jquery.com/jquery.getjson/
The page above explains to you how the jQuery.getJSON method works. You just have to read and try to understand it and even if you don’t, just start writing the code and play with it to see how it works.
I don’t quite get why there’s 2 bars (I’m new myself to looking at the jQuery documentation), but you can see the parameters that the method is expecting, noted in parethesis, in the same order in which you’ll need to call them. This method has one required (url) and two parameters that are optional [, data][, success], noted by the square brackets.
Based on this, you can see that you minimally need to pass a url to the getJSON method. The API you are calling will require certain information from you that you will pass as parameters appended to the url. Some of which (may need) a key that you will need to register for. If we pull up this weather API:
http://openweathermap.org/current
If you scroll thru the page above, you can read the documentation on how to use their API which if I just copy one of the example strings which you would pass as the URL parameter to the getJSON method is:
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
Just a heads up that the above will need a key and passed as the appid parameter. Also if you’re new to this, you need to replace the {curly braces} with the lat/lon values.
Another thing to get in the habit of when you are developing, is keeping the console open so you can see when error messages are popping up. I don’t know how many hours I have wasted over the years that could have been saved had I looked at the error messages that were being produced. Including the few days ago that I got started on this part of the course.
Hope this makes sense and helps! I feel a bit cross-eyed from writing it so hopefully it reads better 
What I’ve been trying to figure out is a way to just get the information from the API and display it so I see that I’m at least retrieving the information. Does each API create its own unique syntax for this, or is there a basic method that can be used universally?
you can do that, just make a get request and in the callback function log the response to the console
This is what showed up in the console:
Object {cod: “200”, message: 0.0036, cnt: 39, list: Array(39), city: Object}city: Objectcnt: 39cod: "200"list: Array(39)message: 0.0036__proto__: Object
Same for me. This wall stopped me on my tracks. Frustrating really. But I just let it sink in and now I understand better. I got really confused with the callbacks. But I think I finally will get this just by using it as best as I can.
Sometimes you understand something in order to do it. And sometimes you need to do it in order to understand it.
For me was very helpful to watch other people code and explain. Like Beu’s tutorials or Brad Traversy or many others. But also and mainly just writing it as the documentation says (MDN) was very helpful…
That looks right, kind of. It seems like you did receive a response. If you use you chrome developer tool’s console, you can probably toggle open the array or the object to see which information is in them.
Usually, you can figure how to access what in the response from the API documentations. JSON format mean you can usually use dot notation or brackets to retrieve what you want.
Use the Developer Tool “Network” tab, and click on the Response tab. Copy everything (it will be all on a single line), and paste that JSON text into this website.
This will do 2 things… validate if the JSON is correct format, and 2nd, format it for you so you can clearly see what the different elements, or objects buried within the objects there are in the JSON.
Thanks everybody. It is finally starting to make sense! I took a break from it, jumped ahead and finished a couple of the intermediate algorithm challenges to regain my confidence, and when I came back to do some experimentation with API stuff it finally started making sense. I have been experimenting on Notepad++ and already have my local temperature and fahrenheit/celsius conversions working. (This was my first experience with Kelvin temperatures). Feels good when it finally starts coming together!
Edit: Now getting the temp and fahrenheit/celsius in Codepen as well!
loved to suggest all in one json tool.
Use this tool to validate and format JSON, As well you can make request to your server by their cool feature “Make Request” : Online JSON Editor https://onlinejsoneditor.com
You can just type the URL that you would use in the getJSON request into your browser’s address bar.
My method:
The ‘harder’ part is just properly ‘grabbing’ the JSON data. Once you’ve done that, and it ‘works’, first thing is to spill it to a console.log to see what you are looking at. From there the ‘world is your oyster’-- You can totally parse through all the JSON level’s visually, and if you have to drop a level for an element, just add a ‘.’