AngularJS ngRepeat orderBy not working in Chrome - angularjs

When the controller is initially loaded with data, I want the rows to appear in the same order they were added to my JSON.
When I do this in IE and FF, the rows intially appear in the order they were added, but when I do it in Chrome, the middle item (in this case row #150) appears at the beginning of the list. Why is this?
I have Json response,
[
{
"code": "4001",
"description": "Transactions",
"labelName": null,
"target": null,
"sortOrder": 100,
"iconTarget": "fa-inr"
},
{
"code": "4053",
"description": "Cash Management",
"labelName": null,
"target": null,
"sortOrder": 150,
"iconTarget": "fa-money"
},
{
"code": "4053",
"description": "Cash Management",
"labelName": null,
"target": null,
"sortOrder": 500,
"iconTarget": "fa-money"
}
]
template
<ul class="panel sidebar-nav" ng-repeat="item in model | orderBy: -item.sortOrder">
<li>child links data</li>
<li>child links data</li>
<ul>

You're close, just missing single quotes around your expression. Also, you don't need to refer to the ng-repeat name "item", only its attribute. Your code should read something like
<ul ng-repeat="item in model | orderBy: 'sortOrder'">
See this plunker.

change the angularjs version 1.5.x. It works for me.

Related

Iterating an array inside of an array, in iterated component in Angular

I have made a component that is iterated by an array. Then the data inside of that array is being pushed into each iterated component. I am able to display data from the array, but unable to display data from an array that is inside of the array.
Here is an example of the data:
[
{
"questionArray": [
{
"questionText": "How many cats do you have? ",
"questionId": "",
"questionControlTypeId": "",
"questionSequence": "",
"imageUrl": null,
"quizId": "",
"isEditing": false,
"questionAnswers": [
{
"answer": "1",
"correctAnswer": false,
"questionAnswerId": "",
"questionId": "",
"sortOrder": ""
},
{
"answer": "3",
"correctAnswer": false,
"questionAnswerId": null,
"questionId": null,
"sortOrder": null
},
{
"answer": "4",
"correctAnswer": false,
"questionAnswerId": null,
"questionId": null,
"sortOrder": null
},
{
"answer": "5",
"correctAnswer": false,
"questionAnswerId": null,
"questionId": null,
"sortOrder": null
}
]
}
],
"id": 1
} ]
There is more than one object of this data.
Here's what I'm attempting to do with it.
<div *ngFor="let example of exampleArray$">
<div *ngFor="let ex of example.nestedData">
<example-component
exampleQuestion="{{ex.questionText}}"
exampleAnswer="{{ex.questionAnswers}}"
></example-component>
</div>
</div>
Then I'm using #Input in my TS file for "example-component" to get that data and use it in the HTML.
#Input() exampleQuestion;
#Input() exampleAnswer;
I'm using {{questionText}} to display my text, and it's working just fine.
The issue is with "questionAnswers". Which itself is an array, and not only is it an array, it's also going to be used on a reactive form that has dynamic controls.
<div *ngFor="let htmlexample of questionAnswers">
--this would be where my dynamic input field is--
<div>
However, instead of getting back multiple fields, I am getting this error:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
I am also getting [object Object] in my console.logs.
My console.log of my observable (which is being maintained by BehaviorSubject) is logging the array appropriately.
Thank you in advance for any insight on this issue.
I don't think you need interpolation {{ }} and you should use property binding [ ] to bind the exampleQuestion and exampleAnswer to ex.questionText and ex.questionAnswers respectively. Try
<example-component
[exampleQuestion]="ex.questionText"
[exampleAnswer]="ex.questionAnswers"
></example-component>
Then inside example-component:
<div *ngFor="let htmlexample of exampleAnswer">
--this would be where my dynamic input field is--
<div>
Source: https://angular.io/guide/inputs-outputs#configuring-the-parent-component

ng-repeat not displaying the individual items

When running the code below in my angular 1.x app I can see the first line returns the following :
[ { "id": 121, "valid": true }, { "id": 123431, "valid": false } ]
However when I try to display the valid or id property in the ng-repeat on the following line I see nothing whatsoever? What am i doing wrong??
{{ allItems | json }}
<div ng-repeat="item in allItems">
{{ item.valid }}
</div>

How can I get the value of nested JSON array in Ionic?

I am new to Ionic and I am trying to display nested list. I am using JSON response from the server to get all the values. This is my server response.
{
"addonCategories": [
{
"id": 24,
"name": "Cooking type",
"parent_id": 0,
"product_category": 10,
"selection": "single",
"type": "other",
"order": null,
"shows_selection": true,
"selection_type": true,
"direct_pricing": false,
"is_size": false,
"addonItems": [
{
"id": 725,
"name": "Lightly Done",
"product_id": 0,
"addon_category_id": 24,
"price": 0,
"image": "",
"attribute": null,
"main_category_id": 24,
"half_image": null,
"full_image": null,
"order": null,
"large_price": "",
"description": null,
"default_sauce": 0,
"restaurants_id": 0
},
{
"id": 723,
"name": "Regular",
"product_id": 0,
"addon_category_id": 24,
"price": 0,
"image": "",
"attribute": null,
"main_category_id": 24,
"half_image": null,
"full_image": null,
"order": null,
"large_price": "",
"description": null,
"default_sauce": 0,
"restaurants_id": 0
},
{
"id": 724,
"name": "Well Done",
"product_id": 0,
"addon_category_id": 24,
"price": 0,
"image": "",
"attribute": null,
"main_category_id": 24,
"half_image": null,
"full_image": null,
"order": null,
"large_price": "",
"description": null,
"default_sauce": 0,
"restaurants_id": 0
}
]
}
]
}
I am using following HTML code to display nested list with checkbox selection.
<ion-list class="setting-content">
<ion-list-header *ngFor="let item of (addonDetail | async)?.addonCategories" no-lines>{{item.name}}
<ion-item-group class="fst-group">
<ion-item *ngFor="let item1 of item.addonItems" no-lines>
<ion-label >{{item1.name}}</ion-label>
<ion-checkbox (click)="clickAddon(item1)" item-right></ion-checkbox>
</ion-item>
</ion-item-group>
</ion-list-header>
</ion-list>
So how can I get the names from inner JSON array addonItems?
When I run the code it gives me the names from main array (addonCategories) but not from the inner one (addonItems).
The issue is the structure of your HTML template - in short, when you have an ion-list-header, it attempts to render the text for that header in an ion-label. The presence of your nested ion-label (within your ion-item) thus breaks the template.
Instead, and per the Ionic documentation here, your ion-list-header should not contain any child ion-item elements: https://ionicframework.com/docs/api/components/item/Item/#advanced
If instead you restructure your HTML template like this, it will work:
<ion-list class="setting-content">
<ng-container *ngFor="let item of addonCategories">
<ion-list-header no-lines>{{item.name}}</ion-list-header>
<ion-item-group class="fst-group">
<ion-item *ngFor="let addOn of item.addonItems" no-lines>
<ion-label>{{addOn.name}}</ion-label>
<ion-checkbox (click)="clickAddon(addOn)" item-right></ion-checkbox>
</ion-item>
</ion-item-group>
</ng-container>
</ion-list>
Notice on line 3 that the ion-list-header is opened & closed.
Because of the need for nested *ngFor directives - which I'm guessing is why you tried to embed your ion-item elements in the header - I've used the ng-container instead. This way, you can still iterate through each "header" item's array of nested addonItems.
Working Plnkr here: https://embed.plnkr.co/RSd1MdmajLxpdZmTHk8J/

ng-repeat: every other value falsely shows as blank.

An (edited for readability) version of my json looks like this.
It's actually the reddit front page in json form:
{
"kind": "Listing",
"data": {
"modhash": "fb7jljbeer6a0dbec0b7b939c890078b5a92d221b3e2b31cec",
"children": [
{
"kind": "t3",
"data": {
"subreddit": "gifs",
"id": "66wssv",
"author": "GuacamoleFanatic",
"name": "t3_66wssv",
"subreddit_name_prefixed": "r/gifs",
"domain": "gfycat.com",
"thumbnail": "https://b.thumbs.redditmedia.com/E4FB3khTGQ_D8KP-P7KEVXpB9MzY_XDWUhtPmGnNOuE.jpg",
"subreddit_id": "t5_2qt55",
"permalink": "/r/gifs/comments/66wssv/8_year_old_tillys_first_couple_of_seconds_wearing/",
"url": "https://gfycat.com/VacantRequiredAmethystinepython",
"title": "8 year old Tilly's first couple of seconds wearing a bionic hand.",
"created_utc": 1492877987,
"num_comments": 504,
}
},
{
"kind": "t3",
"data": {
"subreddit": "IAmA",
"id": "66wut7",
"author": "JoergS",
"name": "t3_66wut7",
"subreddit_name_prefixed": "r/IAmA",
"domain": "self.IAmA",
"thumbnail": "self",
"subreddit_id": "t5_2qzb6",
"permalink": "/r/IAmA/comments/66wut7/iama_jörg_sprave_the_bald_crazy_german_who_runs/",
"url": "https://www.reddit.com/r/IAmA/comments/66wut7/iama_jörg_sprave_the_bald_crazy_german_who_runs/",
"title": "IamA (Jörg Sprave, the bald crazy German who runs \"The Slingshot Channel\" on YouTube.) AMA!",
"created_utc": 1492878607,
"num_comments": 781,
}
},
The controller is very simple:
angular.module('redditdupe').controller('frontPage', ['$scope', '$http', '$routeParams',
function frontPage($scope, $http){
$http({
method: 'GET',
url: 'https://www.reddit.com/.json'
})
.
then(
function successCallback(response)
{
$scope.children=response.data.data.children;
}
,
function errorCallback(response) {
}
);
}]);
And so is the html:
<div class="cartouche" ng-repeat="child in children">
<div ng-repeat="data in child">
<img src="{{ data.thumbnail }}"><br>
{{ data.title }} ({{ data.domain }})<br>
{{ data.created_utc * 1000 | date:'yyyy-MM-dd HH:mm:ss Z' }} {{data.author}} {{ data.subreddit_name_prefixed }}<br>
{{ data.num_comments }}<br>
</div>
</div>
However, ng-repeat shows
a blank set of results, followed by
a real set of results,
followed by another blank set,
followed by another real set
... and so on
Like this:
<--- blank line
() <--- probably the domain gfycat.com, except it's blank
null < --- dunno
<--- probably the comment count, but is blank line
8 year old Tilly's first couple of seconds wearing a bionic hand. (gfycat.com)
2017-04-22 09:19:47 -0700 GuacamoleFanatic r/gifs
1959
() <--- then the same shenanigans again
null
Seen at the March for Science (i.redd.it)
2017-04-22 09:45:18 -0700 Polymathyx r/pics
338
I've googled a lot and this doesn't seem to fit the "consumption cycle" explanation because it's not that the entire collection is displayed in sequence once, and then twice.
This is each element being cycled twice individually, first blank then filled out.
I've been slamming my head against the desk for days.
What is the cause and, more importantly, what is the solution please?
Very grateful for any suggestions.

How do I hide the square brackets in my template expressions?

I have a simple JSON object in my models
whitelist = [
{
"name": "Whitelist #1",
"permissions": [
"production_sdk",
"source_sdk",
"service"
],
},
{
"name": "Whitelist #2",
"permissions": [
"production_sdk",
"service"
],
},
{
"name": "Whitelist #3",
"permissions": [
"production_sdk",
"source_sdk"
],
}
]
In my html I have {{ whitelist.permissions }}, but the HTML displays the values with brackets - ['production_sdk', 'source_sdk'].
How can I display the HTML so that there are no brackets?
whitelist.permissions is an array, how do you want that to be displayed in your html? You should probably create a simple filter that takes an array and outputs what you want, but you could just change your html to do this to get a comma-separated list:
{{ whitelist.permissions.join(', ') }}
Another option, especially if you want to style each permission, is to use ng-repeat and html elements:
<span ng-repeat="permission in whitelist.permissions"><span ng-if="$index != 0">, </span>{{ permission }}</span>

Resources