当数组没有重复时如何防止.createElement视图重复

【问题标题】：how to prevent .createElement view duplication when array doesn't have duplication当数组没有重复时如何防止.createElement视图重复
【发布时间】：2021-09-25 02:26:53
【问题描述】： 

let recipes = [];
let favouriteRecipes;
let ul = document.querySelector(".list-group");


const fetchRecipes = async function() {
  try {
    const res = await axios.get('https://api.spoonacular.com/recipes/complexSearch?apiKey=e7221d9e49e04040afd50e7b626e2f88&number=2');
    recipes.push(...res.data.results);
    createNewRecipe(recipes);
  } catch (error) {
    console.log(error);
  }
}

const createNewRecipe = function(recipes) {
  for (let recipe of recipes) {
    let li = document.createElement('li');
    li.textContent = recipe.title;
    li.id = recipe.id;
    li.className = "list-group-item";

    let img = document.createElement('img');
    img.src = recipe.image;
    img.className = "card-img-top";

    li.append(img);
    ul.append(li);

    let recipeId = document.getElementById(recipe.id).id;
    fetchIndividualRecipe(recipeId, li);
    addToFavourites(recipeId);
  }
}

const fetchIndividualRecipe = async function(recipeId, li) {
  try {
    let id = recipeId;
    const res = await axios.get(`https://api.spoonacular.com/recipes/${id}/information?apiKey=e7221d9e49e04040afd50e7b626e2f88&includeNutrition=true`)
    createRecipeDetails(res, li);
  } catch (error) {
    console.log(error);
  }
}

const createRecipeDetails = function(individualRecipeData, li) {
  let cookingTime = individualRecipeData.data.readyInMinutes;
  let calories;
  for (let nutrient of individualRecipeData.data.nutrition.nutrients) {
    if (nutrient.name === "Calories") {
      calories = nutrient.amount;
    }
  }
  let spanMinutes = document.createElement("span");
  let spanCalories = document.createElement("span");
  spanMinutes.className = "badge bg-secondary";
  spanCalories.className = "badge bg-secondary"
  spanMinutes.textContent = cookingTime + " minutes";
  spanCalories.textContent = calories + " calories";
  li.append(spanMinutes);
  li.append(spanCalories);
}

// Add to favourites
const addToFavourites = function(id) {
  document.getElementById(id).addEventListener('click', function() {
    let clickedId = parseInt(id);
    for (let recipe of recipes) {
      if (recipe.id === clickedId) {
        newFavRecipe = recipe;
        displayFavouriteRecipes(newFavRecipe)
      }
    }
  })
}

// Display favourites
const displayFavouriteRecipes = function(recipeReceived) {
  let newRecipe = recipeReceived;
  favouriteRecipes = JSON.parse(localStorage.getItem("favRecipes") || "[]");

  let foundRecipe = false;

  if (newRecipe) {
    for (let rec of favouriteRecipes) {
      if (rec.id.toString() === newRecipe.id.toString()) {
        foundRecipe = true;
      }
    }
    if (!foundRecipe) {
      favouriteRecipes.push(newRecipe);
    }
  }

  for (let favRec of favouriteRecipes) {
    if (foundRecipe !== true) {
      let h4 = document.createElement('h4');
      h4.innerHTML = favRec.title;
      document.body.append(h4);
    }
  }
  localStorage.setItem("favRecipes", JSON.stringify(favouriteRecipes));
}

fetchRecipes();
displayFavouriteRecipes();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Recipes Project V1</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="recipes-coding-project-v1.css" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container container-fluid">
      <a class="navbar-brand" href="#">
        <i class="bi bi-egg-fried"></i> Recipes
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">Recipe List</a>
          </li>
        </ul>
        <span class="navbar-text">
            Favourite Recipes
            <i class="bi bi-heart-fill empty-heart"></i>
          </span>
      </div>
    </div>
  </nav>

  <main class="container">
    <h1>Recipes</h1>
    <ul class="list-group list-group-flush"></ul>

    <h2>Favourite Recipes</h2>
    <ul class="list-group list-group-flush favourite-recipes-ul"></ul>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="recipes-coding-project-v1.js"></script>
