Having difficulty retrieving the correct value for 'key' from JSON in AngularJS

Question

Having difficulty retrieving the correct value for 'key' from JSON in AngularJS

I am aiming to create a table using AngularJS based on the nested JSON data provided below. The desired table format is outlined as follows:

{
  "traits": ["Number of Observations","Observed Number of Exceptions","95-99", "95-95","99-95", "99-99"],
  "values": [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  ]
}

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

Under the 'values' key, there are two objects that will translate into two rows in the table. My issue lies with looping through objects like '95-95', '95-99', etc., and generating three columns for each object. Currently, I have managed to create three columns under the '95-95' object; however, I hard-coded the 'AAAA1' key value in ng-repeat. I am struggling to dynamically access the middle-level Object key value not within any ng-repeat. Is there a way to achieve this?

<tr ng-repeat="(key,value) in Controller.values">

    <td class="text-center"  ng-repeat="(key1,value1) in value['AAAA1']['95-95']">
        {{value1}}                   
    </td>

Due to this challenge, I am currently relying on the static code below which does not serve my needs effectively.

<td class="text-center"  ng-repeat="(key1,value1) in value">
       {{value1["95-95"]["Test Statistic"]}}                 
</td>

<td class="text-center" ng-repeat="(key1,value1) in value"> 
    {{value1["95-95"]["P-Value"]}}                   
</td>

<td class="text-center" ng-repeat="(key1,value1) in value">
    {{value1["95-95"]["Test Outcome"]}} 
</td>

javascript angularjs json

Answer 1

Answer №1

It is essential for 'AAAA1':'95-95' to be formatted as an Array.

Unfortunately, ng-Repeat can only function with arrays.

Answer 2

It is essential for 'AAAA1':'95-95' to be formatted as an Array.

Unfortunately, ng-Repeat can only function with arrays.

Answer 3

Answer №2

If you wish to avoid including a directive or code within the controller, you can achieve it in the following manner:

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {
$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
    <tbody ng-repeat="value in values">
      <tr ng-repeat="(name, objectAA) in value">
        <th ng-bind="name"></th>
        <td ng-repeat="(key, value) in objectAA['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in objectAA['95-99']" ng-bind="value">
          
        </td>
      </tr>
    </tbody>
  </table>
</body>

To eliminate the '95-95' and '95-99' specifics from the HTML, you can extract them within the controller.

By implementing specific code in the controller, the process can be achieved as shown below:

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {

  $scope.rows = []

$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
  
  $scope.values.forEach((value) => {
    Object.keys(value).forEach((name) => {
      $scope.rows.push({name: name, value: value[name]});
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
      <tr ng-repeat="row in rows">
        <th ng-bind="row.name"></th>
        <td ng-repeat="(key, value) in row.value['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in row.value['95-99']" ng-bind="value">
          
        </td>
      </tr>
  </table>
</head>

Answer 4

If you wish to avoid including a directive or code within the controller, you can achieve it in the following manner:

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {
$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
    <tbody ng-repeat="value in values">
      <tr ng-repeat="(name, objectAA) in value">
        <th ng-bind="name"></th>
        <td ng-repeat="(key, value) in objectAA['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in objectAA['95-99']" ng-bind="value">
          
        </td>
      </tr>
    </tbody>
  </table>
</body>

To eliminate the '95-95' and '95-99' specifics from the HTML, you can extract them within the controller.

By implementing specific code in the controller, the process can be achieved as shown below:

const myApp = angular.module('myApp', []);

myApp.controller('Ctrl', ($scope) => {

  $scope.rows = []

$scope.values = 
  [
    {
      "AAAA1": {
        "Number of Observations": 252,
        "95-95": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },

        "95-99": {
            "Test Statistic": 5.368809379876272,
            "P-Value": 3.9629067916102656e-08,
            "Test Outcome": "p-value <0.01"
        },

        "Observed Number of Exceptions": 9
      }
    },
    {
      "AAAA2": {
        "Number of Observations": 43,
       "95-99": {
            "Test Statistic": -1.040531963428947,
            "P-Value": 0.85095358899764695,
            "Test Outcome": "p-value >=0.05"
        },
        "95-95": {
            "Test Statistic": -0.46245865041286727,
            "P-Value": 0.67812377583172401,
            "Test Outcome": "p-value >=0.05"
        },

        "Observed Number of Exceptions": 7
      }
    }
  
  ]
  
  $scope.values.forEach((value) => {
    Object.keys(value).forEach((name) => {
      $scope.rows.push({name: name, value: value[name]});
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
  <table ng-controller="Ctrl">
      <tr ng-repeat="row in rows">
        <th ng-bind="row.name"></th>
        <td ng-repeat="(key, value) in row.value['95-95']" ng-bind="value">
          
        </td>
        <td ng-repeat="(key, value) in row.value['95-99']" ng-bind="value">
          
        </td>
      </tr>
  </table>
</head>

Having difficulty retrieving the correct value for 'key' from JSON in AngularJS

Answer №1

Answer №2

Similar questions

Error encountered on PUT request: Headers cannot be set after they have already been sent

Tips for bringing in and taking out data in Vue

Emphasizing the date variable within a spreadsheet

Tips for implementing Google Captcha on 2 Django Forms within a single page

Problematic rendering of JSON decoded array in HTML display

Trouble with fetching value from function in Angular 2

Prevent the onClick event from being triggered by utilizing JSON data

In React JS, when the navbar button is clicked, the URL is updated but the content does not refresh

Transferring data from JavaScript variables to PHP function through AJAX requests

Exploring the depths of futbin.com through web scraping

Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

WebDriver integration with the AngularJS form

Having trouble with jQuery modal not adjusting its height properly

Troubleshooting problems with looping in Chart.js using PHP and JSON

Utilizing jquery to conceal a table row with unselected input - a guide

What is the best way to eliminate an element from a state using the useState hook?

Changing the event when a class is active in Vue3

Deactivate additional fields when choosing an option from the drop-down selection menu

Angular.js controller unable to receive object array from $http.get in factory

observe unique attributes of various objects' keys