JSHint - ^ 'concise methods' is available in ES6

Question

I'm trying to submit a simple form using AJAX. I'm using grunt as task runner to compile my JS files and so.

Here is what I did until now.

$("form").submit(function(event) {
    event.preventDefault();

    var formData = {
        $("#username").val(),
        $("#password").val()
    };

    $.ajax({
        url: 'xxx',
        type: 'POST',
        dataType: 'json',
        data: formData,
        encode: true
    })
    .done(function(data) {
        console.log(data);

    })
});

My doubt is about a JShint error when the task is about to run

$("#username").val(), ^ 'concise methods' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).

Here is my gruntfile (jshint task)

jshint: {
        ignore_warning: {
            options: {
                '-W099': true,
                /*'-W041': true,*/
                '-W044': true,
                '-W033': true,
                '-W043': true,
                '-W049': true,
                '-W004': true,
                '-W065': true,
                '-W083': true, // Corrigir futuramente
            },  
            src: ['public/_assets/src/js/modules/*.js'],
        }
    }

What exactly does it means ? And how can I solve this error ?

Thanks!

Answer 1

The formData body is missing the names:

var formData = {
    $("#username").val(),
    $("#password").val()
};

Any kind of short-hand object literal, be it calculated names or inline methods, is an ES6 feature.

You almost certainly just need to add the names to the values you're already getting:

var formData = {
    username: $("#username").val(),
    password: $("#password").val()
};

With ES6, you are able to declare methods in an object literal, like so:

var formDataFetch = {
  username() {
    return $("#username").val()
  }
};

(see this blog post for more details)

which seems to be what the parser thinks your object contains.