how to search one country by name from the REST countries api?
0
I need to use async await + fetch for REST countries API for 2 purposes:
1)Click on "show all countries" which draws all countries (which works!)
2)Click on "search by name" after the user had input and fetch that single country<-- this one I can't succeed...it's quite confusing because I MUST use jquery for everything than the requests. I'll paste my code and hope anyone can help me , I'm desperate!
$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>javascript jquery ajax async-await fetch-api
edited Nov 11 at 21:21
barbsan
2,14811122
asked Nov 11 at 21:05
Nitzan
1
add a comment |
0
I need to use async await + fetch for REST countries API for 2 purposes:
1)Click on "show all countries" which draws all countries (which works!)
2)Click on "search by name" after the user had input and fetch that single country<-- this one I can't succeed...it's quite confusing because I MUST use jquery for everything than the requests. I'll paste my code and hope anyone can help me , I'm desperate!
$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>javascript jquery ajax async-await fetch-api
edited Nov 11 at 21:21
barbsan
2,14811122
asked Nov 11 at 21:05
Nitzan
1
add a comment |
0
0
0
I need to use async await + fetch for REST countries API for 2 purposes:
1)Click on "show all countries" which draws all countries (which works!)
2)Click on "search by name" after the user had input and fetch that single country<-- this one I can't succeed...it's quite confusing because I MUST use jquery for everything than the requests. I'll paste my code and hope anyone can help me , I'm desperate!
$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>javascript jquery ajax async-await fetch-api
edited Nov 11 at 21:21
barbsan
2,14811122
asked Nov 11 at 21:05
Nitzan
1
I need to use async await + fetch for REST countries API for 2 purposes:
1)Click on "show all countries" which draws all countries (which works!)
2)Click on "search by name" after the user had input and fetch that single country<-- this one I can't succeed...it's quite confusing because I MUST use jquery for everything than the requests. I'll paste my code and hope anyone can help me , I'm desperate!
$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>$("button").click(function() {
$("#display").empty();
getCountries()
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(){
const response = await fetch(`https://restcountries.eu/rest/v2/name/`);
const responseData = await response.json();
return responseData;
}img {
width: 100%;
}
.img {
width: 30%;
}
.country-info {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>javascript jquery ajax async-await fetch-api
javascript jquery ajax async-await fetch-api
edited Nov 11 at 21:21
barbsan
2,14811122
asked Nov 11 at 21:05
Nitzan
1
edited Nov 11 at 21:21
barbsan
2,14811122
asked Nov 11 at 21:05
Nitzan
1
edited Nov 11 at 21:21
barbsan
2,14811122
edited Nov 11 at 21:21
barbsan
2,14811122
edited Nov 11 at 21:21
barbsan
2,14811122
2,14811122
asked Nov 11 at 21:05
Nitzan
1
asked Nov 11 at 21:05
Nitzan
1
asked Nov 11 at 21:05
Nitzan
1
1
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Here you go...
The issue here is unlike your first get request this requires some input from the user -> hence the form... You have to capture their input on submit and append it to the searchURL -> so if they enter Spain your final url ends up as https://restcountries.eu/rest/v2/name/Spain etc etc...
Basically, you need to research how to handle form submission... You can try and dissect and understand the code I've provided below...
At the moment it's just console.loging not returning and appending the data to the DOM but it should be good enough to get you going in the right direction...
const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:42
SakoBu
963317
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
add a comment |
0
$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:59
Jaisa Ram
21137
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253234%2fhow-to-search-one-country-by-name-from-the-rest-countries-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here you go...
The issue here is unlike your first get request this requires some input from the user -> hence the form... You have to capture their input on submit and append it to the searchURL -> so if they enter Spain your final url ends up as https://restcountries.eu/rest/v2/name/Spain etc etc...
Basically, you need to research how to handle form submission... You can try and dissect and understand the code I've provided below...
At the moment it's just console.loging not returning and appending the data to the DOM but it should be good enough to get you going in the right direction...
const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:42
SakoBu
963317
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
add a comment |
0
Here you go...
The issue here is unlike your first get request this requires some input from the user -> hence the form... You have to capture their input on submit and append it to the searchURL -> so if they enter Spain your final url ends up as https://restcountries.eu/rest/v2/name/Spain etc etc...
Basically, you need to research how to handle form submission... You can try and dissect and understand the code I've provided below...
At the moment it's just console.loging not returning and appending the data to the DOM but it should be good enough to get you going in the right direction...
const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:42
SakoBu
963317
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
add a comment |
0
0
0
Here you go...
The issue here is unlike your first get request this requires some input from the user -> hence the form... You have to capture their input on submit and append it to the searchURL -> so if they enter Spain your final url ends up as https://restcountries.eu/rest/v2/name/Spain etc etc...
Basically, you need to research how to handle form submission... You can try and dissect and understand the code I've provided below...
At the moment it's just console.loging not returning and appending the data to the DOM but it should be good enough to get you going in the right direction...
const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:42
SakoBu
963317
Here you go...
The issue here is unlike your first get request this requires some input from the user -> hence the form... You have to capture their input on submit and append it to the searchURL -> so if they enter Spain your final url ends up as https://restcountries.eu/rest/v2/name/Spain etc etc...
Basically, you need to research how to handle form submission... You can try and dissect and understand the code I've provided below...
At the moment it's just console.loging not returning and appending the data to the DOM but it should be good enough to get you going in the right direction...
const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>const searchURL = 'https://restcountries.eu/rest/v2/name/';
async function getCountryName(name) {
const url = searchURL + name;
const response = await fetch(url);
const responseData = await response.json();
console.log(responseData);
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
const searchTerm = $('#js-search-term').val();
getCountryName(searchTerm);
});
}
$(watchForm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-muted text-center">Countries of the World</h1>
<div class="container">
<form id="js-form">
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="search-term" id="js-search-term" /> <br />
<input
class="form-control"
type="submit"
id="search"
value="Search by Name"
/>
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:42
SakoBu
963317
edited Nov 11 at 21:50
answered Nov 11 at 21:42
SakoBu
963317
answered Nov 11 at 21:42
SakoBu
963317
answered Nov 11 at 21:42
SakoBu
963317
963317
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
add a comment |
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
thanks for your reply , I know what I need to do theoretically , but I don't know how to catch the value and make the input country drawn , meaning to build the method to search one country to work with jquery ,i'm new to this library , hoped for continuous code...tx anyway, hope someone can help me .
– Nitzan
Nov 11 at 23:48
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
The code I provided does exactly what you're asking for... It just console.logs the data... All you need to do now is instead of clonsole.loging the data return it and append it to the DOM like you did for the first one...
– SakoBu
Nov 11 at 23:55
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
Hey ! The code is great , now it is working! there's a bug although , when searching for one country and doing a new search , it keeps adding countries to the screen , how do I delete the previous search so each time there will be only 1 country displaying ? Thanks in advance.
– Nitzan
Nov 12 at 13:14
add a comment |
0
$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:59
Jaisa Ram
21137
add a comment |
0
$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:59
Jaisa Ram
21137
add a comment |
0
0
0
$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:59
Jaisa Ram
21137
$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>$("form").submit(function(e) {
e.preventDefault();
$("#display").empty();
let name = e.currentTarget.name.value;
if(!name){
alert("Enter name");
return;
}
getCountryName(name)
.then(result =>{
result.forEach(element => {
var card = $('<div>', {class: "card"}).appendTo('#display');
var country = $('<div>', {class: "country-info"}).appendTo(card);
var img = $('<div>', {class: "img"}).appendTo(country);
$('<img>', {src: element.flag}).appendTo(img);
var text = $('<div>', {class: "right-text"}).appendTo(country);
$('<p>', {text: "Name: " + element.name}).appendTo(text);
$('<p>', {text: "Top Level Domain: " + element.topLevelDomain}).appendTo(text);
$('<p>', {text: "Capital: " + element.capital}).appendTo(text);
$('<h4>', {text: 'Currencies:'}).appendTo(text);
element.currencies.forEach(element =>{
var currencies = $('<div>', {
class: "currencies"
}).appendTo(text);
$('<span>', {text: element.code + " "}).appendTo(currencies);
})
});
})
.catch(err =>console.log(err));
});
async function getCountries(){
const response = await fetch(`https://restcountries.eu/rest/v2/all`);
const responseData = await response.json();
return responseData;
}
async function getCountryName(name){
const response = await fetch(`https://restcountries.eu/rest/v2/name/${name}`);
const responseData = await response.json();
debugger
return responseData;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<h1 class="text-muted text-center"> Countries of the World</h1>
<div class="container">
<form>
<div class="form-group col-xs-12">
<label for="name">Enter country</label>
<input class="form-control" type="search" name="name">
<br/>
<input class="form-control" type="submit" id="search" value="Search by Name">
</div>
</form>
<button id="show" class="btn btn-success form-control">Show All</button>
<div id="display" class="col-xs-12"></div>
</div>answered Nov 11 at 21:59
Jaisa Ram
21137
answered Nov 11 at 21:59
Jaisa Ram
21137
answered Nov 11 at 21:59
Jaisa Ram
21137
answered Nov 11 at 21:59
Jaisa Ram
21137
21137
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253234%2fhow-to-search-one-country-by-name-from-the-rest-countries-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
