Getting data from web api through Angularjs

Question

Dear Experts : I am trying to get data from a web api using Angularjs But I got an error. I have tested the api through google chrome and it returns JSON correctly

First app :

  var contractT = angular.module("ContractT",[]);

Second Angular services :

contractT.service("crudService", function ($http)
    {
        this.getContracts = function()
        {
            return $http.get("/ContractTypesAPI/api/ContractTypes/getContracts");
        }
    }

)

Third Controller:

contractT.controller('crudController', function ($scope, crudService)
{
    loadrecords();
    function loadrecords()
    {
        var promiseGet = crudService.getContracts(); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Contracts = pl.data })


    }



})

Fourth HTML :

<table border="1">
            <thead>
                <tr>Code</tr>
                <tr>Latin Description</tr>
                <tr>Local Description</tr>
            </thead>`enter code here`
            <tbody>
                <tr ng-repeat="c in Contracts">
                    <td>{{c.Staff_Type_Code}}</td>
                    <td>{{c.L_Desc}}</td>
                    <td>{{c.A_Desc}}</td>
                </tr>
            </tbody>
        </table>

The error is : Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: c in Contracts, Duplicate key: string:f, Duplicate value: f

JSON

"[{\"Staff_Type_Code\":1,\"L_Desc\":\"CONTINUOUS CONTRACT AND INSURED                   \",\"A_Desc\":\"دائـــم ومـــؤمن عليـــه                          \"},{\"Staff_Type_Code\":12,\"L_Desc\":\"CONTRACTING 36 HOURES                             \",\"A_Desc\":\"متعــــاقد 36 ساعة                                \"},{\"Staff_Type_Code\":13,\"L_Desc\":\"CONTRACTING 30 HOURES                             \",\"A_Desc\":\"متعــــاقد 30 ساعة                                \"},{\"Staff_Type_Code\":5,\"L_Desc\":\"ASSIGNED                                          \",\"A_Desc\":\"إنتـــداب                                         \"},{\"Staff_Type_Code\":14,\"L_Desc\":\"متعاقد 48ساعه                                     \",\"A_Desc\":\"متعاقد 48ساعه                                     \"},{\"Staff_Type_Code\":15,\"L_Desc\":\"متعاقد نصف الوقت                                  \",\"A_Desc\":\"متعاقد نصف الوقت                                  \"},{\"Staff_Type_Code\":16,\"L_Desc\":\"الطبيب المقيم                                     \",\"A_Desc\":\"الطبيب المقيم                                     \"},{\"Staff_Type_Code\":17,\"L_Desc\":\"دائم و مؤمن عليه / جامعة القاهرة                  \",\"A_Desc\":\"CONTINUOS CONTRACT AND INSURED - CAIRO UNV.       \"},{\"Staff_Type_Code\":18,\"L_Desc\":\"CONTINUOUS CONTRACT AND INSURED WITHOUT INTENSIVE \",\"A_Desc\":\"دائم ومؤمن عليه بدون حافز                         \"},{\"Staff_Type_Code\":19,\"L_Desc\":\"عقود / داخلى                                      \",\"A_Desc\":\"عقود / داخلى                                      \"},{\"Staff_Type_Code\":20,\"L_Desc\":\"عقود /جهاز مركزى                                  \",\"A_Desc\":\"عقود / جهاز مركزى                                 \"}]"

The answered example on the site is not help

The API is getting data from SQL database Any help, thanks in advance

score 0 · Answer 1 · answered Sep 01 '17 at 14:53

0

Use track by $index

 <tr ng-repeat="c in Contracts track by $index">
    <td>{{c.Staff_Type_Code}}</td>
    <td>{{c.L_Desc}}</td>
    <td>{{c.A_Desc}}</td>
 </tr>

answered Sep 01 '17 at 14:53

Sajeetharan

216,225
63
350
396

Duplicates should be flagged, not answered... – Kyle Krzeski Sep 01 '17 at 14:55
Thanks for replying but It returns an empty and tiny table cells in HTML page – hassanzi Sep 01 '17 at 14:59
@Hassan what do you mean? edit your question – Sajeetharan Sep 01 '17 at 15:06
any help , the suggested answers are helping me. Thanks lot – hassanzi Sep 01 '17 at 15:08
did you solve the issue? – Sajeetharan Sep 01 '17 at 15:08
@ Sajeetharan 2 , no – hassanzi Sep 01 '17 at 15:13
post the json of $scope.contracts – Sajeetharan Sep 01 '17 at 15:14
The table has no PK, any help – hassanzi Sep 01 '17 at 15:14
"[{\"Staff_Type_Code\":1,\"L_Desc\":\"CONTINUOUS CONTRACT AND INSURED \",\"A_Desc\":\"دائـــم ومـــؤمن عليـــه \"},{\"Staff_Type_Code\":12,\"L_Desc\":\"CONTRACTING 36 HOURES \",\"A_Desc\":\"متعــــاقد 36 ساعة \"}, \"}]" – hassanzi Sep 01 '17 at 15:20
The answers for the duplicated question are not helping me , – hassanzi Sep 01 '17 at 16:12
any help for this issue, i am new in Angular – hassanzi Sep 01 '17 at 16:21
Add me on Skype :sajee4ever – Sajeetharan Sep 01 '17 at 16:22

score 0 · Answer 2 · answered Sep 01 '17 at 14:56

0

ng-repeat loops through a unique key. your contact list does not have a unique key that is why you are getting that error. if you do not have any unique key into contact list the you can use angular build in "track by" index option.

answered Sep 01 '17 at 14:56

han

118
1
11

Thanks for replying but It returns an empty and tiny table cells in HTML page after using – hassanzi Sep 01 '17 at 15:05
any help, i have added the "track by" index but it return empty data – hassanzi Sep 01 '17 at 15:27
any help because i didnt solve the problem – hassanzi Sep 01 '17 at 16:14

Getting data from web api through Angularjs

2 Answers2