[ANSWERED] How can I make certain fetch data appear after pressing a button. Using JavaScript and HTML

Question 1

Start from here,

for (let i = 1; i < 5; i++){
    oneUser(i);
}

While calling the api inside for loop, pass index as well,

Then do api call as like yours,

function oneUser(i) {
  fetch('https://randomuser.me/api/')
.then((response) => {
    return response.json();
})
.then((response) => {
    getPic(response, i);
})
  .catch(error => {
  console.error(error);
})
}

with one change that passing the received index to the getPic(i) function..

Then in getpic(), have the same code as like you did for picText, info, and moreData and append these to picDiv innerHTML..

  const picText = `<div> <img src="${response.results[0].picture.large}"/> `;

  const info = `${response.results[0].name.first}, ${response.results[0].name.last}  `;

  document.getElementById('picDiv').innerHTML += picText + info;

  const moreData = `<div id="moreData" style="display:none"> ${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;

  document.getElementById('picDiv').innerHTML += moreData;

Then create a button with unique id from received index i..

<button id=moreData${i}>More details</button>

Initially we are making the moreData section alone in display none like,

<div id="moreData" style="display:none">

and the complete function like,

function getPic(response, i){

  const picText = `<div> <img src="${response.results[0].picture.large}"/> `;

  const info = `${response.results[0].name.first}, ${response.results[0].name.last}  `;

  document.getElementById('picDiv').innerHTML += picText + info;

  const moreData = `<div id="moreData" style="display:none"> ${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;

  document.getElementById('picDiv').innerHTML += moreData;

  const button = `<button id=moreData${i}>More details</button> <br /><br />`;

  document.getElementById('picDiv').innerHTML += button;


  getMoreData();

}

At the end call getMoreData(), with same for loop you did first like,

function getMoreData(){
  for (let i = 1; i < 5; i++) {
    const elem = document.getElementById('moreData' + i);
    if(elem){
      elem.addEventListener('click', () => {
        document.getElementById('moreData' + i).previousSibling.style.display = "block"
        });
    }
}
}

In this above function we are making the moredata to be displayed once clicking on the more details button by adding unique eventlistener to each button..

Working Example

Question 2

I’ve pulled some data using an API and fetch. But I need some of the data to appear after pressing a button. I can get it to appear, but I’m having trouble making it appear with a button.

So I want the variable ‘moreData’ to be displayed on button click. I’ve thought about making another function, but then my fetch data is wonky, and such.
Here’s my JS.

window.onload = function() {
    oneUser()
}


const oneUser = () => {
fetch('https://randomuser.me/api/')
.then((response) => {
    return response.json();
})
.then((response) => {
    getPic(response);
})

}

for (let i = 1; i < 5; i++){
    oneUser();
}

const getPic = (response) => {
    // console.log(response.results.gender);
    let picText = `<div> <img src="${response.results[0].picture.large}"/> `;
    let info = `${response.results[0].name.first}, ${response.results[0].name.last}  `;
    let moreData = `${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;
    document.getElementById('picDiv').innerHTML += picText + info + moreData;

}

And my HTML

<body>

<div id="container">

    <div id="picDiv">
            <button id="buttonData" onclick="getPic()">More details</button>

    </div>

    <div id="dataDiv">


    </div>

I’ve had troubles in the past with buttons. Any help is appreciated.
Thanks

Bollate

[ANSWERED] How can I make certain fetch data appear after pressing a button. Using JavaScript and HTML

By

Solution 1 :

Problem :

Comments

Comment posted by StaleMartyr

Comment posted by StackSlave

Comment posted by hbrashid

Comment posted by hbrashid

Comment posted by codepen.io/Maniraj_Murugan/pen/QWbGLNE

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] html – select all elements within a parent class

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate