Angular JS重复不显示任何数据答案

【问题标题】：Angular JS duplicates not showing any dataAngular JS重复不显示任何数据
【发布时间】：2017-02-13 13:47:46
【问题描述】：

我想要的结果是获取数据后从数据库上传的产品详细信息。它显示重复条目的错误。

angular.min.js:107 错误：[ngRepeat:dupes]http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=products%20in%20data&p1=string%3An&p2=n 在错误（本机）

我在数据库中有两个条目，但我找不到问题。

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;
}

【问题讨论】：

详细解答你的问题stackoverflow.com/a/39640334/6608101

标签： javascript php html angularjs web

【解决方案1】：

使用track by index

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

它track by $index 根据数组中每个项目的index 分别跟踪data 数组中的每个对象。所以，即使data中有重复，ng-repeat也可以单独跟踪。

【讨论】：

未获取数据，但 div 重复但没有数据。请运行代码一次。我已经给了你一切。
你是否从后端成功获取数据..你能做console.log并尝试..
在data 中是否有具有PRODUCT_DESCRIPTION、PRODUCT_NAME 等属性的对象。
是的。数据进入 console.log(data);连接成功[{"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"}跨度>
我有product_description、product_name、product_price、product_sku（主键）、product_image_link等数据属性。

【解决方案2】：

在 ngRepeat 表达式中有重复键时发生。禁止重复键，因为 AngularJS 使用键将 DOM 节点与项目相关联。

该消息会告诉您确切的操作：

使用“track by”表达式指定唯一键

如果您有唯一 ID 等标识符（例如 products.id 使用 track by products.id）。如果不这样做，请使用$index，因为$index 始终是唯一的。

【讨论】：

错误依旧。我附上了从数据库中获取的 JSON 代码。请看一看。我使用了 $index 的跟踪，但它会生成匿名的 div 数量，并且不会从数据库中获取数据。 [{"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"}
我不确定我是否理解。我会看看你什么时候添加 JSON。（提醒我）。另外，it makes anonymous number of divs 真的不应该这样做。这是唯一的补充吗？ data is not fetched from database 那么，数据来自哪里？因为你说有divs.
请看一遍代码。 JSON- 连接成功 [{"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"}
你没有标识符，所以你应该使用$index。我看到你接受了答案。

【解决方案3】：

您收到此错误是因为您的数据有一些重复键。所以要删除它只需使用track by $index。

因此您修改了代码：

  <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>

【讨论】：

【解决方案4】：

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 !!

【讨论】：