Analyzing the differences between a variable and a JSON object

Question

Analyzing the differences between a variable and a JSON object

In my project, I am attempting to match the selected user's gender and country with those stored in a JSON object. If the comparison yields a positive result, I want to display the corresponding "Value" for that gender and country from the JSON data.

JS:

var app = angular.module('deathApp', []);
app.controller('data', function ($scope, $http) {
    $http.get("angular/death/data.json")
        .success(function (response) {

        $scope.ages = response.fact;
        //Extract their age at death
        //Retain their gender and country information
        var gender = $('select[name=gender]').val();
        var country = $('select[name=country]').val();
        console.log("GENDER:" + gender + "." + "COUNTRY:" + country);
        //Retrieve their age at death

        if (gender && country === gender and country from $scope.ages) {
            console.log(this.$scope.ages['Value'])
        }

json:

{
    "fact": [
        {
            "COUNTRY": "Afghanistan",
            "SEX": "Female",
            "Value": "62"
        },
        {
            "COUNTRY": "Afghanistan",
            "SEX": "Male",
            "Value": "61"
        },
        {
            "COUNTRY": "Albania",
            "SEX": "Female",
            "Value": "76"
        },
        {
            "COUNTRY": "Albania",
            "SEX": "Male",
            "Value": "73"
        },
        {
            "COUNTRY": "Algeria",
            "SEX": "Female",
            "Value": "74"
        },
        {
            "COUNTRY": "Algeria",
            "SEX": "Male",
            "Value": "70"
        }
    ]
}

I am not concerned about how the JSON data is structured, as it is functioning correctly. I can successfully access the $scope.ages data.

javascript json angularjs

Answer 1

Answer №1

To successfully retrieve the necessary data, you must map to the data source and iterate through each object in your array:

for(let i = 0; i < $scope.ages.length; i++){
    if(gender === $scope.ages[i].SEX && country === $scope.ages[i].COUNTRY){
        console.log($scope.ages[i].Value);
    }
}

Answer 2

To successfully retrieve the necessary data, you must map to the data source and iterate through each object in your array:

for(let i = 0; i < $scope.ages.length; i++){
    if(gender === $scope.ages[i].SEX && country === $scope.ages[i].COUNTRY){
        console.log($scope.ages[i].Value);
    }
}

Answer 3

Answer №2

To efficiently find the data you need, implement a for loop and break out of it once you have the desired result.

for(var i=0; i<$scope.ages['fact'].length; i++)
    if(gender === $scope.ages['fact'][i]['SEX'] && country === $scope.ages['fact'][i]['COUNTRY']){
        console.log($scope.ages['fact'][i]['Value']);
        break;
}

It appears that the array is organized alphabetically by country. You could use a binary search approach to quickly locate the desired country and then choose between the genders available.

For a demonstration with ngModel integration for tracking selected sex and country, check out this straightforward plunker example: demo.

Answer 4

To efficiently find the data you need, implement a for loop and break out of it once you have the desired result.

for(var i=0; i<$scope.ages['fact'].length; i++)
    if(gender === $scope.ages['fact'][i]['SEX'] && country === $scope.ages['fact'][i]['COUNTRY']){
        console.log($scope.ages['fact'][i]['Value']);
        break;
}

It appears that the array is organized alphabetically by country. You could use a binary search approach to quickly locate the desired country and then choose between the genders available.

For a demonstration with ngModel integration for tracking selected sex and country, check out this straightforward plunker example: demo.

Answer 5

Answer №3

To retrieve a specific value from a set of values in JSON data, you can utilize the filter function which operates on arrays.

Below is an example code that will extract an object from the provided values:

$scope.age = $scope.ages.fact.filter(function(x) {
    return x.COUNTRY === country && x.SEX === gender;
})[0].Value; // Only display the "Value" key from the current object. Therefore, $scope.age will store the age. [0] is used as you will receive an array with one matching object based on the search criteria.

Here is a simplified representation:

(function() {
  var app = angular.module("deathApp", []);

  app.controller("data", ["$scope",
    function($scope) {
      $scope.ages = {
        "fact": [{
          "COUNTRY": "Afghanistan",
          "SEX": "Female",
          "Value": "62"
        }, {
          "COUNTRY": "Afghanistan",
          "SEX": "Male",
          "Value": "61"
        }, {
          "COUNTRY": "Albania",
          "SEX": "Female",
          "Value": "76"
        }, {
          "COUNTRY": "Albania",
          "SEX": "Male",
          "Value": "73"
        }, {
          "COUNTRY": "Algeria",
          "SEX": "Female",
          "Value": "74"
        }, {
          "COUNTRY": "Algeria",
          "SEX": "Male",
          "Value": "70"
        }]
      };

      $scope.compare = function() {
        var gender = $('select[name=gender]').val();
        var country = $('select[name=country]').val();

        $scope.age = $scope.ages.fact.filter(function(x) {
          return x.COUNTRY === country && x.SEX === gender;
        })[0].Value;
      };
    }
  ]);
})();

<html data-ng-app="deathApp">

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body data-ng-controller="data">
  <select name="gender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <select name="country">
    <option value="Albania">Albania</option>
    <option value="Afghanistan">Afghanistan</option>
  </select>
  <button data-ng-click="compare()">Compare</button>
  <br />Age: {{age}}
</body>

</html>

Answer 6

To retrieve a specific value from a set of values in JSON data, you can utilize the filter function which operates on arrays.

Below is an example code that will extract an object from the provided values:

$scope.age = $scope.ages.fact.filter(function(x) {
    return x.COUNTRY === country && x.SEX === gender;
})[0].Value; // Only display the "Value" key from the current object. Therefore, $scope.age will store the age. [0] is used as you will receive an array with one matching object based on the search criteria.

Here is a simplified representation:

(function() {
  var app = angular.module("deathApp", []);

  app.controller("data", ["$scope",
    function($scope) {
      $scope.ages = {
        "fact": [{
          "COUNTRY": "Afghanistan",
          "SEX": "Female",
          "Value": "62"
        }, {
          "COUNTRY": "Afghanistan",
          "SEX": "Male",
          "Value": "61"
        }, {
          "COUNTRY": "Albania",
          "SEX": "Female",
          "Value": "76"
        }, {
          "COUNTRY": "Albania",
          "SEX": "Male",
          "Value": "73"
        }, {
          "COUNTRY": "Algeria",
          "SEX": "Female",
          "Value": "74"
        }, {
          "COUNTRY": "Algeria",
          "SEX": "Male",
          "Value": "70"
        }]
      };

      $scope.compare = function() {
        var gender = $('select[name=gender]').val();
        var country = $('select[name=country]').val();

        $scope.age = $scope.ages.fact.filter(function(x) {
          return x.COUNTRY === country && x.SEX === gender;
        })[0].Value;
      };
    }
  ]);
})();

<html data-ng-app="deathApp">

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body data-ng-controller="data">
  <select name="gender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <select name="country">
    <option value="Albania">Albania</option>
    <option value="Afghanistan">Afghanistan</option>
  </select>
  <button data-ng-click="compare()">Compare</button>
  <br />Age: {{age}}
</body>

</html>

Analyzing the differences between a variable and a JSON object

Answer №1

Answer №2

Answer №3

Similar questions

Begin using datatables with the xp:table component

Guide on how to decode a JSON file using UTF-8 in Swift 3/4

Node.js: Array remains undefined despite being logged on the console

Does Highchart offer support for drilling down into sub-categories?

Ways to extract the variable value from two asynchronous functions

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

Express Producing Empty Axios Post Request Body

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Troubleshooting NodeJS and Express: Issue accessing a function located outside a folder

Sharing results between promises in AngularJSIn AngularJS, learn how to

What steps can I take to successfully integrate Facebook authentication into my MEAN application while avoiding CORS issues?

The JSON response on Android is simply a string value

Error: To activate Bootstrap's dropdowns on button groups, Popper.js must be installed and configured correctly

Displaying Values/Marks in a Unique Order with Material-UI Slider Component

Exploring further into my http request reveals that the necessary data is not being displayed on the view

PHP Loop News/Image Slider with Clickable Interval Reset and Improved Unique ID Formatting

Having trouble executing JavaScript upon form submission

A guide on transferring JSON information via a POST request with C#

Expanding a dropdown list on the fly using vanilla JavaScript

Encountering JSON parsing errors while using fetch() POST requests in Express