Как найти одну страну по имени из API стран REST?

Question

Мне нужно использовать async await + fetch для API стран REST для 2 целей:

1) Нажмите «показать все страны», на котором будут отображены все страны (которые работают!)

2) Нажмите «поиск по имени» после того, как пользователь ввел и извлечет эту единственную страну <- эту я не могу добиться успеха ... это довольно странно, потому что я ДОЛЖЕН использовать jquery для всего, кроме запросов. Я вставлю свой код и надеюсь, что кто-нибудь может мне помочь, я в отчаянии! </p>

$("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>

Answer 1

$("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>

Answer 2

Вот, пожалуйста ...

Проблема здесь не похожа на ваш первый запрос на получение, это требует некоторого ввода от пользователя -> отсюда и формы ... Вы должны захватить их ввод при отправке и добавить его в searchURL -> так что, если они въедут в Испанию, ваш финал URL заканчивается как https://restcountries.eu/rest/v2/name/Spain и т. д. и т. д. *

По сути, вам нужно изучить, как обрабатывать отправку форм ... Вы можете попробовать и разобрать и понять код, который я предоставил ниже ...

На данный момент это просто console.loging, который не возвращает и не добавляет данные в DOM, но этого должно быть достаточно, чтобы вы двигались в правильном направлении ...

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>