Fetch randomuser API results

Question

It's my first time using the fetch API and I've got myself stuck here. Basically, I structured my code around one of the snippets from this answer . I'd like to use the results from one request and populate them into various fields in a form but my current setup seems to be running the request for each field. Here's what I have:

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);
}

I just can't figure out how to do one request and then drop that response as an object into a new variable. Then I could just easily do something like document.getElementById("c_phone").value = newVariable.results[0].cell; .

Here's the whole thing in context in a CodePen .

Answer 1

seems to be running the request for each field

Because you're calling fetchUsers() three times, and that function performs that AJAX request.

Just call the function once and use the resulting data for the three elements you want to populate:

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;
});

There's no rule stating that you can only perform a single operation in the .then() callback. What you're passing to that callback is a function, and that function can contain as much code as you like.

Answer 2

You can use Destructuring assignment to get easy user attributes.

 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>