fetch is the best way to grab the data from API.
Check this article for best understanding
First then() response.json() is promise so we use with promiseResult as object that’s why we need another then().
The second then() response is object so we convert object into array and process that array into html.
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let myData = data;
})To mange exceptions we use this syntax.
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});My example code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>We fetch only Country list here</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
</head>
<body onload="getcountrycity();">
<div class="container">
<div class="row">
<div class="h2 text-primary">Country List API</div>
</div>
<div class="row">
<form action="1710.html" method="post">
<div class="form-group">
<label for="">Country</label>
<select class="form-control" name="countryname" id="countryid">
<option disabled selected>Select your country</option>
<!-- <option>India</option>
<option>United State</option> -->
</select>
</div>
<!-- <div class="form-group">
<label for="">State</label>
<select class="form-control" name="statename" id="stateid">
<option>Guj</option>
<option>Raj</option>
<option>Punjab</option>
</select>
</div> -->
</form>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function getcountrycity() {
// alert("Hello");
console.log("hello");
let url = "https://countriesnow.space/api/v0.1/countries/capital";
// fetch(url)
// .then((data) => console.log(data))
// .then((response) => console.log(response));
try {
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
// console.log(data.data);
let finalAry = Object.entries(data.data);
// console.log(finalAry);
finalAry.forEach((element) => {
// console.log(element[1].iso3);
console.log(element[1].iso3);
console.log(element[1].name);
let opt = document.createElement("option");
opt.value = element[1].iso3;
opt.innerHTML = element[1].name;
document.getElementById("countryid").appendChild(opt);
});
});
} catch (error) {
console.log(error.message);
}
}
</script>
</body>
</html>