Comment utiliser ce fichier json avec des données angulaires

Question

Ceci est la réponse de mon serveur.

{ 
"status": "success", 
"data": [{ 
    "id": null, 
    "reportType": "Total Voucher Report", 
    "reportModule": "Vouchers", 
    "reportData": [{ 
     "id": "1", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }, { 
     "id": "2", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }, { 
     "id": "3", 
     "voucherPackId": "2", 
     "serialNumber": "0", 
     "status": "Free", 
     "isBlocked": "N", 
     "voucherPin": "0", 
     "buyDate": null, 
     "redeemDate": null, 
     "phoneNumber": null, 
     "statusCode": null, 
     "identifier": "MCM0007532", 
     "merchantName": "test1", 
     "voucherName": "fddf", 
     "expiryDate": "2016-02-24 00:00:00", 
     "dealCategory": "Hotels \u0026 Travel", 
     "shortDescription": "xvxv", 
     "voucherWorth": "33.00" 
    }] 
}], 
"message": null} 

Je l'ai utilisé comme,

vm.dtOptions = DTOptionsBuilder 
     .newOptions() 
     .withOption('ajax', { 
      url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1', 
      type: 'POST', 
      dataSrc: 'data.data[0].reportData[0]', 
     }) 
     .withOption('processing', true) 
     .withOption('serverSide', true) 
     .withBootstrap() 
     .withPaginationType('full_numbers'); 

Il dit réponse JSON invalide. Appréciez votre aide aimable. résultat de débogage: http://debug.datatables.net/urizon

Answer 1

Si votre utilisation d'un analyseur votre obtiendra erreur: SyntaxError: JSON.parse: fin des données après la valeur de propriété dans l'objet à la ligne 63 colonne 16 des données JSON. Donc oui votre JSON est invalide! Ajoutez simplement} sur la ligne de liste. Parce que chaque parenthèse doit être fermée.

Answer 2

Assurez-vous que la réponse JSON a l'en-tête Content-Type: application/json, sinon elle risque de ne pas être correctement analysée.

Answer 3

Utilisez la valeur suivante pour l'option dataSrc: data[0].reportData comme indiqué ci-dessous. Vous devez également supprimer les options serverSide et processing car la structure de vos données n'est pas correcte pour le mode de traitement côté serveur.

Vous devez également définir la structure des colonnes puisque vous utilisez un tableau d'objets en tant que source de données.

vm.dtOptions = DTOptionsBuilder 
     .newOptions() 
     .withOption('ajax', { 
      url: config.base_url + 'report/voucher?module=Vouchers&type=Total Voucher Report&merchant=1', 
      type: 'POST', 
      dataSrc: 'data[0].reportData' 
     }) 
     .withBootstrap() 
     .withPaginationType('full_numbers'); 

vm.dtColumns = [ 
    /* List data properties for each column in the table. */ 
    DTColumnBuilder.newColumn('id'), 
    DTColumnBuilder.newColumn('voucherPackId'), 
    DTColumnBuilder.newColumn('serialNumber'), 
    DTColumnBuilder.newColumn('status')   
];