如何创建 div 并将 JSON 中的 'brands' 数据放入其中？

Question

目前，我正在尝试学习如何从 API 访问数据并将其放入 div 到我的 html 中。我正在使用 fetch，但我不确定在对数据进行字符串化后该去哪里。我想从 API 访问 'Brands' 数据并将其放入我的 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获取。

这是一个有效的代码片段（尽管它在 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>

如何创建 div 并将 JSON 中的 'brands' 数据放入其中？

How would I create a div and place the 'brands' data from JSON into it?

javascript

api

json

fetch-api