Angular array mapping techniques

Question

Angular array mapping techniques

My JSON Object

$scope.selectedItems ={
    "RECORDS": [
        {
            "Id": 23040035705987,
            "arriveddate": "2015/04/24",
            "expirationDate": null,
            "replacedDate": null,
            "processDate": "2015/04/24"
        },
        {
            "Id": 23070041800654,
            "arriveddate": "2015/04/24",
            "expirationDate": null,
            "replacedDate": null,
            "processDate": "2015/04/27"
        },
        {
            "Id": 23040035705984,
            "arriveddate": "2015/04/24",
            "expirationDate": null,
            "replacedDate": null,
            "processDate": "2015/04/24"
        },
        {
            "Id": 23040035705983,
            "arriveddate": "2015/04/24",
            "expirationDate": null,
            "replacedDate": null,
            "processDate": "2015/04/24"
        }
    ]
}

what i am striving for

My goal is to separate the IDs corresponding to unique processing dates into a new object. For example, the processing date 24/04/2015 matches with the IDs ending with 83, 84, 87, and the processing date 27/04/2015 matches with the ID ending with 54.

My desired JSON object

{
    "processDate": [
        "2015/04/24",
        "2015/04/27"
    ],
    "Id": [
        [
            23040035705983,
            23040035705984,
            23040035705987
        ],
        [
            23070041800654
        ]
    ]
}

my approach

angular.forEach($scope.selectedItems.RECORDS, function ( item ) { 
                $scope.ProcessDate = item.processDate;
                if($scope.processDatesSelected.indexOf($scope.ProcessDate) == -1){
                  $scope.processDatesSelected.push($scope.ProcessDate);
                }

                if($scope.processDatesSelected.indexOf($scope.ProcessDate) != -1 && $scope.id.indexOf(item.Id) == -1 ){
                    $scope.id.push(item.Id);
                }

            });

  $scope.changesSelected.push({processDate:$scope.processDatesSelected,Ids:$scope.id});
  console.log(JSON.stringify($scope.changesSelected));

Issue arises with the ID mappings, I have created a Plunker for reference (http://plnkr.co/edit/mkLXdOKayaqyDDDheFeu?p=preview) Any assistance would be greatly appreciated.

javascript json angularjs

Answer 1

Answer №1

Here is a new approach for you to try: http://example.com/code

When iterating through the selected items in Angular, ensure you capture the processDate and assign it to $scope.ProcessDate. Then, check if the processDate is already in the processDatesSelected array. If not, add it to the array and initialize an empty array at the corresponding index in the id array. If the processDate is already in processDatesSelected, check if the item's Id is already in the corresponding id array. If not, push the Id to the id array at that index.

Answer 2

Here is a new approach for you to try: http://example.com/code

When iterating through the selected items in Angular, ensure you capture the processDate and assign it to $scope.ProcessDate. Then, check if the processDate is already in the processDatesSelected array. If not, add it to the array and initialize an empty array at the corresponding index in the id array. If the processDate is already in processDatesSelected, check if the item's Id is already in the corresponding id array. If not, push the Id to the id array at that index.

Answer 3

Answer №2

To create an array for each date, you need to consider the date when creating the array for the "id" values.

Here is an example to help you understand: http://plnkr.co/edit/vrig4P9SgZh8Kk7BkyEt?p=preview

First, you should find the index of the item from the initial array, then insert the element at the correct position.

var processDateIndex = $scope.processDatesSelected.indexOf($scope.ProcessDate);
if(processDateIndex != -1 && $scope.id.indexOf(item.Id) == -1 ){
  if ($scope.id.length < processDateIndex+1)
  {
    $scope.id.push([]);
  }
    $scope.id[processDateIndex].push(item.Id);
}

You can also consider using a structure like the following for better organization and maintenance of the collection:

{
    "processDate": [
        { 
            Date: "2015/04/24",
            Ids: [
                23040035705983,
                23040035705984,
                23040035705987
            ]
        },
        {
            Date: "2015/04/27",
            Ids: [
                23070041800654
            ]
        }
    ]
}

Answer 4

To create an array for each date, you need to consider the date when creating the array for the "id" values.

Here is an example to help you understand: http://plnkr.co/edit/vrig4P9SgZh8Kk7BkyEt?p=preview

First, you should find the index of the item from the initial array, then insert the element at the correct position.

var processDateIndex = $scope.processDatesSelected.indexOf($scope.ProcessDate);
if(processDateIndex != -1 && $scope.id.indexOf(item.Id) == -1 ){
  if ($scope.id.length < processDateIndex+1)
  {
    $scope.id.push([]);
  }
    $scope.id[processDateIndex].push(item.Id);
}

You can also consider using a structure like the following for better organization and maintenance of the collection:

{
    "processDate": [
        { 
            Date: "2015/04/24",
            Ids: [
                23040035705983,
                23040035705984,
                23040035705987
            ]
        },
        {
            Date: "2015/04/27",
            Ids: [
                23070041800654
            ]
        }
    ]
}

Answer 5

Answer №3

Here's a solution that should work:

let output = {
    processDates: [],
    Ids: []
};

for(let i = 0; i < $scope.pickedItems.SETS.length; i++) {
    let item = $scope.pickedItems.SETS[i],
        index = output.processDates.indexOf(item.processDate);
        
    if(index === -1) {
        output.processDates.push(item.processDate);
        output.Ids.push([item.Id]);
    } else {
        output.Ids[index].push(item.Id);
    }
}

Answer 6

Here's a solution that should work:

let output = {
    processDates: [],
    Ids: []
};

for(let i = 0; i < $scope.pickedItems.SETS.length; i++) {
    let item = $scope.pickedItems.SETS[i],
        index = output.processDates.indexOf(item.processDate);
        
    if(index === -1) {
        output.processDates.push(item.processDate);
        output.Ids.push([item.Id]);
    } else {
        output.Ids[index].push(item.Id);
    }
}

Angular array mapping techniques

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to receive live updates from a MySQL database on a webpage using node.js and socket.io?

Issue encountered while attempting to create entity in jhipster

When a row is clicked, retrieve the data specific to that row

I'm having trouble receiving a response after uploading an image on Cloudinary using React js

How does the behavior of instanceof change when used within JSON.stringify()?

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

Tips for Removing Padding in Material UI Container Component

Retrieving FormData using ajax and passing it to aspx.cs code

ng-view is the culprit behind the website's fatal error

Using JavaScript to create a tree structure with hierarchical organization in JSON

Getting the chosen value from a dropdown menu on form submission using PHP

Preventing users from inputting the symbols "+" or "-" in a React JS input field

Apply a class to each consecutive element following the current one until reaching a child element with a

AngularJS Directives Directory: A hub for all things related to

What could be the reason for this function failing to calculate the mean of a set of data points?

Obtain the selected node in FancyTree

Invoke OnSelectedIndexChanged from GridView prior to any other function execution

Mastering the onKeyPress event for Material UI text fields: A step-by-step guide

Utilizing a custom function declared within the component to handle changes in Angular's ngOnChanges

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form