Free coding lesson learn AJAX connect to the GitHub API – Plus bonus FREE ebook for the next 3 days. JSON and AJAX with JavaScript for beginners: Learn how to use JSON data within your web applications
coding #github #API #javascript #amazon #data #webdev #webdevelopment #webdeveloper #webapplication #htmlcss #htmlcode #dom #webpages
Just released – New book on Amazon Kindle about JSON and AJAX with JavaScript and its FREE on Amazon for the next 3 days only. Coding examples and more.
The below content is an exert from one of the exercises contained in the just released – New book on Amazon Kindle about JSON and AJAX with JavaScript get it FREE on Amazon for the next 3 days only. Coding examples and more. https://www.amazon.com/dp/B09RQM3FWX *If you are not in the US you can search amazon for the Book title, its free worldwide for 3 days. “JSON and AJAX with JavaScript for beginners: Learn how to use JSON data within your web applications”
AJAX to GitHub API for JSON data
AJAX endpoint connection for practice exploring the GitHub open API and get JSON data.
There are several open APIs endpoints that can be used to connect and retrieve data from. Testing these can be an excellent source for practice when connecting to large data JSON files. The navigation and selection of data that is deep within several levels of objects and arrays can be done piece by piece. Output the objects and arrays, then select the properties and values that you want to use in your code.
Connecting to external APIs that are open is not suggested for web development on live sites. These tend to change endpoints and once you build your connection your web page will be dependent on the connection access. There are many APIs that can be connected to the have authentication. For server side coding the API endpoints can be rendered by any backend code. The backend code would be outputting the JSON data and creating the dynamic outputs. Many endpoints are based on data coming from databases, the database connections and outputs are coded with the backend code. The server code will also control header access, so if you encounter an error this is one of the possible reasons.
Within the document object you can also create page elements as objects, this is an alternative to using the static innerHTML and then creating the elements with the HTML code. document.createElement(‘button’) will create a button, which can then be updated. Since this is already an object, properties like the event listeners can be added to it. Once the element is created it needs to be added to the web page, to a parent element. This can be done with append() or prepend().
Exercise : Connect and output data from a large complex JSON data response
- Select the page elements as variables within your JavaScript code
- Add a click event then connect to the endpoint https://api.github.com/zen and return the text content outputting it into the web page.
- On the second button connect to the endpoint https://api.github.com/ and output the object key and values. Create links to the URLs from the JSON data.
- Use JavaScript to create a new page element button. document.createElement(‘button’);
- Add an event listener to the new button. Click of the button should invoke a function that connects to https://api.github.com/search/repositories?q=javascript then create a separate function to handle the output of the content into the webpage.
- In the outputItems function get the array of data items. Loop through the data.items and build the HTML content, get the name, url, description and topics from the items and output them on the page.
- Update the URL that is requested, with the value from the input field. This should change the number of items that are returned and output to the page.
Watch the solution on YouTubehttps://www.linkedin.com/embeds/publishingEmbed.html?articleId=8954926056503592443
Source Code below
HTML
<!doctype html>
<html>
<head>
<title>JavaScript JSON AJAX</title>
</head>
<body>
<div>
<div class=”output”></div>
<input type=”number” value=”5″ min=0 max=10>
<button class=”btn”>Click Me</button>
<button class=”btn1″>Clear</button>
</div>
<script src=”apps11.js”></script>
</body>
</html>
JAVASCRIPT
const btn = document.querySelector(‘.btn’);
const btn1 = document.querySelector(‘.btn1’);
const btn2 = document.createElement(‘button’);
const myInput = document.querySelector(‘input’);
btn2.textContent = “load search results”;
document.body.prepend(btn2);
const output = document.querySelector(‘.output’);
btn.textContent = ‘Get Zen Quote’;
btn1.textContent = ‘Endpoints’;
const url = ‘https://api.github.com/zen’;
const url1 = ‘https://api.github.com/’;
const url2 = ‘https://api.github.com/search/repositories?q=javascript’;
btn.onclick = () => {
fetch(url)
.then(res => res.text())
.then(zen => {
console.log(zen);
output.innerHTML = `<h1>${zen}</h1>`;
})
}
btn1.onclick = () => {
fetch(url1)
.then(res => res.json())
.then(data => {
console.log(data);
let html = ‘<ul>’;
for (const [key, value] of Object.entries(data)) {
console.log(key, value);
html += `<li><a href=”${value}” target=”_blank”>${key}</a></li>`;
}
html += `</ul>`;
output.innerHTML = html;
})
}
btn2.onclick = () => {
const val = myInput.value;
const main = `${url2}&per_page=${val}`;
fetch(main)
.then(res => res.json())
.then(data => {
output.innerHTML = `<div>Search for ${val} results total:${data.total_count}</div>`;
outputItems(data.items);
})
}
function outputItems(data) {
let html = ”;
data.forEach(el => {
html += `<div style=”border:1px solid #ddd”>`;
html += `<div>${el.name}</div>`;
html += `<div>${el.url}</div>`;
html += `<div>${el.description}</div>`;
html += `<div>`;
el.topics.forEach(topic => {
html += `<span>${topic}</span> | `;
})
html += `</div></div>`;
})
output.innerHTML += html;
}
More free resources to learn JavaScript code.
I’ve added new YouTube videos for learning more about JavaScript Math Method
HTML CSS JavaScript Support Groups with coding tips and resources