Подскажите как забрать массив данных с сервера, профильтровать их и оставить только те элементы, у которых цена ниже 5

Question

async function getResponse() {
  let response = await fetch(
    "https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline"
  );
  let content = await response.json();
  content = content.splice(0, 3);
  let list = document.querySelector(".posts");
  let key;
  for (key in content) {
    list.innerHTML += `
    <li>
    <h3> ${content[key].name}</h3>
    <p> ${content[key].price}</p>
    </li>
      `;
    console.log(content[key].name);
  }
}

getResponse();

[
{
"id": 796,
"brand": "oriflame",
"name": "Oriflame Face Studio Master Hi-Light Light Booster Bronzer",
"price": "14.99"}, {"id": 495,
"brand": "maybelline",
"name": "Maybelline Face Studio Master Hi-Light Light Booster Bronzer",
"price": "3.99"}]

Answer 1

Пока особо токсичные пользователи не забанили, быстро отвечу на твой вопрос. Фильтрация массива происходит функцией Array.proptotype.filter, обход массива функцией Array.prototype.forEach. Что-бы не делать for (let key in content) let value = content[key] в ES6 есть аналог. for (let value of content)

Особо раздражает в твоём коде - то что ты неправильно называешь переменные/функции и.т.д. getResponse - ответ чего?, научись правильно описывать переменные и функции. Код в первую очередь должен быть читаем как книжка.
list.innerHTML += вообще забудь об этой штуке! Это просто как танком проехаться по DOM дереву, используй или классический createElement или попробуй свои силы в React. В самом плачевном случае используй jQuery - за JQ конечно бьют палкой но обычно не больно.

Рабочий пример: https://codepen.io/latdev/pen/yLoqpPx

const url = "https://makeup-api.herokuapp.com/api/v1/products.json?brand=";
const posts = document.querySelector("#app .posts");

/** Create request for `makeup-api.herokuapp.com` products, and append `.posts`
 * @param string brand which brand to search?
 * @returns void
 */
async function requestMakeupData(brand) {
  if (typeof(brand) !== "string") throw new Error("argument `brand` must be an string");
  let response = await fetch(url + brand);
  let products = await response.json();
  products
    .filter(product => parseFloat(product.price) < 5)
    .forEach(product => {
      let node = document.createElement("li");
      let nodeHeader = document.createElement("h3");
        nodeHeader.innerText = product.name;
        node.append(nodeHeader);
      let nodeText = document.createElement("p");
        nodeText.innerText = product.price;
        node.append(nodeText);
      posts.append(node);
    })
}

requestMakeupData("maybelline");

БЛОГ НА HUSL

Подскажите как забрать массив данных с сервера, профильтровать их и оставить только те элементы, у которых цена ниже 5

Ответы (1 шт):