Need help with JSON!

Need help with JSON!
0

#1

Hi all,

The FCC projects/challenges are pretty much my very first introduction to JavaScript, as a result you can consider me a beginner.

I finished the Random quote machine challenge (https://codepen.io/Mozar10/full/akQbVq/) a few days ago.

After having finished it, I looked at some of the other users’s code and except for a few inconsistencies, they all without question were using JSON to get their quote date (Which is obviously much more efficient than writing the quotes in an array like i did. lol.)

The lessons on JSON were very brief, and I cant seem to find a complete explanation of how this was done.

I would very much appreciate if someone can explain to me how this is done, and/or please send me a link to where I could get a fundamental understanding of what seems like a very important concept.

Thanks a lot.


#2

These links might help you start to understand JSON, APIs and how to use jQuery to work with them:

http://api.jquery.com/jquery.getjson/
http://www.w3schools.com/jquery/ajax_getjson.asp


#3

Thanks

Is there no way to do this with just JavaScript? or is that just not recommended?


#4

You can, but it is easier with jQuery. Everything that you can do with jQuery can be done in plain JavaScript, because jQuery is a library built with JavaScript :slight_smile:

https://developer.mozilla.org/en/docs/AJAX http://www.w3schools.com/xml/dom_httprequest.asp


#5

This should be a good introduction jQuery Ajax Tutorial.


#6

same thing here. JQuery make things easier at first… but you do not really understand what you are doing… at least I don´t. I whished that FCC did not use Bootstrap and JQuery until they had finished with Css and Javascript. There are huge gaps, and it is a pain to go back and find out what they did not tell you. :slight_smile:


#7

@fuecisla I agree with you, I refuse to write any jQuery until I have gotten a solid grasp on how and why things are happening in JavaScript, but that’s just me, I need to understand why!!

I did all the intermediate projects (except for the last one) with pure JavaScript API calls using XMLHttpRequest.

Here is an article that I found tremendously helpful. It teaches you how to use JSONP in JavaScript. You actually create a script element and point the src=“API URL” at the API url. Pretty clever. And then you define a global callback function (like jQuery) that does whatever you want to the data.

http://blog.garstasio.com/you-dont-need-jquery/ajax/


#8

Hi Mozar10,

How did you find the websites to get the json data? I think that what most people is doing in FCC is just finding a web with some kind of API which basically tells you "copy paste this in your code and you will have random quotes".

I am looking for a web source (a file) which I can connect to the raw data and then program by myself any functionality I want for my app. The truth is that I am not sure if I have not find the resources or if I haven´t programmed the XMLHttpRequest correctly. For example, there is this a data file with famous quotes in GitHub… I thought from what I read in CodePen that they would allow access to that kind of origin… the route is https://gist.githubusercontent.com/signed0/d70780518341e1396e11/raw/2a7f4af8d181a714f9d49105ed57fafb3f450960/quotes.json

I would much appreciate if you could tell me if you can access that json somehow.

Edit: I have read that Github in fact prevents this kind of access to avoid traffic abuse. Maybe you can come up with a source I can try anyhow. Edit: I did read that, but probably I understood incorrectly. I can get the json data from Github now.


#9

Hello Mozart10,

theoretical understanding is good but to really understand what is happening behind the lines of code I would recommend a couple of things:

  • introduce the debugging output into your code (sorry do not know the correct English equivalent) - this means you write here and there along your code document.write() reflecting the steps you code goes through and data.
  • use debugging environment, break points, view how data items dynamically change as a result of your code execution (like under Chrome Developer Tools).

I am not sure if this is too obvious or not. But I did not see this reco here and to my opinion it is a key point in understanding what your code does on top of just reading reference manuals etc.

Val


#10

yea chrome dev tools is awesome I use it alot to debug my code. Thanks for the tip.


#11

@ fuecisla I’m not sure if I understand your question. But the way that I get the JSON data is to make an API “GET” request with the XMLHttpRequest and that returns the JSON which I parse into an object. Then I can use it in my code.

The thing with your URL is that it is not in JSON format it is just some text so there is no way to get a specific part of it, or parse it into an object, as far as I can see. But you can still access it, you will just get all the quotes. This is how you can get it, just copy and paste this.

var request = new XMLHttpRequest();
request.open(“GET”,“https://gist.githubusercontent.com/signed0/d70780518341e1396e11/raw/2a7f4af8d181a714f9d49105ed57fafb3f450960/quotes.json”)
request.onload = function(){
document.write(request.responseText);
}

request.send()

I would recommend reading more about APIs and how exactly they work. Also ask some of the more advanced guys on Stack Overflow.


#12

Hi mozart,

Your reply was very useful. I was making a mistake (still do not know which), but from your example I went on and now most of my XMLHttpRequest do work. When I asked you how did you get your Json files I was refering the sites… how did you find the sites with quotes to download from, sorry for my English. I did find some places.

I will continue with the course although I will also dig much deeper into the subject because working with data is what I like the most. I look forward to learn about rest apis and backend/database programming.

Cheers

PS- I had a terrible, terrible time with the wikimedia api. I cannot think a bigger paradox than Wikipedia and its Api. Between knowledge and the lack of teaching/explaining skills. Their “explanation” looks more like an inventory for robots than anything else. PS-II (before anyone calls me a hater… I donate to support wikimedia on a regular basis :slight_smile:)


#13

Glad I could help. In terms of sites, you can try searching on Google for a specific API. I’m sure if you do a simple “Quote generator API” search in google, you will get a bunch of sites that you can “GET” the JSON from.

Yeah, APIs was/is a tricky concept for me too, and let me tell you that I’m not even close to a deep understanding of how it all works either. I haven’t even scratched the surface. There is a lot to learn man, its the exciting and scary part.

Keep at it !


#14

Hi,

Today I have been reading an ebook called “Eloquent Java Script”. I like books because they provide always a Table of Contents which lets me know where I am and where I am going. It is nice to have a location in the map of knowledge :slight_smile:.

I digress… if XMLHttpRequests and Apis (Rest or not) are scary… you should take a look at said ebook´s chapter on Modules. Oh my God… functions that wrap other functions that wrap objects that contain functions that have callbacks with arrays of arguments that are values to be exported… :scream::scream::scream::scream: In a few paragraphs you feel mentally disabled… at the end of it I was almost in tears…

So back to baby steps. I will work on the twitch challenge and forget about modules till I grow up!


#15

Haha, I hear you man. It can get overwhelming. Actually, today I finished the intermediate algorithm challenges, and I want to try that book, as I’m doing the advanced algorithms (trying to do the advanced ones!). :smile:


#16

I don´t think that that book is going to help you with algorithms… I might be wrong, though.