cannot display fetched data in my javascript file

Question

I have a json file and i fetched the data. However I cannot display it on the screen. How can I display ? I get the data results in the console however I cannot reach the parametres like product name, price.

My code is below

index.html

<body>
    <div id="products"></div>
    <script src="/index.js"></script>
</body>

index.js

fetch("./data.json")
.then(response => {
   return response.json();
})
.then(data => console.log(data));


showProducts = products => {
    const showProductsDiv = document.querySelector("#products");
    products.map(product => {
      const productElement = document.createElement("p");
      productElement.innerText = `product Name: ${product.name}`;
      showProductsDiv.append(productElement);
    });
  }

I also share console results

Did you mean to say .then(showProducts) instead of sending it ONLY to the console? — Tim Roberts
– Tim Roberts, Commented Apr 7, 2021 at 21:33
@TimRoberts I did not quite understand the question but I fetched my json file and I can reach all the data in my console as in the pictures. However I want to display for example products' name , prices etc on browser. I want to show them in the div tag. How can I make this ? My code does not display — Ayse8888
– Ayse8888, Commented Apr 7, 2021 at 21:37
Did you not wrote this code? It looks like the showProducts function is all set to create a <div> from the JSON results, but you aren't passing the JSON results to that function. Instead, you're just dumping them to the console and you're done. So, instead of dumping to the console, pass the results to that function . That's what my comment said. — Tim Roberts
– Tim Roberts, Commented Apr 7, 2021 at 21:44
@TimRoberts so should I write .then(showProducts) instead of .then(data => console.log(data)); ? When I do this, data results disappear from the console. fetch is not working :/ — Ayse8888
– Ayse8888, Commented Apr 7, 2021 at 21:56
OI course it disappears from the console, but it will appear in your <div> Printing to the console is a debug technique. Once you've seen it work, you don't need to see it any more. — Tim Roberts
– Tim Roberts, Commented Apr 7, 2021 at 22:04

Lew Winczynski · Accepted Answer · 2021-04-08 08:30:17Z

2

You need to use your showProducts function. Here is a sample code that will work for you too, but please, bear in mind, that I have used an example api. It's a bit different to yours that is why I have results array and name.first.

const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(data => {
  return showProducts(data)
})

showProducts = products => {
  const showProductsDiv = document.querySelector("#products");
  products.results.map(product => {
  const productElement = document.createElement("p");
  productElement.innerText = `product Name: ${product.name.first}`;
  showProductsDiv.append(productElement);
 });
}

edited Apr 8, 2021 at 8:30

Lew Winczynski

1,2391 gold badge12 silver badges20 bronze badges

answered Apr 7, 2021 at 22:01

nesmeyana

2061 gold badge2 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cannot display fetched data in my javascript file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related