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, Sep 28 '17 at 18:03
Possible duplicate of [How to return value from an asynchronous callback function?](https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — Mikey, Sep 28 '17 at 18:46

score 1 · Accepted Answer · answered Sep 28 '17 at 18:59

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

displaying data from fetch method

1 Answers1