0

I am new to javascript. I am looking for a way to retrieve the information from a local server running on Node:

*0
colors
0 "Tan" 1 "Chocolate" 2 "Black" 3 "White" _id "5be9c8541c9d440000665243" name "Norbert" price 2900 imageUrl "http://localhost:3000/images/teddy_1.jpg" description "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

1
colors
0 "Pale brown" 1 "Dark brown" 2 "White" _id "5beaa8bf1c9d440000a57d94" name "Arnold" price 3900 imageUrl "http://localhost:3000/images/teddy_2.jpg" description "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."*

I'm looking for a way to display them as HTML in a div. Here is my code for the moment, it does not display an error but I am unable to display the array elements ... Any ideas? Thanks for your suggestions!

const fetchPromise = fetch('http://localhost:3000/api/teddies');

const main = document.getElementById("clothes-box");

fetchPromise.then(response => {
  return response.json();
}).then(products => {
  main.appendChild = listOfNames(products);
})

function listOfNames(products) {
  const listHtml = document.createElement('ul')

  products.forEach(function(product) {
    const listItem = document.createElement('li');
    listItem.textContent = product.name
    listHtml.appendChild(listItem)
  })

  return listHtml
}
Andreas
  • 21,535
  • 7
  • 47
  • 56
Florent Guglielmetti
  • 1
  • Please add an example for `products` in a well-formatted way (e.g. the output of `console.log(JSON.stringify(products, null, 2))`) – Andreas Mar 18 '21 at 07:35
  • `main.appendChild = listOfNames(products)` - `.appendChild` is a method -> `main.appendChild(listOfNames)`, just like in the `.forEach()`: `listHtml.appendChild(listItem)` – Andreas Mar 18 '21 at 07:37
  • Hi, Andreas, here's what I get with console.log(JSON.stringify(products, null, 2)) [ { "colors": [ "Tan", "Chocolate", "Black", "White" ], "_id": "5be9c8541c9d440000665243", "name": "Norbert", "price": 2900, "imageUrl": "http://localhost:3000/images/teddy_1.jpg", "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor." }, ] – Florent Guglielmetti Mar 18 '21 at 07:56
  • Don't add relevant info in the comments. [Edit](https://stackoverflow.com/posts/66686544/edit) your question and replace _"0 colors ..."_ with the output (which in this case should be formatted as code). – Andreas Mar 18 '21 at 07:58
  • But nevertheless you just have to fix the typo mentioned in my second comment and it should work. – Andreas Mar 18 '21 at 07:58
  • See here: https://stackoverflow.com/questions/66596791/how-to-display-fetched-data-in-html/66597794#66597794 – AbsoluteBeginner Mar 18 '21 at 08:19
  • @AbsoluteBeginner What does this have to do with _"it does not display an error but I am unable to display the array elements"_? OPs script works when the typo got fixed. – Andreas Mar 18 '21 at 08:54
  • @Andreas I've just suggested an alternative (and, IMHO, better) way to fetch and display data. Without detracting anything from your correct comment. – AbsoluteBeginner Mar 18 '21 at 09:00
  • Thanks for your advices, it's fixed now. Sorry for not being clear, that was for first contribution to stackoverflow. Thanks a lot! – Florent Guglielmetti Mar 18 '21 at 09:09

0 Answers0