Splice Then Modify Array

Question

так что я сплайсирую массив объектов, во-первых, чтобы сделать копию одного из объектов. Это если кто-то хочет «разбить» свой заказ, то есть сделать новый заказ того же продукта, но для другой даты доставки.

В любом случае, я ожидаю, что, допустив, что аргументы, переданные, например, являются «Ежедневными хлебами» и «Apple Streusel», что я получаю второй «Apple Streusel» в массиве объектов, но .text должен стать «Apple» Streusel Additional ". Вместо этого я получаю два объекта под названием «Apple Streusel Additional», а не только один.

Соответствующая часть моей JSON, который модифицируется:

$scope.theBreadsList = [{ 
     category: 'Daily Breads', 
     breads: [{ 
      text: 'Apple Streusel', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 7.25, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: false, 
      orderDates: [], 
      ingredients: ["White Flour", "Honey", "Water", "Butter", "Brown Sugar", "Eggs", "Applesauce", "Apples", "White Sugar", "Yeast", "Spices", "Vanilla", "Salt"] 
     }, 


     { 
      text: 'Honey Whole Wheat', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 5.65, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: true, 
      orderDates: [], 
      ingredients: ["Organic Whole Wheat Flour","Filtered Water","Honey","Yeast","Salt"], 
     }, 

     { 
      text: 'Peasant White', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 5.65, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: true, 
      orderDates: [], 
      ingredients: ["Unbleached Unbromated White Flour", "Filtered Water","Honey","Yeast","Salt"] 
     }, 

     { 
      text: 'Rolls (White or Wheat)', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 4.75, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: false, 
      orderDates: [] 
     }, 

     { 
      text: 'Seven Grain Crunch', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 5.95, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: true, 
      orderDates: [], 
      ingredients: ["Freshly Milled Organic Whole Wheat Flour","Seven Grain Mix (Hard & Soft Wheat, Oats, Rye, Millet, Barley, Triticale)", "Filtered Water","Honey","Yeast","Salt"] 
     }, 

     { 
      text: 'Three Seed Healthy', 
      category: 'Daily Breads', 
      isDaily: true, 
      price: 6.25, 
      quantity: 0, 
      days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], 
      daysNotAvailable: null, 
      onMenu: true, 
      canSlice: true, 
      orderDates: [], 
      ingredients: ["Organic Whole Wheat Flour","Honey","Filtered Water","Sunflower Seeds","Sesame Seeds","Flax Seeds","Yeast","Salt"] 
     }] 

Моя функция:

function add2JSON(breadCategory,bread){ 
    for (var i = 0; i < $scope.theBreadsList.length; i++) { 
        if ($scope.theBreadsList[i].category === breadCategory) { 
         for (var z = 0; z < $scope.theBreadsList[i].breads.length; z++) { 
         if ($scope.theBreadsList[i].breads[z].text === bread) { 
         //importante! 
         console.log(z); 
         $scope.theBreadsList[i].breads.splice(z, 0, $scope.theBreadsList[i].breads[z]); 
         console.log($scope.theBreadsList, $scope.theBreadsList[i].breads[z], $scope.theBreadsList[i].breads[z+1]); 
         $scope.theBreadsList[i].breads[z+1].text = $scope.theBreadsList[i].breads[z+1].text + " Additional"; 
         $scope.theBreadsList[i].breads[z+1].onMenu = false; 
         return; 
         } 
         } 
       } 
      } 
} 

Мой вызов:

add2JSON("Daily Breads","Apple Streusel"); 

Answer 1

Вы изменяете свойства объекта объекта, ссылается как в исходном, так и в модифицированном массиве.

Вам необходимо глубоко скопировать элемент массива, который вы вставляете. Как вы используете AngularJS, вы могли бы использовать angular.copy для этого, следующим образом:

Замените эту строку:

$scope.theBreadsList[i].breads.splice(z, 0, 
    $scope.theBreadsList[i].breads[z]); 

с:

$scope.theBreadsList[i].breads.splice(z, 0, 
    angular.copy($scope.theBreadsList[i].breads[z])); 

Answer 2

я бы выбрал другой подход. Что-то вроде:

var arr = $scope.theBreadsList; // just to ease the example 

function add2JSON(breadCategory, bread) { 
    var cat = arr.filter(function(c) { return c.category === breadCategory; })[0]; 
    var originalBread; 
    var isAdditional = cat.breads.some(function(b) { 
    if (b.text === bread) { 
     originalBread = b; 
     return true; 
    } 
    return false; 
    }); 

    if (isAdditional) { 
    var newBread = Object.assign({}, originalBread, { 
     text: originalBread.text + ' (Additional)' 
    }); 
    cat.breads.push(newBread); 
    } else { 
    // TODO: implement the case where it not exists already 
    } 
} 

add2JSON('Daily Breads', 'Apple Streusel'); 

Смотрите эту работу DEMO

Answer 3

Вы можете сделать копию с

c = JSON.parse(JSON.stringify(b)); 

и вставьте его по своему желанию.

var $scope = {}; 
 
$scope.theBreadsList = [{ category: 'Daily Breads', breads: [{ text: 'Apple Streusel', category: 'Daily Breads', isDaily: true, price: 7.25, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: false, orderDates: [], ingredients: ["White Flour", "Honey", "Water", "Butter", "Brown Sugar", "Eggs", "Applesauce", "Apples", "White Sugar", "Yeast", "Spices", "Vanilla", "Salt"] }, { text: 'Honey Whole Wheat', category: 'Daily Breads', isDaily: true, price: 5.65, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: true, orderDates: [], ingredients: ["Organic Whole Wheat Flour", "Filtered Water", "Honey", "Yeast", "Salt"], }, { text: 'Peasant White', category: 'Daily Breads', isDaily: true, price: 5.65, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: true, orderDates: [], ingredients: ["Unbleached Unbromated White Flour", "Filtered Water", "Honey", "Yeast", "Salt"] }, { text: 'Rolls (White or Wheat)', category: 'Daily Breads', isDaily: true, price: 4.75, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: false, orderDates: [] }, { text: 'Seven Grain Crunch', category: 'Daily Breads', isDaily: true, price: 5.95, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: true, orderDates: [], ingredients: ["Freshly Milled Organic Whole Wheat Flour", "Seven Grain Mix (Hard & Soft Wheat, Oats, Rye, Millet, Barley, Triticale)", "Filtered Water", "Honey", "Yeast", "Salt"] }, { text: 'Three Seed Healthy', category: 'Daily Breads', isDaily: true, price: 6.25, quantity: 0, days: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday"], daysNotAvailable: null, onMenu: true, canSlice: true, orderDates: [], ingredients: ["Organic Whole Wheat Flour", "Honey", "Filtered Water", "Sunflower Seeds", "Sesame Seeds", "Flax Seeds", "Yeast", "Salt"] }] }]; 
 

 
function add2JSON(breadCategory, bread) { 
 
    $scope.theBreadsList.forEach(function (a) { 
 
     var c, p; 
 
     if (a.category === breadCategory) { 
 
      a.breads.some(function (b, i) { 
 
       if (b.text === bread) { 
 
        p = i, 
 
        c = JSON.parse(JSON.stringify(b)); 
 
        c.text += " Additional"; 
 
        c.onMenu = false; 
 
        return true; 
 
       } 
 
      }) && a.breads.splice(p, 0, c); 
 
     } 
 
    }); 
 
} 
 

 
add2JSON("Daily Breads", "Apple Streusel"); 
 
document.write('<pre>' + JSON.stringify($scope, 0, 4) + '</pre>');