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

Mobile version experiencing issue with Navbar not collapsing

Intercepting HTTP requests on specific routes with Angular 4+ using an HTTP Interceptor

What is the method to individually determine "true" or "false" using .map() in coding

How to modify the color of the placeholder text in a select dropdown using Material-ui

Using Node.js to send a response only after every promise has been resolved

Utilize the power of jQuery's AJAX capabilities

Why is MutationRecord[] organized as an array in MutationObserver?

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

Add JSON elements to an array

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

Bootstrapvalidator does not function properly with select2.js

What is a way to automatically run a function at specific intervals in PHP, similar to the setTimeout() function in JavaScript?

Angular 4 after ejection, coupled with automated end-to-end testing using Protractor/Selenium setup

What is the best way to access a resource from an Angular.js module for a jasmine test?

Ways to retrieve data from an AJAX success callback function

Identify the moment a dialogue box appears using jQuery

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

How can I remove a quadratic curved arrow tool in Fabric JS canvas after it has been created?

Swapping out the JSON data from the API with HTML content within the Vue.js application

Unlocking the Power of Combining JMVC and Server-side MVC Models