拼接然后修改阵列

Question

所以我正在拼接一个对象数组，首先是制作其中一个对象的副本。这是如果有人想"拆分"他们的订单，即为同一产品下一个新订单，但发货日期不同。

无论如何，我所期望的是，假设通过的参数是"Daily Breads"one_answers"Apple Streusel"，那么我在对象数组中会得到第二个"Apple Streensel"，但.text应该变成"Apple Stressel 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

您可以使用进行复制

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>');

Answer 3

我会选择不同的方法。类似于：

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