Bonjour,
 
Voilà, après maintes réflexions, moults tests, et myriades de recherches, je serre.
 
Je suis actuellement en formation Javascript avec Openclassrooms. Le problème est que je dois récupérer en format JSON des datas avec une requête HTTP, ce grâce à fetch(). Jusque ici, à moins que je me plante quelque part, pas de problème. Ensuite je veux donc gentiment faire intervenir ma boucle for pour aller choper les données des éléments du tableau afin de les incorporer dans le DOM, mais là que ça bugue. Aucun effet de la boucle lorsque je teste, sur la console j'ai l'apparition undefined. Donc je requiers de l'aide. Je précise que je ne désire pas avoir la solution du problème, simplement une indication de ce qui peut clocher dans ma logique ou dans ma syntaxe.  
 
Voici mon code :
 
const url = ' http://localhost:3000/...'
 
const products = fetch(url)
  .then(function(resolve) {
    if (resolve.ok) {
      return resolve.json();
    }
  })
  .catch(function(error) {
    alert = 'HTTP Error ' + error.status
  });
 
for (let i in products){
        let prod = products[i]
} console.log(prod)
 
N.B. : le console.log, portée des variables ou non, si je le mets à l'intérieur de la boucle, même résultat, avec fonction, le même problème.

Parce que tu n'a pas compris comment le await/async pattern marche.
 
A la ligne "for let i in product" tu n'as pas encore recu la reponse que tu demandes a la ligne "if resolve ok" en gros.
 
Donc retour a la case départ, il faut que tu comprennes le systeme de callback et le pattern async/await qui en découle quasi directement.

Ah ouais c'était marqué dans les cours. Ça marche, merci.

J'ai fait ça, mais je ne pense pas que ce soit efficient, toujours le même console.log undefined, et rien qui ne se modifie sur le DOM.
 
const url = 'http://localhost:3000/...'
 
const products = fetch(url)
  .then(function (resolve){
      return resolve.json()
  }).then(function(data){
      return data = []
  }).catch(function(error){
    alert = 'HTTP Error ' + error.status
  })
 
async function productsArray(product){
  for (let i in products) {
    product = products[i]
    let newElement = document.querySelector('#items')
    newElement.appendChild(product)
  }
}
 
async function resultProduct(resultProduct){
  await products
  await productsArray()
  return resultProduct
}
 
 
Encore une fois, je ne veux pas une réponse entière, mais juste des indications de mon erreur.

const url = 'http://localhost:3000/api/products'
 
const products = fetch(url)
  .then(function (resolve){
      return resolve.json()
  }).then(function(data){
      return data
  }).catch(function(error){
    alert = 'HTTP Error ' + error.status
  })
 
async function productsArray(product){
  for (let i in products) {
    product = products[i]
    let newElement = document.querySelector('#items')
    newElement.appendChild(product)
  }
}
 
async function resultProduct(resultProduct){
  await products
  await productsArray()
  return resultProduct
}
 
 
 
N.B. : le code est comme ça, pas le data = [], juste data. Un truc que j'avais testé

const url = 'http://localhost:3000/...'
 
const products = fetch(url)
  .then(function (resolve){
      return resolve.json()
  }).then(function(data){
      return data
  }).catch(function(error){
    alert = 'HTTP Error ' + error.status
  })
 
async function productsArray(product){
  await products
  for (let i in products) {
    product = products[i]
     
  }
}productsArray()
 
Ceci qui me semble peut-être plus juste. Mais bref, je vais pas inonder la page de code, j'attends que quelqu'un ait une indication ou pas.

 
Tout simplement

Je note, et vois ça. C'est vrai que c'est bien plus clair et moins prise de tête. Je me serais bien planté. Seul, je sais même pas si j'eus pu trouver un jour, ce qui m'énerve. Merci en tout cas.

Bon. J'ai essayé, essayé, encore, encore, ça ne fonctionne pas de quelconque manière. Mon fichier JS est bien lié à mon HTML, j'ai testé avec un innerHTML, nickel. Cependant, quand dans la console je teste mon code de récupération de données sur la page web de l'API, aucun problème (j'utilise Visual Studio Code et node server), mais si dans la console je teste le code depuis la page web de mon fichier HTML, ça me dit url introuvable. Je pense, peut-être à tort, mais que le problème vient de là.

Voilà ce que j'ai fait. Je préfère séparer mes fonctions, donc une pour la requête API, une pour les données ensuite recueillies que je gère avec ma boucle for. Aucun résultat attendu.  
 
const url = 'http://localhost:3000/...'
 
const requestApi = fetch(url)
  .then(function(resolve) {
      return resolve.json()
  }).then(function(data) {
      return data
  }).catch(function(error) {
    alert = 'HTTP Error ' + error.status
  })
 
async function productsArray(){
  await requestApi
  for (let product in requestApi) {
    let sofa = requestApi[product]
    let element = document.querySelector('#items')
    let newProduct = document.createElement('div').appendChild(sofa)
    element.appendChild(newProduct)
  }
}
 
productsArray()

Devil'sTiger t'as dit de passer par des async await mais il aurait du préciser de ne pas mélanger avec  les promesses (.then().catch()). Du coup tu t'es mis à faire un mix des 2 ce qui ne peut fonctionner correctement.
 
Si tu veux utiliser le async await (ce qui n'est pas une obligation):
 

 
 
 
Si tu veux utiliser les promesses:
 
 

Désolé pour le temps de réponse, juste pour remercier que j'écris ce message. Dans le projet, il était demandé de bien séparer les fonctions, alors je n'ai eu d'autres choix que d'utiliser async et await. J'ai fait ceci :  
 
////Récupération données API////
const url = 'http://localhost:3000/api/products'
let sofaData = [];
 
const request = async () => {
  await fetch(url)
  .then((resolve) => resolve.json())
  .then ((data) => {
    sofaData = data
  })
  .catch(function(error){
    alert('HTTP Error ' + error.status)
  })
}
 
////Fonction avec méthode pour implanter les données API dans le DOM////
const sofaList = async () => {
 
  await request()
   
    document.querySelector('#items').innerHTML = sofaData.map (
      (product) => `
 
    <a class="link-sofa" href="./product.html?id=${product._id}">
    <article>
        <img src="${product.imageUrl}" alt="${product.altTxt}">
        <h3 class="productName">${product.name}</h3>
        <p class="productDescription">${product.description}</p>
      </article>
    </a> `
    ).join("" )
}
 
sofaList()
 
Merci encore