I am calling my WCF webservice which basically Serializing my Class and returing JSON using Newtonsoft.
Following is my JSON response which i am trying to use in AngularJS.
[{"OptionListId":{"Options":[{"OptionId":1,"OptionName":"Yes","IsActive":true},{"OptionId":2,"OptionName":"No","IsActive":true}],"OptionListId":1,"OptionListName":"YesNo","IsActive":true},"QuestionId":2,"QuestionName":"What is your name?","QuestionType":"text","ShortText":"Short Data","IsActive":true,"GroupsList":null}]
I have assigned it to $scope.data.
$http.get("http://localhost:52626/Service1.svc/GetQuestions").then(function (response) {
$scope.data = angular.fromJson(response.data);
console.log($scope.data);
});
Now when i am trying to use it inside ng-repeat it is not working.
<div class="form-group" ng-repeat="d in data">
<label>{{d}}</label>
</div>
Error which is showing in browser is as per following.
Error: angular.js:9778 Error: [ngRepeat:dupes]
Use ng-repeat="d in data track by $index". If you didn't use track by $index, It will throw the error because of duplicates. Even you can't push in to the data if you didn't mention track by $index.
The only mistake i was doing was, i need to do angular.fromJson first to serialize it. and then i needed it to parse using JSON.parse for making it Json Object.
Rest of the things are ok.
Related
I'm trying to get ngFor to iterate through an array. Realized it's not doing anything whatever I type.
<p ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
Which apparently is very wrong doesn't return any errors. Anyone have a clue?
Should be
<p *ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
for more info
https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
Update
try by printing above *ngFor
{{tempAahsbdkasjbdnpplicants | json}}
by printing this you will get to know that your JSON is available or not
The * is missing before ngFor. Try this:
<p *ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
It should be,
<p *ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
ngFor is a directive in angular2. you can wrap up your content in a template tag and apply the directive to it and you should get the expected error
eg:
<template ngFor [ngForOf]="episodes" let-episode>
<app-for-example [episode]="episode">
{{episode.title}}
</app-for-example>
</template>
*ngFor is a syntactic sugar for this exact directive. Internally, *ngFor processed as follows :
1. The tag is wrapped in a <template> tag
2. *ngFor is then converted in a directive syntax ngFor and applied to the <template> tag
I guess you must have been referring some example/tutorial and missed this part
Missed *
<p *ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
It is a standard maintained by Angular developer team . More details in the docs
Note: * represents the structural directives.
I assume your component would looks this, where you have an array associated with the component
export class SomeComponent {
somearray: string[];
}
and in your html you can access this array to show a repeating element as follows,
<p *ngFor="let applier of somearray">{{applier}}</p>
But in your case I assume that you have deliberately put an invalid array name as follows and expect an error to be thrown at run time
<p *ngFor="let applier of tempAahsbdkasjbdnpplicants">{{applier}}</p>
But in this case angular does not throw an error and that is the normal behavior. When ever you used a variable name like "tempAahsbdkasjbdnpplicants" which is not included in the scope, angular assume it as an 'undefined' value.When you try to iterate over the 'undefined' or 'null' variables using the *ngFor, Angular just simply ignore the iteration without trowing an error.
I need to display this values of an property inside an json object with ng-repeat.
"id_products" : [5730827476402176: 2, 5173045979250688: 1, 5735995932672000: 2]
I am using ng-repeat on <tr> inside a table. If the property is a simple array I can display without problems but as the object showed above I am just getting [].
This is a snippet of my code:
<tbody>
<tr class="animate-repeat" ng-repeat="item in sales|orderBy: 'name'|filter: filter">
<th> {{item.id_products}}</th>
.....
I tried nested ng-repeats but I get the same result.
What is the right way to display this object?
Thanks.
see the ng-repeat documentation - "The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one.
If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat"
https://docs.angularjs.org/api/ng/directive/ngRepeat
This object data structure is not javascript or json valid.
I have an AngularJS controller with the following function:
$scope.getExampleValue = function(exampleId) {
// calculate a value using underscore's _.where()
// clause against two JSON arrays on the $scope
// and the exampleId parameter passed in
return computedValue;
}
The function's parameter (exampleId) is rendered from the server, so the resulting HTML looks like this:
<div ng-controller="ExampleController">
...
<span>{{ getExampleValue(3) }}</span>
<span>{{ getExampleValue(4) }}</span>
<span>{{ getExampleValue(5) }}</span>
...
</div>
The problem I have is that AngularJS doesn't know to call getExampleValue() again when the JSON arrays used in the function have changed: they're 2 simple JSON arrays, new JSON items can be added or removed, or properties of existing JSON items in either array can be modified which affect the result.
I've looked at $scope.watch() and $scope.watchCollection() but I'm unsure how I can use them without changing my approach to bind against already computed values rather than against the function I prefer.
Essentially I think I'm asking how to notify AngularJS that a complicated bound value has changed, then I could wrap that notification up in a $scope.watch()..
Thanks for your help.
You are looking for $scope.$apply:
When you change the JSON asyncly, run:
$scope.$apply(function () {
// update the properties on $scope
});
Can someone help me pull the unique object name from contents ($Id). I'm able to loop over $scope.data in my template with ng-repeat but I can't get the name of that array. Need this to build a URL reference.
In short, how do I get "2015-02-27T20:24:11-06:00"? I can pull out item.count, item.handle, item.img_url, but {{item.$id}} doesn't work.
obj.$asArray();
obj.$asObject();
If you fetch the data $asArray() and save it on $scope.data you should simply be able to get the $id as you describe.
<div ng-repeat="item in data">
<p>id: {{item.$id}}</p>
</div>
However, I can't help but notice that your casing in $Id is wrong.
I am trying to include angular.js in my project which is created using Symfony 2.3.
I converted the result array to json using json_encode function in controller
function displayAction(){
$user= $this->getDoctrine()->getRepository('DemoBundle:Users');
$result = $user->findAll();
$res= json_encode($result);
$res->header->set('Content-Type', 'application/json');
return $this->render('DemoBundle:Demo:demoView.html.twig',array('results'=>$res));
}
to initialise it in ng-init,
<div ng-init= "result= {{results}}"></div>
<table>
<tr ng-repeat="res in result">
<td>[[res.id]]</td>
<td>[[res.username]]</td>
<td>[[res.password]]</td>
</tr>
</table>
but it gives me an empty array of json.
I guess it has no sense return a json to process it in the Twig template. Maybe you need to ask for the json resource on angularjs controller (with $http or via $resource) and get the data from the model (no ng-init).
If you still want to do it, maybe you get some help from here: Decoding JSON in Twig