</body>

</html>

目标：我只想在单击图片时添加一次 obj(recipe)，将其保存到 localStorage 中的数组中，并在视图中为我的 localStorage 数组中的每个食谱创建一个 h4。

问题：我的问题是，当我第一次创建新配方并将其显示在视图中时，它仅在视图中重复，但在本地存储中的数组中没有（按预期工作）。 但是，当我刷新时，视图完全反映了我的数组，而不是重复的。没有错误或任何东西，我更改了几次代码，但造成的损害更大，它重复了每个食谱。

我的 HTML：

<main class="container">
      <h1>Recipes</h1>
      <ul class="list-group list-group-flush"></ul>

      <h2>Favourite Recipes</h2>
      <ul class="list-group list-group-flush favourite-recipes-ul"></ul>
</main>

这是我的代码：

// Add to favourites
const addToFavourites = function (id) {
    document.getElementById(id).addEventListener('click', function() {
       let clickedId = parseInt(id);
       for (let recipe of recipes) { 
           if(recipe.id === clickedId) {
            newFavRecipe = recipe;
            displayFavouriteRecipes(newFavRecipe)
        }
      }
    })
}

// Display favourites
const displayFavouriteRecipes = function (recipeReceived) {
    let newRecipe = recipeReceived;
    favouriteRecipes = JSON.parse(localStorage.getItem("favRecipes") || "[]");
    
let foundRecipe = false;

if (newRecipe) {
    for (let rec of favouriteRecipes) {
        if (rec.id.toString() === newRecipe.id.toString()) {
            foundRecipe = true;
        }
    }
    if (!foundRecipe) {
        favouriteRecipes.push(newRecipe);
    }
}

for (let favRec of favouriteRecipes) {
    if (foundRecipe !== true) {
        let h4 = document.createElement('h4');
        h4.innerHTML = favRec.title;
        document.body.append(h4);
    }
}
localStorage.setItem("favRecipes", JSON.stringify(favouriteRecipes));
}

fetchRecipes();
displayFavouriteRecipes();

【问题讨论】：

  • 请提供 HTML 示例。
  • 感谢您的回复！完成，但是，我没有那么多 HTML，因为我在 js 中创建 h4。
  • 您好，您也可以使用 SO 代码 sn-ps meta.stackoverflow.com/a/356679/14032355
  • 为迟到的回复道歉，但我试过但它不起作用，我有这个错误“消息”：“未捕获的安全错误：无法从“窗口”读取“本地存储”属性：该文档已被沙盒化并且缺少 'allow-same-origin' 标志。", "filename": "stacksnippets.net/js", "lineno": 91, "colno": 35 }，但如果在这里有帮助，我在 stackblitz 上做到了：@987654323 @
  • 没关系，因为 SO 代码 sn-p 会阻止 localStorage，但是当您使用代码 sn-ps 时，人们可以轻松复制您的代码。

标签： javascript html dom createelement


【解决方案1】：

我重写了很多代码。我分离了从 API 获取数据的逻辑并创建元素。

它现在应该可以工作了。

const createNewRecipe = (recipes, indivRecipes) => {
  let ul = document.querySelector(".list-group");
  for (let i = 0; i < recipes.length; i++) {
    let li = document.createElement("li");
    li.textContent = recipes[i].title;
    li.id = recipes[i].id;
    li.setAttribute("title", recipes[i].title);
    li.className = "list-group-item";

    let img = document.createElement("img");
    img.src = recipes[i].image;
    img.className = "card-img-top";

    li.append(img);
    ul.append(li);
    createRecipeDetails(indivRecipes[i], li);
  }
};

