displaying data from fetch method

Question

I'm trying to get the value of what the user types in a search input , I then want to pass this variable into my endpoint and return the data

                <input type="text" class="search" placeholder="planet">



            <script>

            const media = 'image';

            const searchInput = document.querySelector('.search');
            searchInput.addEventListener('change', searchData);


            //get value of what is typed into search input.
            function searchData() {
                let search = this.value;
                const  finalData = getData(search);
            }


            // pass the search variable into the endpoint in getData function.
            function getData() {
            const endpoint = `https://images-api.nasa.gov/search?q=${search}&media_type=${media}`;
            console.log(endpoint);

            const  result = [];

            fetch(endpoint)
              .then(blob => blob.json())
              .then(data => result.push(...data.collection.items));
            }

I'm not sure if im doing this correct or if there is an alternative better way i'm still new to JavaScript. Thank you.

no i've not learnt that properly yet , i'm trying to get better at vanilla js first — Oliver Sewell
– Oliver Sewell, Commented Sep 28, 2017 at 18:03
Possible duplicate of How to return value from an asynchronous callback function? — Mikey
– Mikey, Commented Sep 28, 2017 at 18:46

CheapSteaks · Accepted Answer · 2017-09-28 18:59:04Z

Here you go

<input type="text" class="search" placeholder="planet">
<div class="output"></div>

<script>
  const media = 'image';
  const searchInput = document.querySelector('.search');
  const output = document.querySelector('.output')

  searchInput.addEventListener('change', searchData);

  //get value of what is typed into search input.
  async function searchData() {
    let search = this.value;
    const finalData = await getData(search);
    render(finalData);
  }

  function render(data) {
    output.innerHTML = JSON.stringify(data)
  }


  // pass the search variable into the endpoint in getData function.
  function getData(search) {
    const endpoint = `https://images-api.nasa.gov/search?q=${search}&media_type=${media}`;

    return fetch(endpoint)
      .then(blob => blob.json())
      .then(data => data.collection.items);
  }
</script>

fiddle here https://jsfiddle.net/xyhk49wy/

You can modify the render function so it does something else instead of showing stringified JSON

Collectives™ on Stack Overflow

displaying data from fetch method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related