Угловые JS-дубликаты, не отображающие никаких данных

В результате я хочу загрузить информацию о продукте из базы данных после получения данных. Он показывает ошибку дублирования записей.Угловые JS-дубликаты, не отображающие никаких данных

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)

У меня есть две энтемии в базе данных, но я не могу найти проблему.

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

источник

2016-10-05 Himanshu Chawla

Подробный ответ на ваш вопрос http://stackoverflow.com/a/39640334/6608101 –

Использование track by index

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

Он track by $index отслеживает каждый объект в массиве data отдельно на основе index каждый элемент массива. Таким образом, даже если есть дубликаты в data, ng-repeat может отслеживать их отдельно.

источник

2016-10-05 08:04:45

данных не является неправдоподобным, но дивы не повторяющуюся с не данные. Пожалуйста, запустите код один раз. Я дал вам все. –

Получаете ли вы данные с конца. Можете ли вы сделать «console.log» и попробовать .. –

С помощью «данных» у вас есть объекты со свойствами типа «PRODUCT_DESCRIPTION», «PRODUCT_NAME» и т. Д. –

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

сообщение говорит вам, что делать:

Use 'track by' expression to specify unique keys

Если у вас есть идентификатор, такой как уникальный идентификатор (например products.id использования track by products.id). Если вы этого не сделаете, используйте $index, потому что $index всегда уникален.

источник

2016-10-05 08:06:52

По-прежнему ошибка остается прежней. Я прикрепляю JSON CODE, который извлекается из базы данных. Пожалуйста, смотрите. Я использовал трек по индексу $ 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 "} –

I ' Я не уверен, что понимаю. Я посмотрю, когда вы добавите JSON. (Уведомить меня). Кроме того, 'это делает анонимное количество divs', на самом деле этого не должно делать. Это единственное дополнение? 'данные не извлекаются из базы данных' так, откуда данные? потому что вы сказали, что есть 'div'. –

Пожалуйста, взгляните на код один раз. 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 \/изображение \/312 \/312 \/ткань \/об \/т \/х \ д = /mahi-pink-nk-nilkanthenterprises-original-imaeazp5chvsfgk5.jpeg 70 "} –

Вы получаете эту ошибку, потому что у ваших данных есть несколько дубликатов ключей. Поэтому, чтобы удалить это, просто используйте 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>

источник

2016-10-05 08:08:38

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

источник

2016-10-05 09:03:37

Угловые JS-дубликаты, не отображающие никаких данных

ответ

Смежные вопросы