Do you always need JSON/AJAX/API and how to learn it

Hi

In browsing the forums it seems I am not the only one puzzled with the learning of JSON/AJAX API concepts. AT FCC that section was only about copy/pasting or retyping as told, no explanation on how things work, I dont know if it was on purpose, and I hope the rest of the classes are not like that. The previous classes were awesome and I used what I learned on the challenges.

To my two questions:

Do you always need JSON/AJAX/API
Before FCC I always assumed that API was a thing you used to connect to external systems only, like facebook API or Pinterest API, Trello API, etc. But looking at some projects, and collaborating on a project for a non-profit, it seems all software web development using stored data will use JSON/AJAX and have an API even to connect internally, even to read data you collect. Is that right?

How to learn it?
I love FCC and I am very grateful to have found it, but it is not the place to learn JSON/AJAX/API.
I am a visual/kinetic learner, so if you send me to pure text I’ll want to stab my eyeballs…Videos, interactive tutorials is what I am looking for

I am listening and working this one and it’s really helping me, do you have other resources?
Especially with real examples, JSON syntax is intuitive to me but I am having trouble visualizing how to use it in real life

Thank you FCC tribe!

JSON, AJAX, and APIs are three different, although related concepts. You don’t necessarily have to use any or all of them with every single project that you do, but they are really important, and you’ll want learn them.
JSON stands for Javascript Object Notation. It’s a certain kind of format you use to store data. A lot of the time, when you send or request data from a server, you do so in the JSON format.

AJAX is a form of request. You make AJAX requests to APIs, and receive data. Said data will either be in JSON or XML format.

APIs are application programming interfaces. I’m a bit puzzled by what you mean by APIs being used internally and externally.

I don’t really know any good video tutorials, but I suggest you try searching for ones that only deal with one of the three topics at a time.

Thank you

Let me try to ask differently.
If I have data stored in a database, say, MongoDB, and I want to retrieve that data and show in on my website, is there a way to do it without AJAX and having an API.

What I meant by external, is that in my past jobs (I was a BA not a Developer) I only heard mentioned APIs when we were receiving lists from another company, or sending JSON data to clients.

But now I see examples of data stored and retrieve with an API even within the same company. (internally)
my thought was: Why do we need to have an API if we are not sending or getting data unless we collect it via UI. You can see my level of confusion here…

Are you trying to retrieve the data from the client side?
If so, I’m not aware of any alternatives to APIs, but then again, I’m no expert.

I’m still unsure about your second question. Whom do you collect data from? What do you mean you collect data via UI? What kind of UI?

Thank you for bearing with me
I am still learning their system, and the person who can teach me is out sick, so I am navigating solo
Ok, so , we have a website that asks for user information: name, email, spoken languages, etc. This is what I call the UI

I do know they store that into MongoDB (which i also have to learn) Do they need an API to retrieve that later to show that info in the user’s profile page?

I know they have a big API folder and references to JSON. Coincidentally I am also at that point with FCC, learning JSON. But it so happened that I have not learned any of this yet.

Maybe I am going backward about this, the only clear thing is that I need to learn JSON/AJAX/API combo. In which cases it is used like that, I dont understand that yet

this little webpage gets data from a database into the browser

<form action="https://example.com/getdata">
  <button type=submit>Get Data</button>
</form>

If you list out everything that happens when the form is submitted all the way to the server and back to the browser you will begin to appreciate the need for ajax for the kind of webpages and apps being made

1 Like

Ah, I see now.
The client types his or her info in the UI. The UI then sends that info to the company’s API, which stores it in MongoDB. The API is just a layer to access the database, you see. That way you don’t have to have direct access to the database in order to store things in it, or retrieve things from it.
So if the customer wants to see their profile data, they send a request to the API, which gets the desired data from the database, and sends it back to the customer.

1 Like

@Radiance7008
This is a very basic break down, which you most likely already know.

  1. Databases store data, in your scenario MongoDB.
  2. APIs acts as middleware exposing access to the database for retrieving and sending data.
  3. AJAX is a process used to call APIs.
  4. JSON/XML is the structure of the data that is being sent and received.
1 Like

Awesome!

Now I need good resources to learn to use JSON/AJAX/API combo, for my volunteer work and also to resolve the Intermediate Front End Development Projects here at FCC…

I find JSON to be an easy concept, is the AJAX/API, DOM part that I have never been exposed to.

I mention DOM because I’m starting to suspect that plays a role in all this too…

The DOM can play a role, as it can change based on the JSON received from and AJAX request.

You could have a look at Mozilla’s explanation of AJAX:

Although I have to note, there are other, better ways to make an AJAX request.

