0

I have the following json syntax:

{
    "count": 90,
    "results": [
     {
         "tra_keywords": [
             "car",
             "plane",
             "Bike",
             "boat"
             ],
         "tra_title": "Jack"
     },
     {
         "tra_keywords": [
             "blue",
             "red",
             "green",
             "silver"
             ],
         "tra_title": "Averell"
     },
     {
         "tra_keywords": [
             "square",
             "column",
             "square",
             "line"
         "tra_title": "Joe"
     }
     ]

}

I would like to display all my tra_keywords in a select. I use this:

<select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="resultats.tra_keywords for resultats in resultatsJSON.results"></select>

It works but my select display all my keywords in the field. Select display is:

first option:     car,plane,Bike,boat
second option:    blue,red,green,silver
...               square,column,square,line

I would like to have this one by one. Select display i would like:

first option:      car
second option:     plane
...                Bike
                   boat
                   blue
                   red
                   green
                   silver
                   square
                   column
                   line

How can i do that ? I think my ng-options is incorrect. Thanks

I receive my data with:

myApp.controller("myappCtrl",   ['$scope','$http',function($scope,$http) {
   $http.get('../testANGULAR/json/flux.json')
     .success(function(data){
      scope.resultatsJSON=data;
})....
Improve this question
4
  • 1
    possible duplicate of Using AngularJS, how do I bind a <select> element to an attribute that updates via a service Commented Oct 23, 2014 at 14:17
  • Show how you receive data. Commented Oct 23, 2014 at 14:21
  • Do you want to show all tra_keywords from all your results objects ? Commented Oct 23, 2014 at 14:27
  • yes from all my results objects Commented Oct 23, 2014 at 14:28

3 Answers 3

Reset to default
1 

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.data = {
    "count": 90,
    "results": [{
      "tra_keywords": [
        "car",
        "plane",
        "Bike",
        "boat"
      ],
      "tra_title": "Jack"
    }, {
      "tra_keywords": [
        "blue",
        "red",
        "green",
        "silver"
      ],
      "tra_title": "Averell"
    }, {
      "tra_keywords": [
        "square",
        "column",
        "square",
        "line"
      ],
      "tra_title": "Joe"
    }]

  };

  $scope.getKeywords = function() {

    var keywords = [];

    angular.forEach($scope.data.results, function(obj) {


      angular.forEach(obj.tra_keywords, function(keyword) {

      
        if (keywords.indexOf(keyword) < 0)

          keywords.push(keyword);

      });

    });

    return keywords


  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">


    <select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="r for r in getKeywords()"></select>

    <p>Selected: {{rechercheKeywords}}</p>
  </div>
</div>

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

6 Comments

your answer works, thanks, but i missed to say i have multiple results and want to display all. Not only results[0]
@Davy can you please udpate your question how exactly looks your json and whar do you want to have is your drop down
topic updated with multiple results in json and what i want to have in my selec
@Davy just last one do you want to have multiple selects on page for each node or one select contains all keywords from all tra_keywords
I want to have only one select who contains all keywords from all my tra_keywords
|
0

You're right, your ng-options is incorrect. It should be:

ng-options="keyword for keyword in resultatsJSON.results[0].tra_keywords"

EDIT:

Reading your answer to one of the comments, if you want to create a list from all the results, then you need to flatten the data. ng-options expects an array of items to iterate over, or an object - to iterate over properties.

Here's a plunker with how to flatten

Improve this answer

4 Comments

Ok, it works fine for my first results (results[0]). But like you said, how to flatten the data to display the other results ?
By iterating over the results and collecting all the tra_keywords into an array (de-duplicating, if needed).
well, i try many solutions to correctly flatten my tra_keywords array without success. I already use the angular-filter (github.com/a8m/angular-filter) in my project who have some interesting filters (flatten ,map) but i always fail to use it the proper way.
Updated the answer with a plunker
0

This solve my problem, thanks to all, specially sss and New Dev

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.data = {
    "count": 90,
    "results": [{
      "tra_keywords": [
        "car",
        "plane",
        "Bike",
        "boat"
      ],
      "tra_title": "Jack"
    }, {
      "tra_keywords": [
        "blue",
        "red",
        "green",
        "silver"
      ],
      "tra_title": "Averell"
    }, {
      "tra_keywords": [
        "square",
        "column",
        "square",
        "line"
      ],
      "tra_title": "Joe"
    }]

  };

  $scope.getKeywords = function() {

    var keywords = [];

    angular.forEach($scope.data.results, function(obj) {


      angular.forEach(obj.tra_keywords, function(keyword) {

      
        if (keywords.indexOf(keyword) < 0)

          keywords.push(keyword);

      });

    });

    return keywords


  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">


    <select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="r for r in getKeywords()"></select>

    <p>Selected: {{rechercheKeywords}}</p>
  </div>
</div>

Improve this answer

Comments