Mentor Léo: Week 1/Day 5: fetch job offers
Learn by doing, become a Hero developer
This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥ https://mentorleo.co
Day 5: Fetch job offers from github
So fast, we are already there ! Brace yourselves, this one is the hardest of the week but today we will plug what you’ve done in the days 1, 2, 3 & 4 with the real world of job offers :D
From our webpage, we will send a request to a github server that will send us the job offers data they have (the way we communicate with the github server is called an API).
We could use the API of stackoverflow but they send data that is harder to parse. I chose github as the default because it is easier.
You can try stackoverflow in exercise 5 if you are willing to ! Especially for this one, don’t hesitate to ask for help on the slack community ;)
- Use the result of this request (the array contained in the mock) to show job offers (understand: do no longer use the array you copy/pasted to do this)
- Time for real data ! Read their API documentation: https://jobs.github.com/api
- How their data is structured ? Do they use array(s), object(s), string(s) ?
- Extract the title of each item and print it in your page like you did before with the mock
- Enhance your job list ! Add more details than just the title for each job (location, company name, company logo, etc). Add style to your list to have something pretty ;)
Exercise 5 — for hardcore Léos
- Now use the stackoverflow jobs API which gives XML instead of JSON: https://stackoverflow.com/jobs/feed
- By default this will fetch all the data, you need to curate it yourself with the skills you want (HTML & CSS for example). Hint: you can skip the item if its categories don’t contain HTML or CSS, and keep only an array of objects that satisfy you !
Concepts to understand
- Ajax (XMLHttpRequest): send asynchronous requests to fetch data
- API: interface to use something (here an online service)
- Manipulate real data (arrays, objects, etc)
- ajax: https://www.w3schools.com/xml/ajax_intro.asp
Call to action
Join us ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥ https://mentorleo.co