json,angularjs,angularjs-ng-repeat,ng-repeat,ng-options , Bind ng-options to nested array within JSON object, within ng-repeat


Bind ng-options to nested array within JSON object, within ng-repeat

Question:

Tag: json,angularjs,angularjs-ng-repeat,ng-repeat,ng-options

This is my first question, so please be gentle on me! I hope you can help.

I am trying to define a select box (dropdown) within my HTML view using ng-repeat, so that I can create a select for each item in an array. I have successfully achieved this, but my problems come when I try to get the options I need into each of the selects.

The array I am using{ "field1": 1, "field2": "Value01", "field3": "Value02", "refFields": [ { "fieldId": 100, "fieldValue": "fieldValueA" }, { "fieldId": 101, "fieldValue": "fieldValueB" } ] }, etc...

I need a select per item in the 'top level' of the array, and in each select box the values that should appear should be the fieldValue from the refFields nested array.

My current (broken) code products some pretty rubbish results. Here's the code:

<div ng-repeat="fk in fks">
        <ng-form name="fksForm">
            <select name="fkselect" ng-model="fk" ng-options="item as item.refFields for item in fks">                
            </select>
        </ng-form>
    </div>  

Could anybody provide me with some insight into whether this is possible? I don't think that flattening the data is an option for this particular application. I've tried quite a few different things including passing an index to the ng-options, which as you might expect produced some pretty dodgy results. I also tried this, which doesn't give me any useful output.

ng-options="item as item.refFields.fieldValue for item in fks"

Here's my JSFiddle: ng-option nested JSON Array within ng-repeat

Many thanks in advance for any suggestions!


Answer:

With Underscore.js you could prepare your data for ng-options.

For me it looks pretty complicated. I would re-think if you could modify your data structure. I can't recommend a structure because I don't understand how the final result will look like.

I've created two arrays one with the field names that's used for the ng-repeat and the second array holds the refFields for the options.

With $index you can get the current index of the ng-repeat to access the refFields.

I'm not sure if I've created this correctly because I don't know what you're doing with the field1, field2, field3 values.

Please have a look at this jsfiddle or the demo below (same code).

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

