Tips for choosing data from a nested JSON array

Question

Tips for choosing data from a nested JSON array

I receive JSON data from an API in the following format:

 $scope.data = [{
        "primary": "white",
        "sub": ["white 1", "white 2", "white 3"]

    },{
        "primary": "black",
       "sub": ["black 1", "black 2", "black 3"]

    }];

My goal is to group by the primary key and have the selectable values be the sub arrays.

For example:

**White**
   white 1
   white 2
   white 3
**Black**
   Black 1
   Black 2
   Black 3

I have successfully grouped by the primary key, but I am struggling to display the inner values. Here's what I currently have:

<div ng-controller="myCtrl">
    <select
        ng-model="myOption"
        ng-options="val.primary group by value.primary for value in data">

    </select>
    <div>
        ng-model value: {{myOption}}
    </div>
</div>

(You can also view my code on this fiddle: http://jsfiddle.net/jm6of9bu/648/)

javascript json angularjs

Answer 1

Answer №1

It is important to ensure your array is flattened before using ng-options. This directive works best with a flat array structure even when utilizing group by:

$scope.data2 = [
    {primary: "white", sub: "white1"},
    {primary: "white", sub: "white2"},
    {primary: "white", sub: "white3"},
    {primary: "black", sub: "black1"},
    {primary: "black", sub: "black2"},
    {primary: "black", sub: "black3"},
    ];

You can then implement the following code:

<select
    ng-model="myOption"
    ng-options="value as value.sub group by value.primary for value in data2">

</select>

The model will contain the entire value object, such as

{primary: "white", sub: "white2"}

. If you prefer it to hold just "white2", "black3", etc., you should use:

ng-options="value.sub as value.sub group by value.primary for value in data2"

Answer 2

It is important to ensure your array is flattened before using ng-options. This directive works best with a flat array structure even when utilizing group by:

$scope.data2 = [
    {primary: "white", sub: "white1"},
    {primary: "white", sub: "white2"},
    {primary: "white", sub: "white3"},
    {primary: "black", sub: "black1"},
    {primary: "black", sub: "black2"},
    {primary: "black", sub: "black3"},
    ];

You can then implement the following code:

<select
    ng-model="myOption"
    ng-options="value as value.sub group by value.primary for value in data2">

</select>

The model will contain the entire value object, such as

{primary: "white", sub: "white2"}

. If you prefer it to hold just "white2", "black3", etc., you should use:

ng-options="value.sub as value.sub group by value.primary for value in data2"

Answer 3

Answer №2

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { 

$scope.data = [{
        "main": "red",
        "subvalues": ["red 1", "red 2", "red 3"]

    },{
        "main": "blue",
       "subvalues": ["blue 1", "blue 2", "blue 3"]

    }];


$scope.selectedData=[];
$scope.data.forEach(function(item,index){
    item.subvalues.forEach(function(value,index){    
    $scope.selectedData.push({
      'type':item.main,
      'info':value
      });
    });    
});
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
    <select
        ng-model="chosenOption"
        ng-options="data.info as data.info group by data.type for data in selectedData">

    </select>
    <div>
        Selected value: {{chosenOption}}
    </div>
</div>

Answer 4

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { 

$scope.data = [{
        "main": "red",
        "subvalues": ["red 1", "red 2", "red 3"]

    },{
        "main": "blue",
       "subvalues": ["blue 1", "blue 2", "blue 3"]

    }];


$scope.selectedData=[];
$scope.data.forEach(function(item,index){
    item.subvalues.forEach(function(value,index){    
    $scope.selectedData.push({
      'type':item.main,
      'info':value
      });
    });    
});
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
    <select
        ng-model="chosenOption"
        ng-options="data.info as data.info group by data.type for data in selectedData">

    </select>
    <div>
        Selected value: {{chosenOption}}
    </div>
</div>

Answer 5

Answer №3

After some experimenting, I was able to find a solution with just a small adjustment:

This is what I attempted:

<div ng-controller="myCtrl">
<select ng-model="myOption" ng-options="value.sub group by value.primary for value in data2">

I also restructured my nested JSON like this:

function myCtrl($scope) {
   datas = [{
        "primary": "white",
        "sub": ["white 1", "white 2", "white 3"]

    },{
        "primary": "black",
       "sub": ["black 1", "black 2", "black 3"]
    }];
   $scope.data2 = [];
   datas.forEach(function(entry){
     entry.sub.forEach(function(sub){
        $scope.data2.push({primary:entry.primary,sub:sub})
    });
 });
};

You can view the fiddle here: http://jsfiddle.net/jm6of9bu/658/

Answer 6

After some experimenting, I was able to find a solution with just a small adjustment:

This is what I attempted:

<div ng-controller="myCtrl">
<select ng-model="myOption" ng-options="value.sub group by value.primary for value in data2">

I also restructured my nested JSON like this:

function myCtrl($scope) {
   datas = [{
        "primary": "white",
        "sub": ["white 1", "white 2", "white 3"]

    },{
        "primary": "black",
       "sub": ["black 1", "black 2", "black 3"]
    }];
   $scope.data2 = [];
   datas.forEach(function(entry){
     entry.sub.forEach(function(sub){
        $scope.data2.push({primary:entry.primary,sub:sub})
    });
 });
};

You can view the fiddle here: http://jsfiddle.net/jm6of9bu/658/

Answer 7

Answer №4

It seems like there might be some confusion about what you're looking for, but

If you'd like the sub values to be displayed instead, try changing val.primary to val.sub before grouping

<div ng-controller="myCtrl">
    <select
        ng-model="myOption"
          ng-options="val.sub group by value.primary for value in datas">

    </select>
    <div>
       Selected value: {{myOption}}
    </div>
</div>

Answer 8

It seems like there might be some confusion about what you're looking for, but

If you'd like the sub values to be displayed instead, try changing val.primary to val.sub before grouping

<div ng-controller="myCtrl">
    <select
        ng-model="myOption"
          ng-options="val.sub group by value.primary for value in datas">

    </select>
    <div>
       Selected value: {{myOption}}
    </div>
</div>

Tips for choosing data from a nested JSON array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is preventing me from accessing these attributes using "${array[a].name}"?

I am facing a challenge with AngularJS where I am unable to navigate between pages using the

obtaining user information from API using the x-api-key

Initiating parameterized Jenkins build utilizing Jersey REST with JSON parameters

There was an issue encountered while attempting to add concurrently to the package.json

Validating Arrays of Input Elements using JQuery

What is the method in JavaScript to display the information stored in a title attribute?

I'm having trouble extracting image bytes from my JSON array, could someone lend me a hand?

Unable to delete product from shopping cart within React Redux reducer

Error displaying cookies when loading in browser

Submitting a Complex JSON Object through a URL with Javascript

Angular UI.Router's $state templates use $rootScope for ng-models

What steps should I take to generate a 2-Dimension Input Array from scratch?

What is the best way to merge two JSON objects linked by a foreign key in Angular?

Tips for preventing a React component from scrolling beyond the top of the page

Building a Nested JSON Structure with Python Pandas

Is it true that Javascript does not allow for saving or outputting actions?

Learn how to implement RSS into your Next.js MDX Blog by integrating the `rss` module for Node JS. Discover the process of converting MDX content to HTML effortlessly

Guide on integrating AngularJS routes with Express (Node.js) to handle requests for a new page

Retrieving data from JSON column is taking an unusually long time