Получить результаты API randomuser

Я впервые использую API выборки, и я застрял здесь. По сути, я структурировал свой код вокруг одного из фрагментов из этого ответа. Я хотел бы использовать результаты одного запроса и заполнять их в различных полях формы, но моя текущая настройка, похоже, запускает запрос для каждого поля. Вот что у меня есть:

async function fetchUsers() {
  let response = await fetch("https://randomuser.me/api/?format=json");
    return response.json();
};

function getInfo() { 
  fetchUsers().then((data) => document.getElementById("c_fname").value = data.results[0].name.first);
  fetchUsers().then((data) => document.getElementById("c_lname").value = data.results[0].name.last);
  fetchUsers().then((data) => document.getElementById("c_phone").value = data.results[0].cell);
}

Я просто не могу понять, как сделать один запрос, а затем поместить этот ответ как объект в новую переменную. Тогда я мог бы легко сделать что-то вроде document.getElementById("c_phone").value = newVariable.results[0].cell;.

Вот всё в контексте в CodePen.

javascript fetch-api

10.10.2022 17:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

104

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

кажется, выполняется запрос для каждого поля

Потому что вы вызываете fetchUsers() три раза, и эта функция выполняет этот запрос AJAX.

Просто вызовите функцию один раз и используйте полученные данные для трех элементов, которые вы хотите заполнить:

fetchUsers().then((data) => {
  document.getElementById("c_fname").value = data.results[0].name.first;
  document.getElementById("c_lname").value = data.results[0].name.last;
  document.getElementById("c_phone").value = data.results[0].cell;
});

Нет правила, согласно которому вы можете выполнять только одну операцию в обратном вызове .then(). То, что вы передаете этому обратному вызову, является функцией, и эта функция может содержать столько кода, сколько вам нужно.

Это именно то, что мне нужно. Я уже пробовал это, но не думал использовать фигурную скобку, поэтому он продолжал терпеть неудачу. Огромное спасибо за решение моей утренней головной боли.

— 10.10.2022 18:19

10.10.2022 17:17

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

const fetchUsers = async() => {
  let response = await fetch('https://randomuser.me/api/?format=json');
  return response.json();
};

fetchUsers().then(({
  results
}) => {
  const [user] = results;
  document.getElementById('c_fname').value = user.name.first;
  document.getElementById('c_lname').value = user.name.last;
  document.getElementById('c_phone').value = user.cell;
});

body {
  background-color: #255E7B;
  color: #47DAC1;
}
.link-alike {
  cursor: pointer;
  text-decoration: underline;
  color: #F1D13D;
}
.link-alike:hover {
  color: #fbd422;
}

<form action = "/checkout_success" method = "post" id = "hidden_form">
  <input type = "hidden" name = "nonce" id = "nonce" />
  <h3>Payment Total</h3>
  <label for = "total">Total</label><br />
  <input type = "number" id = "total" name = "total" value = "1.00" onblur = "formValidation()" /><br />
  <h3>Customer Info</h3>

  <div class = "link-alike" id = "randomizer-link" onCLick = "getInfo()">
    Random info?
  </div>
  <br />

  <label for = "c_name">Name</label><br />
  <input type = "text" id = "c_fname" name = "c_fname" placeholder = "First" required size = "7" required />
  <input type = "text" id = "c_lname" name = "c_lname" placeholder = "Last" required size = "7" required /><br />
  <label for = "c_phone">Phone</label><br />
  <input type = "string" id = "c_phone" name = "c_phone" /><br />
  <label for = "c_street">Street Address</label><br />
  <input type = "text" id = "c_street" name = "c_street" required /><br />
  <label for = "c_street2">Address Line 2</label><br />
  <input type = "text" id = "c_street2" name = "c_street2" /><br />
  <label for = "c_city">City</label><br />
  <input type = "text" id = "c_city" name = "c_city" required /><br />
  <label for = "c_state">State/ Province</label><br />
  <input type = "text" id = "c_state" name = "c_state" required /><br />
  <label for = "c_country">Country</label><br /> [PLACEHOLDER]
</form>

10.10.2022 17:26

Другие вопросы по теме

Как использовать usecontext для получения API

Как использовать токен API POST для использования сторонних API в nextjs

Получение данных при загрузке Modal в Next.js

Как прочитать ответ 403 в JavaScript?

Как эффективно перевести функции выборки Javascript в Pyscript?

Прогресс загрузки Vimeo API

Клиент javascript не может в службе создания докеров не может получить из node.js API

Redux thunk fetch возвращает функцию вместо значения

React fetch API не вернет результат

Как я могу предотвратить перезапуск моих значений при получении почтового запроса?

Получить результаты API randomuser

Ответы 2

Другие вопросы по теме

Похожие вопросы