Error: ngRepeat:dupes Duplicate Key in Repeater (even though no dupes in data) - angularjs

<div ng-repeat="item in skippedFiles.openCategories">
{{skippedFiles.openCategories}} prints:
[
{
"name": "Files with Code Differences",
"description": "Customizedfiles in which the code is different between the instance record and the platform record",
"sys_id": "undefined"
},
{
"name": "Files Deleted in the Instance",
"description": "Files which have been deleted by a developer or system administrator during thecustomization of out-of-box code",
"sys_id": "49e13d4113b8e3442a393ac2e144b0e9"
},
{
"name": "Files Deleted in Platform",
"description": "Files which are no longer a part of a platform release, resulting in deletion of file",
"sys_id": "6912358113b8e3442a393ac2e144b025"
}
I have validated JSON and there are no dupes in it and yet angular throws Duplicate Key in Repeater.
I have tried track by $index but that does not help.

Not sure what's wrong in your code, unless you paste the entire code here, would be difficult to answer.
I have created a code for you based on your question.
Have a look and let me know.
function LoginController($scope) {
$scope.user = {
firstName: "Foo",
lastName: "Bar"
};
$scope.skippedFiles = {};
$scope.skippedFiles.openCategories = [
{
"name": "Files with Code Differences",
"description": "Customizedfiles in which the code is different between the instance record and the platform record",
"sys_id": "undefined"
},
{
"name": "Files Deleted in the Instance",
"description": "Files which have been deleted by a developer or system administrator during thecustomization of out-of-box code",
"sys_id": "49e13d4113b8e3442a393ac2e144b0e9"
},
{
"name": "FilesDeleted in Platform",
"description": "Files which are no longer a part of a platform release, resulting in deletion of file",
"sys_id": "6912358113b8e3442a393ac2e144b025"
}
]
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
<div>Hello {{ user.firstName }}</div>
<div ng-repeat="item in skippedFiles.openCategories">
{{item.name}}
{{item.description}}
</div>
</div>

Related

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.

JSON data comparison in Angularjs

I am doing a college project. In category page there will be product categories coming from json-
[{
"code": "mc",
"name": "Mobile",
"desc": "We provide range of latest mobile phones with best price in the market",
"imageUrl": "images/mobile.jpg"
},
{
"code": "lc",
"name": "Laptops",
"desc": "Huge sale is going on Lenova,HP and Apple's laptop",
"imageUrl": "images/lappy.jpg"
},
{
"code": "ic",
"name": "ipads",
"desc": "ipad mini is available with the cheapest price.Go grab the offer",
"imageUrl": "images/ipad.jpg"
},
{
"code": "sc",
"name": "Storage Devices",
"desc": "All kind of storage devices are available here",
"imageUrl": "images/storage.jpg"
}
]
As the category list is dynamic for eg 4, trying to build up link to list page depends on the category based on code data in JSON. For example if click on mobile in category.html, result.html will be mobile list, if iPad then iPad list. Right now category page done and trying to pass and receive code in JSON to compare in condition to display concerned data like laptop or desktop.
Present js is:
var catApp = angular.module("catApp", ["ngStorage"]);
catApp.controller('CountryCtrl', function ($scope, $http, $localStorage){
$http.get('categories.json').success(function(data) {
$scope.categories = data;
});
$scope.save = function() {
window.location.replace('result.html');
$scope.type=categories;
if(type.code=='mc'){
localStorage.setItem('msg1', 'Mobiles');
}
$scope.data1 = localStorage.getItem('msg1');
});
to display it on result.html-
<body ng-app="catApp">
<div ng-controller="CountryCtrl">
{{data1}}
</div>
</body>
Please help me to display product name in result.html comparing the 'code' from the json.
In short want to display category name in result.html depends on which category user click where category also dynamic coming from json with a fag value code to make it work like-
freshtechsample.tk/pal/test.html
Only difference is in above html links are static, in required page links are dynamic.
Present output:http://freshtechsample.tk/pal/category.html

Angularjs nested json object with ng-repeat not working at ionic

First of all, I'm pretty new to the ionic and angularjs. Now I trying to develop a app and i'm having trouble displaying and searching data right now.
I have a nested json object and I cannot display it with ng-repeat.
Here is the json object.
$scope.nestedTestdata = [{
"leadlist ": [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Full Name ",
"phone": "This is test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "full name",
"phone": "phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "HP phone.",
"source": "I hate you"
}
}]
}];
Here is how I display.
<div class="lead_row" ng-repeat="data in nestedTestdata.leadlist | filter: model.search" >
<div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{data.submission_value.source}}</div>
<div class="lead_col">{{data.submission_value.full_name}}</div>
<div class="lead_col">{{data.submission_value.phone}}</div>
</div>
When I change it to following json object, it can display and search function also working.
$scope.testdata = [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Search is working",
"phone": "This is fucking test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "Fucking full name",
"phone": "Fucking phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "Fucking HP phone.",
"source": "I hate you"
}
}];
So I think it is not displaying problem.
Please help to figure out how can i make this work.
Please check inside the following link for the full code.
http://play.ionic.io/app/720567016712
Thank you so much in advance.
nestedTestData contains an array. Inside the array, there is an object.
ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search"
SO code should be as follows:
<div class="lead_row" ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search" >
<div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{data.submission_value.source}}</div>
<div class="lead_col">{{data.submission_value.full_name}}</div>
<div class="lead_col">{{data.submission_value.phone}}</div>
</div>
So you have an array then you are defining another array with an object with a key of 'leadlist'. The answer above could solve your problem or you could just remove the array above your key you can just access it as normal data.nestedTestData
Below is how you could rewrite it:
`$scope.nestedTestdata = {
"leadlist" : [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Full Name ",
"phone": "This is test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "full name",
"phone": "phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "HP phone.",
"source": "I hate you"
}
}]
};`
You can use nested ng-repeat, It will also work if there are multiple objects in $scope.nestedTestdata.
Here is working fiddle
<div ng-controller="MyCtrl">
<div class="lead_row" ng-repeat="data in nestedTestdata">
<div ng-repeat="list in data.leadlist">
<div class="lead_col">{{list.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{list.submission_value.source}}</div>
<div class="lead_col">{{list.submission_value.full_name}}</div>
<div class="lead_col">{{list.submission_value.phone}}</div>
</div>
</div>
</div>
please remove the space after "leadlist "

AngularJS custom directive scope not reflecting

I have a custom directive called crust:
JS:
.directive('crust', function(){
return{
restrict: 'EA',
replace: true,
scope: {
datasource: '='
},
templateUrl: '../../configurator/partials/crust.html'
}
})
HTML template (crust.html):
<li data-ng-repeat="type in datasource.types">
<input type="radio"
name="{{datasource.id}}"
data-ng-class="radio-selector"
data-ng-true-value="true"
value="true"
data-ng-model="type.selected"
data-ng-change="updatePizza(type)"
id="{{type.id}}">
<label for="{{type.id}}"> <span></span>
<h2 data-ng-bind="type.name"></h2>
<p data-ng-bind="type.description"></p>
</label>
</li>
The Model (crustTypes) is pulled via a service from this JSON:
{
"id": "crt",
"types": [{
"id": "crt1",
"name": "original",
"description": "Our traditional scratch-made crust",
"price": "5",
"selected":"false"
}, {
"id": "crt2",
"name": "thin",
"description": "A light crispier crust",
"price": "6",
"selected":"false"
}, {
"id": "crt3",
"name": "fresh pan",
"description": "A thick buttery crust",
"price": "7",
"selected":"false"
}, {
"id": "crt4",
"name": "stuffed",
"description": "Two layers of original crust",
"price": "8",
"selected":"false"
}]
}
The directive is being invoked in the HTML like so:
<ul>
<crust data-datasource="crustTypes" data-datavalue="pcrustType"></crust>
</ul>
The looping is working fine, and ng-repeat is rendering the list properly. The problem is that I want to assign datasource.id as the common name of the radio group, and due to some reason, datasource.id is coming up as undefined. Consequently, the name is not being assigned and the user is being allowed to enter multiple selections.
If instead I pass type to updatePizza(item) it comes up fine. Its just the parent model that's not being displayed
If I try to return datasource through updatePizza(), it is still coming up as undefined.
I'm sure I'm missing something basic here. Help!
Here is a Plunker of the code
Replace name="{{datasource.id}}" with name="{{$parent.datasource.id}}"

AngularJS remove item from scope

My template:
<div ng-repeat="comment in article.comments">
{{ comment.date }} by {{ comment.author }} <button type="button" ng-click="removeComment($index)">remove</button>
</div>
My JSON comments:
"comments": [
{
"author": "Syl A",
"date": "2014-07-02",
"content": "lol"
},
{
"author": "Syl B",
"date": "2014-07-02",
"content": "lol"
},
{
"author": "Syl C",
"date": "2014-07-02",
"content": "lol"
}
]
My controller:
$scope.removeComment = function (key) {
// This is what I want to remove
// Object {author: "Syl A", date: "2014-07-02", content: "lol", $$hashKey: "004"}
console.log($scope.article.comments[key]);
};
The following snippets is not OK, it does nothing;
$scope.article.comments.splice[key, 1];
The following snippets are not OK, the object is removed but in the view got "by remove", the complete line is not removed and I can't remove more than one item Error: [ngRepeat:dupes]:
$scope.article.comments[key] = undefined;
delete $scope.article.comments[key];
The following snippet is not OK, the object is removed but in the view got "by remove", the complete line is not removed:
$scope.article.comments[key] = {};
So I didn't find a solution on SO to make an "all-in-one" remove, DOM and "data". Why my splice doesn't work here?
You're using splice wrong is the problem.
Update your splice to use ( ) instead of [ ]
$scope.article.comments.splice(key, 1);

Resources