Error message in Android studio console for Angular JS: Unexpected token error, even though the code runs smoothly in browser

Question

Error message in Android studio console for Angular JS: Unexpected token error, even though the code runs smoothly in browser

I'm encountering a strange issue with my Cordova Android project (AngularJS + Ionic). When I run the project in Android Studio, I receive an error on my JS file that says:

Uncaught SyntaxError: Unexpected token {, http://192.168.43.211:8100/templates/todo/js/controllers.js, Line: 184

However, when I run the same file in Google Chrome, it works fine without any errors.

Below is the code causing the error message:

$scope.todos = $scope.todos.map(({text, status, note, create_date, to_do_id}) => {
             var ch;
             if(status=='1') ch=true; else ch=false;
             console.log(ch);
                return {
                  text,
                  flag:ch,
                  note:note,
                  to_do_id:to_do_id,
                  create_date:create_date,
                  status:status
                  };
              });

If I hide the above code block, no error is shown in the Android Studio console. However, I need this code block to complete the functionality.

Any insights on what the problem might be?

javascript android angularjs cordova

Answer 1

Answer №1

Primary solution

Have you verified if your mobile browser actually supports JS arrow expressions? Since they were only introduced in ECMAScript 6, some browsers may not have incorporated support for them yet. You could attempt replacing the arrow expression with an anonymous function instead:

$scope.todos = $scope.todos.map(function(record) {
    var check;
    if (record.status == '1') check = true; else check = false;
    console.log(check);
    return {
        text: record.text,
        flag: check,
        note: record.note,
        to_do_id: record.to_do_id,
        create_date: record.create_date,
        status: record.status
    };
});

Alternative solution

If the initial code still fails to function as expected, you have the option of creating your own map function like so:

function _customMap(array, callback) {
    var newArray = [];

    for(var i = 0; i < array.length; i++) {
        newArray.push(callback(array[i]));
    }

    return newArray;
}

You can then utilize it similarly:

$scope.todos = _customMap($scope.todos, function(record) {
    var check;
    if (record.status == '1') check = true; else check = false;
    console.log(check);
    return {
        text: record.text,
        flag: check,
        note: record.note,
        to_do_id: record.to_do_id,
        create_date: record.create_date,
        status: record.status
    };
});

Answer 2

Primary solution

Have you verified if your mobile browser actually supports JS arrow expressions? Since they were only introduced in ECMAScript 6, some browsers may not have incorporated support for them yet. You could attempt replacing the arrow expression with an anonymous function instead:

$scope.todos = $scope.todos.map(function(record) {
    var check;
    if (record.status == '1') check = true; else check = false;
    console.log(check);
    return {
        text: record.text,
        flag: check,
        note: record.note,
        to_do_id: record.to_do_id,
        create_date: record.create_date,
        status: record.status
    };
});

Alternative solution

If the initial code still fails to function as expected, you have the option of creating your own map function like so:

function _customMap(array, callback) {
    var newArray = [];

    for(var i = 0; i < array.length; i++) {
        newArray.push(callback(array[i]));
    }

    return newArray;
}

You can then utilize it similarly:

$scope.todos = _customMap($scope.todos, function(record) {
    var check;
    if (record.status == '1') check = true; else check = false;
    console.log(check);
    return {
        text: record.text,
        flag: check,
        note: record.note,
        to_do_id: record.to_do_id,
        create_date: record.create_date,
        status: record.status
    };
});

Error message in Android studio console for Angular JS: Unexpected token error, even though the code runs smoothly in browser

Answer №1

Similar questions

The pagination feature in React MUI DataGrid is malfunctioning

React array mapping issue does not produce any error message

Scrape data from websites where the main URL remains constant but the information in the table varies

What is the process for including a JavaScript file in an HTML document?

Tips for creating mocks/stubs for vue-i18n?

Running karma tests in an angularjs environment may require additional http requests from the configuration

Node.JS executes Sandbox within a RESTful service environment

Save information from an HTTP request made with a manually entered URL

The function Promise.all typically yields an array with nested arrays

How can we prevent ng-include from triggering a submit action when combined with ng-click?

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

Adjust the transparency and add animation effects using React JS

Creating a JavaScript function to download specific sections of an HTML page

Enhancing the javascript console output

The use of ReactDom.render is no longer permissible in Next.js

Using jQuery to update a specific item in a list

Struggling to correctly showcase my Firebase data in Angular using the orderByChild method

Is Nextjs prone to creating identical pages during the build process?

Obtain layers that have been specifically chosen

What is the best practice for integrating Angular controllers into an ASP.NET MVC application?