Удалить элемент массива, вложенный в объект

Question

Я пытаюсь удалить конкретный элемент из массива объектов на основе атрибута title в массиве. Я продолжаю сталкиваться с проблемой, когда я могу просмотреть элемент массива, но я не могу склеить элемент из массива на основе параметров, введенных в моей функции удаления. Я просто получаю сообщение об ошибке из моего оператора else в функции.

Я попытался использовать find, forEach, findIndex и сопоставить этот случай, чтобы проверить удаление результата на основе индекса или текстового значения key 'text'. Я прокомментировал все функции, которые я пробовал до поиска ответа в рекомендациях форума. Все мои функции рецепта работают вместе с моей createIngredient функцией, которая добавляет объект в массив рецептов. Но функция removeIngredient, которую я пытался заставить работать, не из-за проблем, упомянутых выше.

let recipes = []

// Read existing recipes from localStorage
const loadRecipes = () => {
    const recipesJSON = localStorage.getItem('recipes')

    try {
        return recipesJSON ? JSON.parse(recipesJSON) : []
    } catch (e) {
        return []
    } 
}

// Expose recipes from module
const getRecipes = () => recipes

const createRecipe = () => {
    const id = uuidv4()
    const timestamp = moment().valueOf()

    recipes.push({
        id: id,
        title: '',
        body: '',
        createdAt: timestamp,
        updatedAt: timestamp,
        ingredient: []
    })
    saveRecipes()

    return id
}

// Save the recipes to localStorage
const saveRecipes = () => {
    localStorage.setItem('recipes', JSON.stringify(recipes))
}

// Remove a recipe from the list
const removeRecipe = (id) => {
    const recipeIndex = recipes.findIndex((recipe) => recipe.id === id)

    if (recipeIndex > -1) {
        recipes.splice(recipeIndex, 1)
        saveRecipes()
    }
}

// Remove all recipes from the recipe array
const cleanSlate = () => {
    recipes = []
    saveRecipes()
}

const updateRecipe = (id, updates) => {
    const recipe = recipes.find((recipe) => recipe.id === id)

    if (!recipe) {
        return
    }

    if (typeof updates.title === 'string') {
        recipe.title = updates.title
        recipe.updatedAt = moment().valueOf()
    }

    if (typeof updates.body === 'string') {
        recipe.body = updates.body
        recipe.updateAt = moment().valueOf()
    }

    saveRecipes()
    return recipe
}

const createIngredient = (id, text) => {
    const recipe = recipes.find((recipe) => recipe.id === id)

    const newItem = {
        text,
        have: false
    }
    recipe.ingredient.push(newItem)
    saveRecipes()
}

const removeIngredient = (id) => {
    const ingredient = recipes.find((recipe) => recipe.id === id)
    console.log(ingredient)
    const allIngredients = ingredient.todo.forEach((ingredient) => console.log(ingredient.text))

    // const recipeIndex = recipes.find((recipe) => recipe.id === id)

    // for (let text of recipeIndex) {
    //     console.log(recipdeIndex[text])
    // }

// Attempt 3
    // if (indexOfIngredient === 0) {
    //     ingredientIndex.splice(index, 1)
    //     saveRecipes()
    // } else {
    //     console.log('error')
    // }
    // Attempt 2
    // const recipe = recipes.find((recipe) => recipe.id === id)
    // const ingredients = recipe.todo 
    // // let newItem = ingredients.forEach((item) => item)

    // if (ingredients.text === 'breadcrumbs') {
    //     ingredients.splice(ingredients, 1)
    //     saveRecipes()
    // }
    // Attempt 1
    // const ingredientName = ingredients.forEach((ingredient, index, array) => console.log(ingredient, index, array))
    // console.log(ingredientName)

    // const recipeIndex = recipes.findIndex((recipe) => recipe.id === id)

    // if (recipeIndex > -1) {
    //     recipes.splice(recipeIndex, 1)
    //     saveRecipes()
    // }
}

recipes = loadRecipes()

OUTPUT

{id: "ef88e013-9510-4b0e-927f-b9a8fc623450", title: "Spaghetti", body: "", createdAt: 1546878594784, updatedAt: 1546878608896, …}
recipes.js:94 breadcrumbs
recipes.js:94 noodles
recipes.js:94 marinara
recipes.js:94 meat
recipes.js:94 ground beef
recipes.js:94 milk

Таким образом, я могу просмотреть вывод, который я напечатал выше, и увидеть каждый элемент в массиве ingredients, но попытка склеить элемент на основе номера index или key не работает для меня с функции, которые я уже пробовал, и информацию, которую я нашел в Stackoverflow об объектах, массивах и методе сплайсинга.

Answer 1

Если я правильно понимаю (после прочтения закомментированных попыток в вашем коде), вы пытаетесь удалить компонент «хлебные крошки» из рецепта, который соответствует id, переданному в функцию removeIngredient().

В таком случае, возможно, вы могли бы использовать несколько иной подход к удалению ингредиента из массива рецептов todo с помощью метода Array#filter?

Вы можете использовать filter() следующим образом, чтобы «отфильтровать» (т.е. удалить) компонент «хлебные крошки» из массива todo через следующую логику фильтра:

// Keep any ingredients that do not match ingredient (ie if ingredient
// equals "breadcrumbs")
todo.filter(todoIngredient => todoIngredient !== ingredient) 

Вы можете рассмотреть вопрос о пересмотре вашей removeIngredient() функции на;

• добавление дополнительного параметра ingredient к аргументам функции. Это позволяет указать ингредиент, который будет удален из рецепта, соответствующий recipeId

• и, представляя идею filter(), как описано:

---

const removeIngredient = (recipeId, ingredient) => {

    const recipe = recipes.find(recipe => recipe.id === recipeId)

    if(recipe) {

        // Filter recipe.todo by ingredients that do not match  
        // ingredient argument, and reassign the filtered array 
        // back to the recipie object we're working with
        recipe.todo = recipe.todo.filter(todoIngredient => 
                                         (todoIngredient !== ingredient));
    }

}

Теперь, когда вы вводите кнопку «удалить» для каждого ингредиента, вы бы назвали removeIngredient() следующим образом:

var recipeId = /* got id from somewhere */
var ingredientText = /* got ingredient from somewhere */

removeIngredient( recipeId, ingredientText );

Надеюсь, это поможет!