1

Im still kinda new to Javascript. Right now I'm building a web application where I want to show items from a data.json file and search through those items.

I have a fetchItems() function where I fetch the data.json. After this I show the items in the index.html with the initItems() function.

The problem is that I want those 'items' from the fetch call available in the searchItems() function too. With these 'items' I plan to filter the items. Unfortunately I'm missing something which is why the console.log in searchItems.js gives back undefined.

I tried different things with async and await but couldn't get that to work either.

index.js

import { fetchItems } from "./src/js/fetchItems";
import { searchItems } from "./src/js/searchItems";

fetchItems();
searchItems();

fetchItems.js

export function fetchItems() {
    return fetch("./src/data/data.json")
        .then(response => response.json())
        .then(items => initItems(items));
}

function initItems(items) {
    for (let item of items) {
        let appItem = document.createElement("app-item");
        let appItems = document.getElementById("app-items");
        appItems.appendChild(appItem);

        appItem.setAttribute("name", item.name);
        appItem.setAttribute("description", item.description);
    }
}

searchItems.js

export function searchItems(items) {
    console.log(items);
}
Natascha Kater
  • 53
  • 5

2 Answers2

1

fetchItems is asynchronous, so trying to call search items right away will not work, because fetchItems will not have finished yet. Fortunately, fetchItems is returning a promise, so you're almost there. A promise is a representation of an eventual value. To get notified when that promise is done resolving, use it's .then method. For example:

fetchItems()
  .then(() => searchItems());

Async/await can make the syntax cleaner, but it's still using promise. To do the same thing using async await would look something like the following (The code needs to be in an async function, so i created one):

async function doStuff() {
  await fetchItems();
  searchItems();
}
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
1

I would do this :

index.js

import { fetchItems } from "./src/js/fetchItems";
import { searchItems } from "./src/js/searchItems";


async function fetchAndSearch() {
    const items = await fetchItems();
    searchItems(items);
}

fetchItems.js

async function fetchItems() {
    const response = await fetch("./src/data/data.json");
    const items = await response.json();

    initItems(items);

    return items;
}

If you begin with JavaScript, I think async/await syntax is the way to go.

David Alvarez
  • 1,226
  • 11
  • 23
  • First it seemed to work fine but a couple of minutes later I realised I want the `searchItems()` function to be called with an EventListener when clicking on a search button. My code would be something like: `searchButton.addEventListener("click", searchItems);`. Here I'm not calling the `searchItems` function yet, which is why I can't send 'items' with it. Any idea on how to solve this? – Natascha Kater Jun 16 '19 at 09:55
  • Then you will have to store the `items` object outside of the function so that your `searchItems()` function can access it later – David Alvarez Jun 16 '19 at 09:57