myApp.controller('DetailsCtrl', ['$scope', function($scope) {
    var data = [
  {
    "field1": 1,
    "field2": "Value01",
    "field3": "Value02",
    "refFields": [
      {
        "fieldId": 100,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 101,
        "fieldValue": "fieldValueB"
      }
    ]
  },
  {
    "field1": 2,
    "field2": "Value03",
    "field3": "Value04",
    "refFields": [
      {
        "fieldId": 102,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 103,
        "fieldValue": "fieldValueB"
      },
      {
        "fieldId": 104,
        "fieldValue": "fieldValueC"
      },
      {
        "fieldId": 105,
        "fieldValue": "fieldValueD"
      }
    ]
  },
  {
    "field1": 3,
    "field2": "Value05",
    "field3": "Value06",
    "refFields": [
      {
        "fieldId": 106,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 107,
        "fieldValue": "fieldValueB"
      }
    ]
  }
];
    $scope.fks = _.map(data, function(field) {
        return _.omit(field, ['field1', 'field2', 'field3']).refFields; // only refFields
    });
    console.log($scope.fks);
    $scope.fields = _.map(data, 
    function(field) {
        console.log(field);
        return [field.field1, field.field2, field.field3];
    }
    );
    //console.log(results)
    $scope.dropdown = {};
    
    $scope.changedValue = function(index) {
        console.log(index, $scope.dropdown);
        console.log($scope.dropdown[index]);
    }
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DetailsCtrl">
<form novalidate class="form-vertical" ng-show="!loading" name="detailsForm" ng-controller="DetailsCtrl">
    <!--<pre>{{fks |json}}</pre>-->
      <div ng-repeat="fk in fields">
          <ng-form name="fksForm">
              <label>{{fk}}</label>
                <select name="fkselect" ng-model="dropdown[$index]" ng-options="item.fieldValue for item in fks[$index]" ng-change="changedValue($index)">
                </select>
            </ng-form>
        </div>  
</form>
</div>


Related:


remove char from string with angular


javascript,angularjs
I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

Socket.IO message doesn't update Angular variable


javascript,angularjs,node.js,sockets
I have a socket.io client-server setup with AngularJS running on the client. // Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

Replacing elements in an HTML file with JSON objects


javascript,json,replace
I am writing some Javascript to: Read in and Parse a JSON file Read in an HTML file (created as a template file) Replace elements in the HTML file with elements from the JSON file. It is only replacing the first element obj.verb. Can someone please help me figure out...

Angular-strap data-trigger='focus' not working


javascript,html,angularjs,angular-strap
the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

Why i get can not resolve method error in class android?


android,json
I use this tutorial: JSON and part of code to this: protected String doInBackground(String... urls) { TextView lbl=(TextView) findViewById(R.id.provCODE); person = new Person(); person.setName(lbl.getText().toString()); //person.setCountry("1853"); //person.setTwitter("1892"); return POST(urls[0],person); } but in the this line: person.setName(lbl.getText().toString()); i get this error: Can not resolve method. How can i solve that?what happen? my...

How do I add a class on ng-click from layout?


angularjs
Here is the page layout: <li class="dropdown"> <ul class="submenu"> <li ng-click="SetActiveMenuForPersonalInfo();"> <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a> </li> </ul> </li> When a user clicks on my account, they get this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview This is the function in the controller: $scope.SetActiveMenuForPersonalInfo = function () { $scope.activeMenu = 'Settings'; $scope.activeLink = "PersonalInfo"; console.log("Active menu:...

$scope variable does not update within $interval function


javascript,angularjs,angularjs-scope
I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

Codeigniter Select JSON, Insert JSON


json,codeigniter,select,insert,routing
I have very simple users database: user_id, user_name, user_email My model this: class Users extends CI_Model { private $table; private $table_fields; private $table_fields_join; function __construct() { parent::__construct(); $this->table = 'users'; $this->table_fields = array( $this->table.'.user_id', $this->table.'.user_name', $this->table.'.user_email' ); $this->table_fields_join = array(); } function select(){ $this->db->select(implode(', ', array_merge($this->table_fields, $this->table_fields_join)));...

Create angular page in Django to consume data from JSON


angularjs,django,django-templates
In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

Link to another resource in a REST API: by its ID, or by its URL?


json,api,rest,api-design,hateoas
I am creating some APIs using apiary, so the language used is JSON. Let's assume I need to represent this resource: { "id" : 9, "name" : "test", "customer_id" : 12, "user_id" : 1, "store_id" : 3, "notes" : "Lorem ipsum example long text" } Is it correct to refer...

Pre-Select of an option in a select not working


angularjs
I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

Angular $http and Fusion Tables in IE9


javascript,angularjs,internet-explorer-9,google-fusion-tables
I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

navbar disappears but no dropdown


angularjs,bootstrap
So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

calling one controller from another controller


angularjs
I have 2 controllers and I am calling the second controller from the function of first controller $scope.open = function () { var modal = $modal.open({ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

How can this be undefined in the constructor of an Angular config class?


angularjs,constructor,typescript,undefined,this
I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

REST API with token based authentication


angularjs,codeigniter,api,rest,token
I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

Is there a way to fire an event every time an ajax call in made in AngularJS?


javascript,ajax,angularjs,express
What I'm trying to do is every time a call to the backend is made, I want a spinner to load up with a dark overlay. I know I can do this by simply running the spinner before the call is made, but I'm working with multiple developers and I...

AngularJS dynamically call function


javascript,angularjs
at this point, I'm new to AngularJS. This works: scope.$apply(scope.hideTooltip()); But calling the function dynamically does not work: scope.$apply( scope.$eval(attrs.ngEnter, {'event': event}) ); HTML: <input type="text" ng-model="value" ng-enter="hideToolTip()" /> The enitre directive: app.directive('ngEnter', function() { return function(scope, element, attrs) { console.log(scope.hideTooltip()); element.bind("keydown keypress", function(event) { if(event.which === 13) { console.log(attrs.ngEnter);...

Use JSON file to insert data in database


javascript,json,mongodb,meteor,data
I'm using my JSON file like this to insert data in my collection : var content = JSON.parse(Assets.getText('test.json')); console.log('inserting...'); Profiles.insert({ user: id, data:content }; But I would like to have a "data's tree" like that : [ user: "rtegert23423131", firstname:"test", surname:"test2", // ... ] Not like that : [ user:...

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

angular.js - simplest way to handle click inside controller


javascript,jquery,html,angularjs
is there any better way of handling clicks inside a controller than this? <div ng-controller="SomeController> <a href="/#!/something" ng-click="doTheSame()">link1</a> <a href="/#!/something" ng-click="doTheSame()">link2</a> <a href="/#!/something" ng-click="doTheSame()">link3</a> .. <a href="/#!/something" ng-click="doTheSame()">link99</a> </div> in jQuery I would do something like: $('div > a').on('click', function() { // do some stuff }); ...

Check for duplicates in JSON


javascript,jquery,json,duplicates
I have a json object: var object1 = [{ "value1": "1", "value2": "2", "value3": "3", }, { "value1": "1", "value2": "5", "value3": "7", }, { "value1": "6", "value2": "9", "value3": "5", }, { "value1": "6", "value2": "9", "value3": "5", }] Now I want to take each record out of that...

success and error function in the controller for a service


javascript,angularjs,angularjs-service,angularjs-http,angularjs-promise
I have the following code in a service and I am calling fetchData function from the controller. Service app.service("geturl", function($http) { urllist = []; geturl.fetchData = function() { var data = []; for (i = 0; i < urllist.length; i++) { (function(index) { return $http.get(geturl.urllist[index], { timeout: 8000 }) .then(function(response)...

Getting generic anchor text on click with angularJS/jQuery returns empty string


jquery,angularjs
I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

Can't save json data to variable (or cache) with angularjs $http.get


json,angularjs,web-services,rest
I have weird angularjs problem. I'm trying to fetch data from Rest Webservice. It works fine, but I can't save json data to object. My code looks like: services.service('customerService', [ '$http', '$cacheFactory', function($http, $cacheFactory) { var cache = $cacheFactory('dataCache'); var result = cache.get('user'); this.getById = function(id){ $http.get(urlList.getCustomer + id).success(function(data, status,...

function is undefined if no module is declared in Angular


angularjs
I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

Iframe does not show scrollbar


html,css,angularjs,iframe,ionic
Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

How to use a service with Http request in Angular JS


javascript,angularjs
I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

Fatal error catched by register_shutdown_function and update json_encode


php,json,fatal-error
I can catch a fatal error with register_shutdown_function('shutdown') function shutdown(){ $error = error_get_last(); $result['message'] = $error['message']; } and I have an echo json_encode($result); Unfortunately this echo json_encode shows nothing because json is not updated with the message of the fatal error. What can I do to fix this?...

How to add class on ng-click?


angularjs
I have this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview How can i add class "active-link" on: @Translate("PERSONAL_INFORMATION") @Translate("NOTIFICATIONS") @Translate("CHANGE_PASSWORD") @Translate("GAME_SETTINGS") ...

Can't get angular.js to loop through array and post to html


angularjs,ng-repeat
Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

$http.get returns actual php script instead of running it (yeoman, grunt)


php,angularjs,pdo,gruntjs
I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

AngularJS: Adding ng-click within element.append


angularjs,directive
Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

KendoUI Grid - Complex JSON with inconsistent keys


javascript,json,kendo-ui,kendo-grid
I know this is probably been asked before, but having tried to find an answer - I am guessing either I am not comprehending some of the answers right, or I am looking at the problem all wrong. I am using a complex SLC loopback query - and the api...

AngularJS, Animate on change: directive $watch not called


javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

Improve slow angular directive


javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

Passing params to an angular service from a controller?


javascript,angularjs,service,controller,params
I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

Uncaught error: Invalid type for google table column


javascript,json,google-maps,google-visualization
I recently started using google visualization due to its simplicity. But while implementing in my recent project i seem to have run into a bit of trouble. The program shown is used to pull data from a JSON object and utilize it to display data in the google tables. Now...

Getting CROS Error even after adding header in node.js for Angular js


javascript,angularjs,node.js
I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load http://127.0.0.1:8085/issues. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

Merge and sum values and put them in an array


javascript,arrays,angularjs,foreach
I'm retrieving values from an external source and apply a foreach loop to the results, with the code below. angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { console.log(value.firstname + ' - ' + value.distance); } else { //do nothing } }); The result is console...

Insert data in collection at Meteor's startup


javascript,json,meteor,data,startup
I would like to insert data at Meteor's startup. (And after from a JSON file) At startup, I create a new account and I would like to insert data and link it to this account once this one created. This is the code that creates the new account at startup:...

JQuery mutiple post in the same time


javascript,php,jquery,json
I have three functions ,and every function post to special php page to get data.. and every function need some time because every php script need some time .. function nb1() { $.post("p1.php", { action: 1 }, function(data) { console.log(data); }, "json") .fail(function(data) { console.log("error"); }); } function nb2() {...

access the json encoded object returned by php in jquery


php,jquery,ajax,json
I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...

UI-Router : Prevent access to parent state


angularjs,angular-ui-router,state
I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

Serializing a java bean into a cookie: Is it bad?


java,json,cookies
In the organization that i work for, there was a serious debate about the following. Scenario: There is a POJO with 6 different properties all are of type Strings. These values need to be persisted as cookies so that it can be picked back when someone does a booking on...

do calculation inside JSONArray in Java


java,arrays,json
I have a simple issue but cannot solve it as I am not very good at algorithm! I have an JSONArray in this form: [{"values":[{"time":1434976493,"value":"50"}, {"time":1434976494,"value":"100"}],"counter":"counter1"}, {"values":[{"time":1434976493,"value":"200"}, {"time":1434976494,"value":"300"}],"counter":"counter2"}, {"values":[{"time":1434976493,"value":"400"}, {"time":1434976494,"value":"600"}],"counter":"total"}] What I want to do is to get the integer value for counter 1 and counter 2 and then divide...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG


javascript,angularjs,restangular
I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

Response 200 OK but Jquery shows error?


javascript,jquery,json
I am stuck in kind of a weird problem where I am trying to make a JSONP request to the Open Weather history API to get the weather information for the previous years on the a particular date. fetchHistoryUrl = 'http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125'; $.ajax({ method: 'get', url: fetchHistoryUrl, success: function(response){ console.log(response); },...