Encountering AngularJS promise data parsing issues

I am trying to work with promises in AngularJS.

However, I encountered an error while parsing the backend response in AngularJS.

What could be the issue here?

This is the HTML code:

<div ng-app="clinang" ng-controller="pacientesCtrl">
     <a class='btn btnprimary' href='/getdadospac/?oper=S' >Button</a> 
     <table ng-table="tableParams" class="table" show-filter="true">
        <tr ng-repeat="paciente in $data">
            <td title="'Pront'" filter="{ name: 'text'}" sortable="'pront'">
                {{paciente.pront}}</td>
            <td title="'Nome'" filter="{ age: 'number'}" sortable="'nome'">
                {{paciente.nome}}</td>
        </tr>
    </table>
 </div>

Here is the JSON data retrieved from the backend:

{"draw":,"recordsTotal":5303,"recordsFiltered":5303,
"data":[{...}, {...}, ...]}

The error message related to JSON parsing is as follows:

SyntaxError: Unexpected token , in JSON at position 8
    at JSON.parse (<anonymous>)
    at fromJson (http://127.0.0.1:8888/files/lib/angular/angular.js:1377:14)
    at defaultHttpResponseTransform (http://127.0.0.1:8888/files/lib/angular/angular.js:11003:16)

And here is the JS code snippet:

var app = angular.module("clinang", ["ngTable", "ngResource"]);
            (function() {

              app.controller("pacientesCtrl", pacientesCtrl);
              pacientesCtrl.$inject = ["NgTableParams", "$resource"];

              function pacientesCtrl(NgTableParams, $resource) {
                // tip: to debug, open chrome dev tools and uncomment the following line 
                debugger;

                var Api = $resource("/getdadospac/?oper=S");
                this.tableParams = new NgTableParams({}, {
                  getData: function(params) {
                    // ajax request to api
                    return Api.get(params.url())
                      .$promise
                      .then(function(rows) {
                          debugger;
                          console.log(rows);    
                          params.total(rows.recordsTotal); // recal. page nav controls
                          return rows.data;
                    });
                  }
                });
                 this.tableParams.reload();
              }
            })();

Answer №1

It seems like there is an issue with the JSON format. Specifically, the problem lies in the first line:

{"draw":,"recordsTotal":5303, .....

The "draw" key is missing a value. To check your JSON validity, you can use tools such as jsonlint

Answer №2

Due to an invalid JSON response, the parsing process fails as the key "draw" is missing a value, resulting in an error at position 8.

To learn more about valid JSON objects, you can visit:

For additional examples, check out this link:

Answer №3

Upon validating the JSON data, it appears that there is a formatting issue in the response you received.

Error: There is a parse error on line 1:

"draw": ,"recordsTotal": ------^

The expected tokens are 'EOF', '}', ',', or ']', but instead found ':'

We recommend reviewing how the object is structured on the server side.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for initiating a POST request in Java Script without including any data?

Currently, I am utilizing Ajax to send an array to the router, as demonstrated below... var send = function () { var data = search console.log(data) $.ajax({ type: 'post', url: ...

Unable to extract all advertisements from Facebook Marketplace

https://i.stack.imgur.com/xEhsS.jpg I'm currently attempting to scrape listings from Facebook marketplace, however, only the first listing is being scraped. Does anyone have any suggestions on how I can scrape the entire list of listings? CODE (async ...

`Creating a functional list.js filter``

I'm having trouble making the List.js filter function work properly. The documentation for List.js is not very helpful for someone new to development. Below is the code I am using: HTML: <div class="col-sm-12" id="lessons"> <input class= ...

Why is the abort function in JavaScript important?

What possible scenarios would require me to utilize this feature? ...

Concerning Java's Map and Array functionalities

When working with Javascript, we have the ability to create statements like the one below. var f_names = { 'a' : 'Apple', 'b' : 'Banana' 'c& ...

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

What are the benefits of using Express in NodeJS to run both a backend and a frontend server simultaneously?

My current project involves a simple NodeJS/AngularJS application structured as follows: /frontend/index.html <-- AngularJS home page /frontend/js/app.js <-- AngularJS app.js /backend/package.json<-- NodeJS package.json /backend/index.js < ...

Images within inline blocks appear to be extending beyond their containing div as though they are

When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...

What is the correct location for the webpack.config.js file within a React project?

I recently inherited a React project that I need to continue working on, but I have never used React before. I've been advised to use a web worker in the project and have found a tool that seems suitable for my needs: Worker Loader The suggested meth ...

Obtain the API by navigating through nested dynamic routes in Next.js

Can someone help me with the folder structure in NEXT JS for pages/api/product/[id]/index.js? What would be the URL to access the Api index in the [id] folder? Here is my folder structure pages/ api/ product/ [id]/ index.js I nee ...

transform a JSON object into a targeted JSON array

Looking to transform a JSON object into an array format, like so: [ { "name": "Batting" ,"data": [10,20,30,40]} , { "name": "Bowling" ,"data": [10,30,50,70] },{ "name": "Fielding" ,"data": [20,40,50,70]}] While I can create JSON objects for each index, I ...

npm not working to install packages from the package.json file in the project

When using my macbook air, I encounter an issue where I can only install npm packages globally with sudo. If I try to install a local package without the -g flag in a specific directory, it results in errors. npm ERR! Error: EACCES, open '/Users/mma ...

What is the process for updating semi-structured data in Snowflake?

In one of the snowflake columns, we have a JSON object that stores a variable number of value/pairs, making the data semi-structured. What options do I have to update a specific value pair within the JSON object? Do I need to extract the entire JSON, con ...

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

What is the best way to define a function that declares and returns an array for global use

I'm attempting to globally declare an array from a function so that it can be accessed by other functions as well. However, I'm unsure how to do this because the code involves a csvtojson converter which complicates things. I'm wondering if ...

Verifying the presence of objects within a JSON Array in a Logic App

I'm currently experimenting with this, but I haven't been able to make it work successfully. Within a Condition connector, the code I am using is as follows: @contains(json(body('ParseCustomerDeltaXML')).newMembers[0], 'Member&ap ...

Mastering End-to-End Testing in AngularJS with Protractor

I am struggling to extract the last row of a ng-repeat table in Protractor for testing purposes. My goal is to verify that an object created in a previous test run is displayed correctly. So far, I have managed to retrieve all the text in the last row but ...

Unable to locate module within a subdirectory in typescript

The issue I'm facing involves the module arrayGenerator.ts which is located in a subfolder. It works perfectly fine with other modules like Array.ts in the parent folder. However, when I introduced a new module called Sorting.ts, it started giving me ...

Transferring data to modal scope using angular ui-bootstrap

I am currently working on an Angular form that utilizes a ui-bootstrap modal dialog in my Sharepoint site. The site has different language versions, English and Spanish, and I need to display the appropriate content based on the context. My challenge is ...

Tips for incorporating additional filter criteria into a jquery script

I am currently utilizing a jQuery script to filter data based on date periods. However, I now need to include an additional filtering criteria for the "POSITION" column. Since I lack expertise in jQuery, I would rather accomplish this using plain vanilla J ...