Angular JS duplicates not showing any data

Question

The result I want is the product details uploading from the database once the data is fetched. It shows the error of duplicate entries.

angular.min.js:107 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=products%20in%20data&p1=string%3An&p2=n at Error (native)

I have two enteries in the database but I can't find the problem.

HTML

<html ng-app="fetch">
  <head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="listproduct.css">
    <!-- jQuery library -->
    <script src="jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="bootstrap.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="angularscript.js"></script>

  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Ladies Boutique</a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row " ng-controller="dbCtrl">
        <div class="item col-xs-4 col-lg-4 " ng-repeat="products in data" >
          <div class="thumbnail" >
            <img class="group image" src=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" />
            <div class="caption">
              <h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4>
              <p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    &#8377 {{products.PRODUCT_PRICE}}</p>
                </div>
                <div class="col-xs-12 col-md-6">
                  <a class="btn btn-success" href="#">Add to cart</a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </body>
</html>

listproduct.php

<?php
// Including database connections
$database='angulardatabase';
$connection=  mysqli_connect('localhost', 'root', '');
if(!$connection){
  die("Database Connection Failed".mysqli_errno($connection));

}
else
{

  echo'Connection Successfull';    
}
$select_db=  mysqli_select_db($connection, $database);
if(!$select_db)
{
  die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angulartable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
  while($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
  }
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>

angularscript.js

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

fetch.controller('dbCtrl',['$scope','$http',function($scope,$http){
  $http.get("exactphp.php")
  .success(function(data){
    $scope.data=data;

    alert(data);
  })
  .error(function(){
    $scope.data="error in fetching data";
    alert("Error in fetching data");
  });
}]);

listproducts.css

.glyphicon { margin-right:5px; }
.thumbnail
{
  margin-bottom: 20px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.item.list-group-item
{
  float: none;
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
  background: #428bca;
}

.item.list-group-item .list-group-image
{
  margin-right: 10px;
}
.item.list-group-item .thumbnail
{
  margin-bottom: 0px;
}
.item.list-group-item .caption
{
  padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
  background: #eeeeee;
}

.item.list-group-item:before, .item.list-group-item:after
{
  display: table;
  content: " ";
}

.item.list-group-item img
{
  float: left;
}
.item.list-group-item:after
{
  clear: both;
}
.list-group-item-text
{
  margin: 0 0 11px;
}
body
{
  background-color: white;
  padding-top:80px;
}

Detailed answer of your question http://stackoverflow.com/a/39640334/6608101 — Mohit Tanwani, Oct 05 '16 at 08:28

Ravi Teja · Accepted Answer · 2016-10-05T08:09:51.647

0

Use track by index

 ng-repeat="products in data track by $index"

It track by $index keeps track of each object in the data array separately based on index of each item in the array. So, even if there are duplicates in the data ng-repeat can keep track of them separately.

edited Oct 05 '16 at 08:09

answered Oct 05 '16 at 08:04

Ravi Teja

1,097
8
13

data is not fetched but the divs are repeating with no data. Please run the code once . I have given you everything. – Himanshu Chawla Oct 05 '16 at 08:37
Are you getting data successfully from back end.. can you do `console.log` and try.. – Ravi Teja Oct 05 '16 at 08:45
With in the `data` do you have objects with properties like `PRODUCT_DESCRIPTION`, `PRODUCT_NAME` etc.. – Ravi Teja Oct 05 '16 at 08:46
Yes . Data is coming in console.log(data); Connection Successfull[{"PRODUCT_SKU":"1","PRODUCT_NAME":"PUNJABI SUIT","PRODUCT_DESCRIPTION":"PUNJABI SUIT WITH DUPATTA","PRODUCT_PRICE":"5000","PRODUCT_IMAGE_LINK":"https:\/\/rukminim1.flixcart.com\/image\/312\/312\/fabric\/v\/m\/x\/mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg?q=70"} – Himanshu Chawla Oct 05 '16 at 08:49
I have properties of data such as product_description , product_name, product_price, product_sku(which is primary key), product_image_link. – Himanshu Chawla Oct 05 '16 at 08:50
Remove this line and try.. `` – Ravi Teja Oct 05 '16 at 09:01
Your syntax is wrong it should be `` – Ravi Teja Oct 05 '16 at 09:02

score 0 · Answer 2 · answered Oct 05 '16 at 08:06

0

Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

The message tells you exactly what to do:

Use 'track by' expression to specify unique keys

If you have identifier such as unique ID (for example products.id use track by products.id). If you don't, use $index due the $index is always unique.

answered Oct 05 '16 at 08:06

Mosh Feu

28,354
16
88
135

Still the error remains the same . I am attaching the JSON CODE which is fetched from the database. Please have a look . I have used track by $index but in that it makes anonymous number of divs and data is not fetched from database. [{"PRODUCT_SKU":"1","PRODUCT_NAME":"PUNJABI SUIT","PRODUCT_DESCRIPTION":"PUNJABI SUIT WITH DUPATTA","PRODUCT_PRICE":"5000","PRODUCT_IMAGE_LINK":"https:\/\/rukminim1.flixcart.com\/image\/312\/312\/fabric\/v\/m\/x\/mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg?q=70"} – Himanshu Chawla Oct 05 '16 at 08:20
I'm not sure I understand. I will take a look when you will add the JSON. (Notify me). Also, `it makes anonymous number of divs` it's really shouldn't do this. Is this the only addition? `data is not fetched from database` so, from where the data? because you said that there are `div`s. – Mosh Feu Oct 05 '16 at 08:24
Please have a look to the code once . JSON- Connection Successfull [{"PRODUCT_SKU":"1","PRODUCT_NAME":"PUNJABI SUIT","PRODUCT_DESCRIPTION":"PUNJABI SUIT WITH DUPATTA","PRODUCT_PRICE":"5000","PRODUCT_IMAGE_LINK":"https:\/\/rukminim1.flixcart.com\/image\/312\/312\/fabric\/v\/m\/x\/mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg?q=70"} – Himanshu Chawla Oct 05 '16 at 08:54
You have no identifier, so you should use `$index`. I see that you accepted the answer. – Mosh Feu Oct 05 '16 at 11:17

score 0 · Answer 3 · answered Oct 05 '16 at 08:08

You are getting this error because your data have some duplicates keys. So to remove this just use track by $index.

Hence you modified code:

  <div class="item col-xs-4 col-lg-4 " ng-repeat="products in data track by $index" >
            <div class="thumbnail" >
                <img class="group image" src=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" />
                <div class="caption">
                    <h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4>
                    <p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                &#8377 {{products.PRODUCT_PRICE}}</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="#">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

score 0 · Answer 4 · answered Oct 05 '16 at 09:03

Its Done and it was mistake from my side in the listproduct.php file .

<?php
// Including database connections
$database='angularwaladatabase';
$connection=  mysqli_connect('localhost', 'root', '');
if(!$connection){
    die("Database Connection Failed".mysqli_errno($connection));

}
else
{

    echo'Connection Successfull';    
}
$select_db=  mysqli_select_db($connection, $database);
        if(!$select_db)
{
            die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angularwalatable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>

The mistake is that json data was taking that "connection successfull" of the if else statement in the JSON and angular was getting confusing of that. 

<?php
// Including database connections
$database='angularwaladatabase';
$connection=  mysqli_connect('localhost', 'root', '');

$select_db=  mysqli_select_db($connection, $database);
        if(!$select_db)
{
            die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angularwalatable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>   

Thanks You All . Thanks for making me correct and you were right and correct . Thanks a Lot !!

Angular JS duplicates not showing any data

4 Answers4