const createRecipeDetails = function (individualRecipeData, li) {
  let cookingTime = individualRecipeData.data.readyInMinutes;
  let calories;
  for (let nutrient of individualRecipeData.data.nutrition.nutrients) {
    if (nutrient.name === "Calories") {
      calories = nutrient.amount;
    }
  }
  let spanMinutes = document.createElement("span");
  let spanCalories = document.createElement("span");
  spanMinutes.className = "badge bg-secondary";
  spanCalories.className = "badge bg-secondary";
  spanMinutes.textContent = cookingTime + " minutes";
  spanCalories.textContent = calories + " calories";
  li.append(spanMinutes);
  li.append(spanCalories);
};

//Click Event
document
  .querySelector("ul.list-group.list-group-flush")
  .addEventListener("click", addFavoriteRecipes);

function addFavoriteRecipes(event) {
  const li = event.target.closest("li");
  if (li) {
    const recipeId = li.id;
    const favoriteRecipes = JSON.parse(
      localStorage.getItem("favRecipes") || "[]"
    );

    const checkIndex = favoriteRecipes.findIndex(el => el.id === recipeId);
    if (checkIndex === -1) {
      const ul = document.querySelector("ul.favourite-recipes-ul");
      const h4 = document.createElement("h4");
      const title = li.getAttribute("title");
      h4.innerHTML = title;
      ul.append(h4);
      favoriteRecipes.push({ id: li.id, title: title });
      localStorage.setItem("favRecipes", JSON.stringify(favoriteRecipes));
    }
  }
}

const fetchIndivRecipe = async function (recipeId) {
  try {
    const res = await axios.get(
      `https://api.spoonacular.com/recipes/${recipeId}/information?apiKey=e7221d9e49e04040afd50e7b626e2f88&includeNutrition=true`
    );
    return res;
  } catch (error) {
    console.log(error);
    throw new Error(error);
  }
};

const fetchRecipes = async function () {
  try {
    const res = await axios.get(
      "https://api.spoonacular.com/recipes/complexSearch?apiKey=e7221d9e49e04040afd50e7b626e2f88&number=2"
    );
    // recipes.push(...res.data.results);
    // console.log({ recipes });
    return res.data.results;
  } catch (error) {
    console.log(error);
  }
};

const fetchAllIndivRecipes = async recipes => {
  const res = recipes.map(recipe => fetchIndivRecipe(recipe.id));
  return Promise.all(res);
};

const loadFavorite = () => {
  const favoriteRecipes = JSON.parse(
    localStorage.getItem("favRecipes") || "[]"
  );

  const ul = document.querySelector("ul.favourite-recipes-ul");
  for (let favRec of favoriteRecipes) {
    const h4 = document.createElement("h4");
    h4.innerHTML = favRec.title;
    ul.append(h4);
  }
};

const main = async () => {
  try {
    const recipes = await fetchRecipes();
    const indivRecipes = await fetchAllIndivRecipes(recipes);
    createNewRecipe(recipes, indivRecipes);
    loadFavorite();
  } catch (err) {
    console.log(err);
  }
};

main();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recipes Project V1</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="recipes-coding-project-v1.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark">
      <div class="container container-fluid">
        <a class="navbar-brand" href="#">
          <i class="bi bi-egg-fried"></i> Recipes
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Recipe List</a>
            </li>
          </ul>
          <span class="navbar-text">
            Favourite Recipes
            <i class="bi bi-heart-fill empty-heart"></i>
          </span>
        </div>
      </div>
    </nav>

    <main class="container">
      <h1>Recipes</h1>
      <ul class="list-group list-group-flush"></ul>

      <h2>Favourite Recipes</h2>
      <ul class="list-group list-group-flush favourite-recipes-ul"></ul>
    </main>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="recipes-coding-project-v1.js"></script>
  </body>
</html>

【讨论】：

    猜你喜欢
    • 2016-08-04
    • 2022-01-05
    • 2012-11-03
    • 1970-01-01
    • 2020-01-24
    • 1970-01-01
    • 2015-12-26
    • 2017-07-24
    • 2016-01-23
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode