Learn the process of merging an array element into another object and keeping track of the total count

Question

Learn the process of merging an array element into another object and keeping track of the total count

Initially, my array contains object elements as shown below:

$scope.selectedIngredient = [object1, object2, object3, object1, object2];

Next, I have a new object :

$scope.selectedIngredientResults = {};

Now, I want to create a JavaScript function that does the following:

Count each object element in the array and store them in a new object along with their counts.

$scope.selectedIngredientResults = [

    {"object" : object1, "count" : 2},
    {"object" : object2, "count" : 2},
    {"object" : object3, "count" : 1}

];

https://i.sstatic.net/N4miS.png

[![Here is the resulting new object that I want,

I attempted to achieve this by using

$scope.addIngredient = function(selectedElement) {

console.log('selectedElement', selectedElement);
$scope.selectedIngredient.push(selectedElement);
console.log('$scope.selectedIngredient' , $scope.selectedIngredient);
$scope.selectedIngredientResults = {};
var lengthofR = $scope.selectedIngredient.length;

for (var i = lengthofR - 1; i >= 0; i--) {
    var selected = $scope.selectedIngredient[i]['ingredient_id'];
    console.log('lengthofR', lengthofR);
    if(selected){
        if($scope.selectedIngredientResults.hasOwnProperty(selected)){

            $scope.selectedIngredientResults[$scope.selectedIngredient]++;
        }else {
      $scope.selectedIngredientResults[$scope.selectedIngredient] = 1;
        }
         console.log('$scope.selectedIngredientResults', $scope.selectedIngredientResults ); 
        }
    }

}

javascript angularjs arrays object

Answer 1

Answer №1

If you want to group your data by a specific key, the first step is to apply the group by function. After that, extract the result from the grouping. Below is a custom transform function that accomplishes this:

function transformData(items) {
    items = items.reduce(function (memo, val) {
        var key = val['ingredient_id'];
        if (!memo[key]) {
            memo[key] = [];
        }
        memo[key].push(val);

        return memo;
    }, {});

    var result = [];
    for (var k in items) {
        var groups = items[k];
        result.push({ 'object': groups[0], 'count': groups.length });
    }

    return result;
}

Answer 2

If you want to group your data by a specific key, the first step is to apply the group by function. After that, extract the result from the grouping. Below is a custom transform function that accomplishes this:

function transformData(items) {
    items = items.reduce(function (memo, val) {
        var key = val['ingredient_id'];
        if (!memo[key]) {
            memo[key] = [];
        }
        memo[key].push(val);

        return memo;
    }, {});

    var result = [];
    for (var k in items) {
        var groups = items[k];
        result.push({ 'object': groups[0], 'count': groups.length });
    }

    return result;
}

Answer 3

Answer №2

function findUniqueIngredients(ingredientsList) {
  var sourceArray = [].slice.call(ingredientsList);
  var uniqueResults = [];

  while (sourceArray.length > 0) {
    // Get the first item from the source.
    var currentItem = sourceArray.shift();

    // Find indexes of duplicate entries.
    var duplicateIndexes = sourceArray.reduce(function(carry, item, index) {
      if (item.ingredient_id === currentItem.ingredient_id) {
        carry.push(index);
      }

      return carry;
    }, []);

    // Remove duplicates from the source array.
    duplicateIndexes.forEach(function(index) {
      sourceArray.splice(index, 1);
    });

    // Add unique data to the result array.
    uniqueResults.push({
      ingredient: currentItem,
      count: duplicateIndexes.length + 1
    });
  }

  return uniqueResults;
}

Answer 4

function findUniqueIngredients(ingredientsList) {
  var sourceArray = [].slice.call(ingredientsList);
  var uniqueResults = [];

  while (sourceArray.length > 0) {
    // Get the first item from the source.
    var currentItem = sourceArray.shift();

    // Find indexes of duplicate entries.
    var duplicateIndexes = sourceArray.reduce(function(carry, item, index) {
      if (item.ingredient_id === currentItem.ingredient_id) {
        carry.push(index);
      }

      return carry;
    }, []);

    // Remove duplicates from the source array.
    duplicateIndexes.forEach(function(index) {
      sourceArray.splice(index, 1);
    });

    // Add unique data to the result array.
    uniqueResults.push({
      ingredient: currentItem,
      count: duplicateIndexes.length + 1
    });
  }

  return uniqueResults;
}

Answer 5

Answer №3

Although this question may have been answered before, I'll provide a solution using a single reduce function:

$scope.updatedIngredientResults = $scope.selectedIngredient.reduce(function (newResult, currentItem) {
    var foundIndex = -1;
    var alreadyFound = newResult.some(function (previouslyCounted, index) {
        if (previouslyCounted.object.ingredient_id === currentItem.ingredient_id) {
            foundIndex = index;
            return true;
        }
        return false;
    });
    if (alreadyFound && foundIndex !== -1) newResult[foundIndex].count += 1;
    else newResult.push({object: currentItem, count: 1});
    return newResult;
}, []);

Answer 6

Although this question may have been answered before, I'll provide a solution using a single reduce function:

$scope.updatedIngredientResults = $scope.selectedIngredient.reduce(function (newResult, currentItem) {
    var foundIndex = -1;
    var alreadyFound = newResult.some(function (previouslyCounted, index) {
        if (previouslyCounted.object.ingredient_id === currentItem.ingredient_id) {
            foundIndex = index;
            return true;
        }
        return false;
    });
    if (alreadyFound && foundIndex !== -1) newResult[foundIndex].count += 1;
    else newResult.push({object: currentItem, count: 1});
    return newResult;
}, []);

Answer 7

Answer №4

** After exploring new methods inspired by your answers, I managed to solve the problem in a different way. Thank you all for your help! **

myApp.controller('addIngredientCtrl', function($scope) {
$scope.selectedIngredient = [];

$scope.addIngredient = function(selectedElement) {
var elementIndex = $scope.selectedIngredient.indexOf(selectedElement);
if(elementIndex === -1) {
  selectedElement['customerCartQuantity'] = 1;
  $scope.selectedIngredient.push(selectedElement);
} else {
  $scope.changeIngredientQuantity($scope.selectedIngredient[elementIndex],   1);
 }
 }

$scope.changeIngredientQuantity = function(selectedElement, value) {
var elementIndex = $scope.selectedIngredient.indexOf(selectedElement);
$scope.selectedIngredient[elementIndex].customerCartQuantity += value; 
if($scope.selectedIngredient[elementIndex].customerCartQuantity == 0) {
  $scope.selectedIngredient.splice(elementIndex, 1);
}

} });

Answer 8

** After exploring new methods inspired by your answers, I managed to solve the problem in a different way. Thank you all for your help! **

myApp.controller('addIngredientCtrl', function($scope) {
$scope.selectedIngredient = [];

$scope.addIngredient = function(selectedElement) {
var elementIndex = $scope.selectedIngredient.indexOf(selectedElement);
if(elementIndex === -1) {
  selectedElement['customerCartQuantity'] = 1;
  $scope.selectedIngredient.push(selectedElement);
} else {
  $scope.changeIngredientQuantity($scope.selectedIngredient[elementIndex],   1);
 }
 }

$scope.changeIngredientQuantity = function(selectedElement, value) {
var elementIndex = $scope.selectedIngredient.indexOf(selectedElement);
$scope.selectedIngredient[elementIndex].customerCartQuantity += value; 
if($scope.selectedIngredient[elementIndex].customerCartQuantity == 0) {
  $scope.selectedIngredient.splice(elementIndex, 1);
}

} });

Learn the process of merging an array element into another object and keeping track of the total count

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Callback issues in need of resolving

Issue with Cascading Dropdowns in jQuery

Is there a way to retrieve the name associated with a channel/server ID?

The behavior of having two submit buttons within the $document.ready(function) in Jquery

Unusual activity observed in HTML5 contenteditable functionality

Issues Persist with Bootstrap Tree View - object passed but no output显示

Iterating through a two-dimensional array in Javascript

Is there a way to selectively include a filter in ng-repeat within a directive?

The message from the XHR Object appears to be undefined, yet it correctly displays the status

Issue with utilizing Vuejs variable in Google Maps Matrix API function

Instructions on utilizing module.exports to export an async function

Shopping Directive Coverage Discrepancy

Separating text for tooltips from the element itself

Getting the value of a button using JavaScript

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

Display or Conceal form based on radio button selection of affirmative or negative

Is there a way to confirm that a list within my model contains at least one element?

Failure to start selection process on narrowed down list

Using Wordpress: Transferring a PHP Array to a JavaScript Function

Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?