such as …? :slight_smile:

Like fetch, or the axios library.
You read more about fetch and other relevant topics here:
https://developer.mozilla.org/en-US/docs/AJAX

actually XMLHTTPRequest and ajax are pretty much synonymous - fetch is a modern version of XMLHTTPRequest - any other older api is bound to be just a wrapper around XMLHTTPRequest

I finished that video tutorial I linked above
So many components, the author recommends checking on http://handlebarsjs.com/
Part of me is happy there is an easier way, although this tutorial was not that painful, a part of me goes, yet ANOTHER thing to learn!!!

I think I am adding http://handlebarsjs.com/ to my maybe later list…

Good observation, thanks, that makes sense

Good question, I agree the instructions leave a bit to be desired. I struggled to understand this a lot last year when I was progressing beyond basic HTML.


JSON is a way to store data using key value pairs. In JavaScript you can store data in objects like this:

var person = {
  firstName: "John",
  lastName: "Doe"
}

JSON (JavaScript Object Notation, aptly named) allows you to store data the exact same way but in a file, such as person.json. Since JSON is a type of text formatting, not JavaScript, it can be used with other programming languages and applications.


AJAX is a way of interacting with a web server from a web browser. AJAX is not required to communicate with a web server, but it is often the best way. It stands for Asynchronous JavaScript and XML. Before AJAX existed, the normal way to serve a webpage, was for the web server to get data from a database, render the HTML file on the server (using PHP), and then send the file to the web browser. When ever a user wanted to get data or send data to the server, such as by submitting a form, the server would have to re-render an entirely new page and re-send it to the browser, which would then automatically refresh. This obviously is not usually the best way, and when JavaScript came along, there needed to be a way to get data from the server asynchronously, or not waiting for the server to render a new page, send it, and refresh the page. AJAX lets the JavaScript on the web browser request data asynchronously from the web server, which then after the server retrieves the data, it will respond to the web client with either JSON or XML (an alternative text format to JSON, not used much anymore). Because this is asynchronous, it does not refresh the page, and the JavaScript can do whatever it wants once it gets the data using an approach such as a callback or promise.


An API is a tool for a client to get data from a server. Like AJAX, it is not required in making a functional website, but it often is easier. It should be clear the application of an API when asking for data from someone else’s project, but let’s take a look at using them internally. There are several types of patterns for building web servers. Two of the most common are the “monolithic architecture” and it’s opposite the “microservice architecture”. In monolithic architecture, which you may be more familiar with, there is one large server and one or possibly a few more large databases. When a web browser requests data, the web server gets data from the database, renders an HTML file, and sends the rendered file to the web browser. No api is needed in this basic context. In the microservice realm, there are usually several servers and databases that each perform a specific task. These servers are api’s because their job is to get data and send it to the browser. They aren’t concerned with rendering pages, etc. It is up to the browser to do what it wants with that data.

The patterns, idea, and principals can get extremely confusing. Monolithic is an older approach where usually one server does it all. Microservices are a newer approach with the Unix mindset that small is beautiful. Make one application to do one job very well. Example, for a note taking application. You have one API to handle user authentication. You have another API to actually get the posts and send them to the browser. SPA’s (single page applications) are also popular. The program consists of one page (duh) and gets the data it needs from API’s. React is a technology used a lot of times to build SPA’s. A cool thing about React is that it can do client and server side rendering. In monolithic architecture the server renders the page, while in a SPA the web client gets the data through an api and renders the page itself. React is cool in that it combines them, so that when the page is requested the server renders it, and then the page can render itself asyncronously using an API (in other words, it doesn’t have to refresh because it is using AJAX). I can’t go into depth about which to use, as I am still learning myself, just realize that when people are using API’s within their own project, they are most likely adopting microserivce architecutre, or building a SPA.


Hopefully that helps, it is definitly a complex and detailed part about programming. I suggest learning Node, as it is very easy to both build an api, or to build a server that renders the data directly to the page without using an api. Actually playing with it will help you understand a lot more than me ranting about what it is! :smiley:

4 Likes

Awesome explanation, I thank you. I could take your words, add a few visuals and make a great intro to JSON/API/AJAX in a video, I might do that one day, and donate to FCC in case they want to use it. You totally understood my external/internal dilemma, (which possibly dates myself).

Then you answer how to learn, where Node is your recommendation, a “thing” a do plan to learn anyway.
As happens with most creatives I enjoy the front end much better, but I need to know enough backend to get by. I want to be a front end expert with medium knowledge of backend.

Can I learn angular before I learn node?

This topic has become a bit of bogey one for me. Yes it is not well explained in FCC.