angularjs ng-repeat nested array into one unique list

Question

I am trying to get the list of all values from a nested array for all objects into one list.
I have the following json file structure:

{
    "booklist": {
        "fiction": [
          {
            "key": "book1",
            "value": "bookvalue1"
          },
          {
            "key": "book2",
            "value": "bookvalue2"
          }
        ],
        "romance": [
          {
            "key": "book3",
            "value": "bookvalue3"
          },
          {
            "key": "book4",
            "value": "bookvalue4"
          }
        ],
        "thriller": [
          {
            "key": "book5",
            "value": "bookvalue5"
          },
          {
            "key": "book6",
            "value": "bookvalue6"
          }
        ]         
}

I am trying (what i have tried) to read the list of all books in my dropdown menu:

<ui-select name="books" ng-model="model.books" theme="selectize" required>
    <ui-select-match> {{$select.selected.value}} </ui-select-match>
    <ui-select-choices
            repeat="r.key as r in booklist | filter: $select.search">
        <div ng-bind-html="r.value | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

so that the dropdown menu will look like this:

bookvalue1
bookvalue2
bookvalue3
bookvalue4
bookvalue5
bookvalue6

and in another input element, i want to get the category of the selected book above:

<input type="text" name="category" ng-model="model.category" class="form-control" disabled="disabled" value="??"/>

how to get the value for the category of the selected book above?

The ultimate goal is to pass the category value and the book value into my model separately.

important note:

i am not allowed to change the json structure, it should remain as it is. I just have to change and adapt the code to read the info the right way.

Map a flattened array in your controller

charlietfl
– charlietfl

2017-02-15 11:00:26 +00:00
Commented Feb 15, 2017 at 11:00 — charlietfl
– charlietfl, Commented Feb 15, 2017 at 11:00
Or create new filter for this

VadimB
– VadimB

2017-02-15 11:08:17 +00:00
Commented Feb 15, 2017 at 11:08 — VadimB
– VadimB, Commented Feb 15, 2017 at 11:08

fingerpich · Accepted Answer · 2017-02-17 18:41:17Z

3

+150

You could use this code, but i suggest for grouping books

answered Feb 17, 2017 at 18:41

fingerpich

9,4002 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

passion Over a year ago

why is the category model empty after selecting? thanks

fingerpich Over a year ago

Hi @passion, do you mean ctrl.selectedValue is empty after selecting?

passion Over a year ago

i would like to have the following as a result of the selection in the first dropdown menu, the second input field is unnecessary: {{ctrl.model.category}} which will be fiction for example, and {{ctrl.model.value}} will be bookvalue1

passion Over a year ago

as you can see in my original post, my ultimate goal is to pass the value and category to another ng-model as the value for this new ng-model. for example, ng-model="model.category" will get its default value from the above dropdown selection.

Indhu · Accepted Answer · 2017-02-15 11:58:16Z

0

You can add some custom filter like below:

array1 = {
"booklist": {
    "fiction": [
      {
        "key": "book1",
        "value": "bookvalue1"
      },
      {
        "key": "book2",
        "value": "bookvalue2"
      }
    ],
    "romance": [
      {
        "key": "book3",
        "value": "bookvalue3"
      },
      {
        "key": "book4",
        "value": "bookvalue4"
      }
    ],
    "thriller": [
      {
        "key": "book5",
        "value": "bookvalue5"
      },
      {
        "key": "book6",
        "value": "bookvalue6"
      }
    ]

}

.filter('filter', function(){
    return function(array1, searchTxt){
    angular.forEach(array1, function(v,k){
        if(v.value.indexOf(searchTxt) > -1){
          angular.forEach(v, function(v1, k1){
              return v1;
          })
      }
    })
  }
})

Note: I have not tested, kindly do the needed changes.

edited Feb 15, 2017 at 11:58

answered Feb 15, 2017 at 11:25

Indhu

3991 gold badge6 silver badges19 bronze badges

4 Comments

passion Over a year ago

can you explain more what to do? by the way, i am not allowed to change the array strucutre in the json file, it should remain the same.

Indhu Over a year ago

Sorry json format i have updated is wrong. now its corrected.

Indhu Over a year ago

Is your output bookvalue1 bookvalue2 bookvalue3 bookvalue4 bookvalue5 bookvalue6 should from either filter or highlight?

passion Over a year ago

so what should the ng-repeat should look like then? can you give a full example answer, please?

Ankur · Accepted Answer · 2017-02-15 11:06:19Z

-2

Combine array if you want to display in single dropdown. like this

 {
        "booklist": {
              {
                "key": "book1",
                "value": "bookvalue1"
              },
              {
                "key": "book2",
                "value": "bookvalue2"
              },
              {
                "key": "book3",
                "value": "bookvalue3"
              },
              {
                "key": "book4",
                "value": "bookvalue4"
              },
              {
                "key": "book5",
                "value": "bookvalue5"
              },
              {
                "key": "book6",
                "value": "bookvalue6"
              }

}

or use

<ui-select-choices
            repeat="r.key as r in booklist.fiction | filter: $select.search">
        <div ng-bind-html="r.value | highlight: $select.search"></div>
    </ui-select-choices>

answered Feb 15, 2017 at 11:06

Ankur

3,2095 gold badges30 silver badges57 bronze badges

4 Comments

passion Over a year ago

i want the list of all books, not just the fiction ones.

Ankur Over a year ago

That's why i first suggested to combine three array because you can't use multiple ui-select-choices in one ui-select.

passion Over a year ago

yes, that is why i am not also allowed to merge them all into one array. it should be as it is.

Ankur Over a year ago

What you are asking is impossible. as i mentioned above you can't bind multiple array in single select.

Collectives™ on Stack Overflow

angularjs ng-repeat nested array into one unique list

important note:

3 Answers 3

4 Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

important note:

3 Answers 3

4 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related