Tips for storing unique values in an object using JavaScript

Question

Tips for storing unique values in an object using JavaScript

I need assistance with organizing my log data, which includes camera names and system IP addresses. I am trying to create an object where each unique system IP is a key, with an array of corresponding camera names as the value. Here is the code snippet I have been working on ---

    $http(req).success(function(data){
    $scope.logs = data;
    $scope.cameras={};
    var v =$scope.logs[0].systemIp;
    $scope.cameras["v"]=[];
    $scope.cameras["v"].push($scope.logs[0].cameraName);
    for(i=1;i<$scope.logs.length;i++){
        v=$scope.logs[i].systemIp;
        var flag=0;
        for(j in $scope.cameras){
            if(j==="v")
            {
                flag=1;
                break;
            }
        }
        if(flag==0)
        {
            $scope.cameras["j"]=[];
            $scope.cameras["j"].push($scope.logs[i].cameraName);
        }
        else if(flag==1)
        {
            $scope.cameras["v"].push($scope.logs[i].cameraName);
        }
    }});

This is a sample of my log data --

    [{
    "_id": "57683fd82c77bb5a1a49a2aa",
    "cameraIp": "192.16.0.9",
    "cameraName": "garage2",
    "systemIp": "192.168.0.2"
    },
    {
    "_id": "57683f8e2c77bb5a1a49a2a9",
    "cameraIp": "192.16.0.8",
    "cameraName": "garage1",
    "systemIp": "192.168.0.2"
    },
    {
    "_id": "57683f5e2c77bb5a1a49a2a8",
    "cameraIp": "192.16.0.7",
    "cameraName": "Back Door",
    "systemIp": "192.168.0.4"
    }]

When I check the console for $scope.cameras, it currently displays this output -

    Object { v: Array[3] }

I would like the cameras object to be structured like this --

    { "192.168.0.2" : [ "garage1" , "garage2"] ,
      "192.168.0.4" : [ "Back Door"] }

I'm new to javascript, so any guidance would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

If you opt to utilize the Lodash or Underscore library (which comes highly recommended), you can leverage the _.groupBy() function to achieve your desired outcome (while incorporating a few additional functions to ensure uniqueness across all values).

Nevertheless, you also have the option to create your own implementation easily:

function groupByDistinct(arr, prop, mapFn) {
    mapFn = mapFn || function (x) { return x; };
    var output = {};
    arr.forEach(function (item) {
        var key = item[prop],
            val = mapFn(item);
        if (!output[key]) {
            output[key] = [val];
            return;
        }
        if (output[key].indexOf(val) < 0) {
            output[key].push(val);
        }
    });
    return output;
}

Implement it in your code as shown below:

$scope.cameras = groupByDistinct(data, 'cameraIp', function (logEntry) { 
    return logEntry.cameraName;
});

Answer 2

If you opt to utilize the Lodash or Underscore library (which comes highly recommended), you can leverage the _.groupBy() function to achieve your desired outcome (while incorporating a few additional functions to ensure uniqueness across all values).

Nevertheless, you also have the option to create your own implementation easily:

function groupByDistinct(arr, prop, mapFn) {
    mapFn = mapFn || function (x) { return x; };
    var output = {};
    arr.forEach(function (item) {
        var key = item[prop],
            val = mapFn(item);
        if (!output[key]) {
            output[key] = [val];
            return;
        }
        if (output[key].indexOf(val) < 0) {
            output[key].push(val);
        }
    });
    return output;
}

Implement it in your code as shown below:

$scope.cameras = groupByDistinct(data, 'cameraIp', function (logEntry) { 
    return logEntry.cameraName;
});

Answer 3

Answer №2

When you pass a string like "v" or "j" as your object key, the string itself becomes the key instead of the intended value of these variables. To address this issue, consider using the following approach:

for(index = 0; index < $scope.logs.length; index++){
    var _sysIp = $scope.logs[index].systemIp,
        _camName = $scope.logs[index].cameraName;

    if(!$scope.cameras.hasOwnProperty(_sysIp)) {
        $scope.cameras[_sysIp] = [_camName];
    } else if ($scope.cameras[_sysIp].indexOf(_camName) < 0) {
        $scope.cameras[_sysIp].push(_camName);
    }

}

Answer 4

When you pass a string like "v" or "j" as your object key, the string itself becomes the key instead of the intended value of these variables. To address this issue, consider using the following approach:

for(index = 0; index < $scope.logs.length; index++){
    var _sysIp = $scope.logs[index].systemIp,
        _camName = $scope.logs[index].cameraName;

    if(!$scope.cameras.hasOwnProperty(_sysIp)) {
        $scope.cameras[_sysIp] = [_camName];
    } else if ($scope.cameras[_sysIp].indexOf(_camName) < 0) {
        $scope.cameras[_sysIp].push(_camName);
    }

}

Tips for storing unique values in an object using JavaScript

Answer №1

Answer №2

Similar questions

Javascript enables the magnetization of cursor movements

sanitizing user input in an AngularJS application

Error: AngularJS has encountered an Uncaught ReferenceError stating that the controller is not defined within the

Issue with React-Toastify not displaying on the screen

What's the best method for efficiently hiding/showing a large number of DOM elements?

Retrieve JSON information from a document through JavaScript

What is the best way to retrieve dynamic content from a .txt file and have it displayed on multiple HTML pages as they are loaded dynamically?

Struggling to find a solution for your operating system issue?

Frontend update: Changing the display format for dates

Console log is not displaying the JSON output

How come attempting to read a nonexistent document from Firestore results in an uncaught promise?

Issue with Angular JS: ng-repeat not refreshing within ng-view

What is the process for uploading images in the backend of a Next.js API?

Iterate through the JSON response and send it back to Jquery

"Utilizing Promises in AngularJS Factories for Synchronous API Calls

What is the best way to check for date equality in Node.js?

Can you explain how the functionality of setState operates within React in this specific situation?

Understanding the fundamentals of parseInt() and radix conceptsORExploring

Deciding whether an altered image has been successfully loaded

Different ways to verify if a Checkbox is selected within a table