Git is a distributed version control system DVCS designed for efficient source code management, suitable for both small and large projects. It allows multiple developers to work on a project simultaneously without overwriting changes, supporting collaborative work, continuous integration, and deployment. This Git and GitHub tutorial is designed for beginners to learn fundamentals and advanced concepts, including branching, pushing, merging conflicts, and essential Git commands. Prerequisites include familiarity with the command line interface CLI, a text editor, and basic programming concepts. Git was developed by Linus Torvalds for Linux kernel development and tracks changes, manages versions, and enables collaboration among developers. It provides a complete backup of project history in a repository. GitHub is a hosting service for Git repositories, facilitating project access, collaboration, and version control. The tutorial covers topics such as Git installation, repository creation, Git Bash usage, managing branches, resolving conflicts, and working with platforms like Bitbucket and GitHub. The text is a comprehensive guide to using Git and GitHub, covering a wide range of topics. It includes instructions on working directories, using submodules, writing good commit messages, deleting local repositories, and understanding Git workflows like Git Flow versus GitHub Flow. There are sections on packfiles, garbage collection, and the differences between concepts like HEAD, working tree, and index. Installation instructions for Git across various platforms Ubuntu, macOS, Windows, Raspberry Pi, Termux, etc. are provided, along with credential setup. The guide explains essential Git commands, their usage, and advanced topics like debugging, merging, rebasing, patch operations, hooks, subtree, filtering commit history, and handling merge conflicts. It also covers managing branches, syncing forks, searching errors, and differences between various Git operations e.g., push origin vs. push origin master, merging vs. rebasing. The text provides a comprehensive guide on using Git and GitHub. It covers creating repositories, adding code of conduct, forking and cloning projects, and adding various media files to a repository. The text explains how to push projects, handle authentication issues, solve common Git problems, and manage repositories. It discusses using different IDEs like VSCode, Android Studio, and PyCharm, for Git operations, including creating branches and pull requests. Additionally, it details deploying applications to platforms like Heroku and Firebase, publishing static websites on GitHub Pages, and collaborating on GitHub. Other topics include the use of Git with R and Eclipse, configuring OAuth apps, generating personal access tokens, and setting up GitLab repositories. The text covers various topics related to Git, GitHub, and other version control systems Key Pointers Git is a distributed version control system DVCS for source code management. Supports collaboration, continuous integration, and deployment. Suitable for both small and large projects. Developed by Linus Torvalds for Linux kernel development. Tracks changes, manages versions, and provides complete project history. GitHub is a hosting service for Git repositories. Tutorial covers Git and GitHub fundamentals and advanced concepts. Includes instructions on installation, repository creation, and Git Bash usage. Explains managing branches, resolving conflicts, and using platforms like Bitbucket and GitHub. Covers working directories, submodules, commit messages, and Git workflows. Details packfiles, garbage collection, and Git concepts HEAD, working tree, index. Provides Git installation instructions for various platforms. Explains essential Git commands and advanced topics debugging, merging, rebasing. Covers branch management, syncing forks, and differences between Git operations. Discusses using different IDEs for Git operations and deploying applications. Details using Git with R, Eclipse, and setting up GitLab repositories. Explains CI/CD processes and using GitHub Actions. Covers internal workings of Git and its decentralized model. Highlights differences between Git version control system and GitHub hosting platform.
In this tutorials, we will learn how the Fetch API can be used to get data from an API. I will be taking a fake API which will contain employee details as an example and from that API. I will show to get data by fetch() API method.
JavaScript fetch() method: The fetch() method is modern and versatile and is very well-supported among modern browsers. It can send network requests to the server and load new information whenever it’s needed, without reloading the browser.
Syntax: The fetch() method only has one mandatory argument, which is the URL of the resource you wish to fetch.
let response = fetch(api_url, [other params])
JavaScript Async Await: In this example, we will be using the Async Await method with the fetch() method to make promises in a more concise way. Async functions are supported in all modern browsers.
Syntax:
async function funcName(url){
const response = await fetch(url);
var data = await response.json();
}Prerequisite: Here, you will need an API for performing fetch() operation to get data from that API. You can also create an API or can take free mock APIs.
Here the API I used is: This API contains employee details in the form of key : value pair.
https://employeedetails.free.beeceptor.com/my/api/path
Approach:
- First make the necessary JavaScript file, HTML file and CSS file. Then store the API URL in a variable (here api_url).
- Define a async function (here getapi()) and pass api_url in that function.
- Define a constant response and store the fetched data by await fetch() method.D
- efine a constant data and store the data in JSON form by await response.json() method.
- Now we got the data from API by fetch() method in data variable.
- Pass this data variable to function which will show the data fetched.
Function show takes the data variable and by applying for loop on data.list and getting all the rows to show, it stores all the data to tab variable which set the innerHTML property for the class employees in HTML file. I have also added a loader which loads till response comes.
JavaScript file:
// api url
const api_url =
"https://employeedetails.free.beeceptor.com/my/api/path";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);
// Function to hide the loader
function hideloader() {
document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
let tab =
`<tr>
<th>Name</th>
<th>Office</th>
<th>Position</th>
<th>Salary</th>
</tr>`;
// Loop to access all rows
for (let r of data.list) {
tab += `<tr>
<td>${r.name} </td>
<td>${r.office}</td>
<td>${r.position}</td>
<td>${r.salary}</td>
</tr>`;
}
// Setting innerHTML as tab variable
document.getElementById("employees").innerHTML = tab;
}
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>How to Use the JavaScript Fetch API to Get Data?</title>
</head>
<body>
<!-- Here a loader is created which
loads till response comes -->
<div class="d-flex justify-content-center">
<div class="spinner-border"
role="status" id="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
<h1>Registered Employees</h1>
<!-- table for showing data -->
<table id="employees"></table>
</body>
</html>
Output:
In the console, data in JSON will look like this.
HTML Output :
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
