我将如何创建一个 div 并将 JSON 中的“品牌”数据放入其中？

Question

目前，我正在尝试学习如何从 API 访问数据并将其放入我的 html 中的 div 中。我正在使用 fetch，但我不确定在对数据进行字符串化后该去哪里。我想从 API 访问“品牌”数据并将其放入我的 html 中。

fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
    .then(res => res.json())
    .then(
    (data) => {
        JSON.stringify(data)
    }

Answer 1

我推荐使用this tutorial 来学习 JavaScript fetch。

这是一个有效的 sn-p （虽然它不会在 SO 中工作）。

const url = 'http://makeup-api.herokuapp.com/api/v1/products.json';
fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let products = data;
    return products.map(function(product) {
      console.log(product.brand);
      //$("#listOfBrands").append(product.brand); // do as you will
    })
  })
  .catch(function(error) {
    console.log(error);
  });

<div id="listOfBrands"></div>