Kleber Mota Kleber Mota - 1 month ago 9
Javascript Question

Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'usuario'

I am trying fill a table with this jquery code:

$(document).ready(function(){
var url = "<c:out value="${lista}"/>";
$.get(url, function(data){
var json = jQuery.parseJSON(data);
for(var item in json.usuario) {
var row = $('<tr>');
row.append('<td>'+json.usuario[item].login+'</td>');
row.append('<td>'+json.usuario[item].pnome+'</td>');
row.append('<td>'+json.usuario[item].unome+'</td>');
row.append('<td>'+json.usuario[item].email+'</td>');
row.append('<td> <button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+json.usuario[item].id+'">Editar</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+json.usuario[item].id+'">Remover</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+json.usuario[item].id+'">Permiss&otilde;es</button> </td>');
$('tbody.content').append(row);
}
});
});


based on this json string:

{"usuario":[{"id":1,"login":"klebermo","pnome":"Kleber","unome":"Mota","email":"klebermo@gmail.com"}]}


but when I open the page, besides no row be added to the table, this erro is displayed in the console:

Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'usuario'


Anyone can tell what I am doing wrong here?

UPDATE

I try do the same with this other code, but face the same result:

$.each(json.usuario, function(index, item){
var row = $('<tr>');
row.append('<td>'+item.login+'</td>');
row.append('<td>'+item.pnome+'</td>');
row.append('<td>'+item.unome+'</td>');
row.append('<td>'+item.email+'</td>');
row.append('<td> <button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+item.id+'">Editar</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+item.id+'">Remover</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+item.id+'">Permiss&otilde;es</button> </td>');
$('tbody.content').append(row);
});


UPDATE 2

my current code is:

$(document).ready(function(){
var url = "<c:out value="${lista}"/>";
console.log("url="+url);
$.get(url, function(data){
console.log("data="+data);
var json = jQuery.parseJSON( data );
$.each(json.usuario, function(index, item){
console.log("index="+index);
console.log("id="+item.id);
console.log("login="+item.login);
console.log("pnome="+item.pnome);
console.log("unome="+item.unome);
console.log("email="+item.email);

console.log('inserindo colunas de dados');
var row = $('<tr>');
row.append('<td>'+item.login+'</td>');
row.append('<td>'+item.pnome+'</td>');
row.append('<td>'+item.unome+'</td>');
row.append('<td>'+item.email+'</td>');

console.log('inserindo colunas dos botões');
var col = $('<td>');
col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+item.id+'">Editar</button>');
col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+item.id+'">Remover</button>');
col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+item.id+'">Permiss&otilde;es</button>');

console.log('inserindo linha na tabela');
$('tbody.content').append(row);
});
});
});


the output in the console is:

url=/loja/usuario/listagem.json
data=
{"usuario":[{"id":0,"login":"klebermo","pnome":"Kleber","unome":"Mota","email":"klebermo@gmail.com"}]}
index=0
id=0
login=klebermo
pnome=Kleber
unome=Mota
email=klebermo@gmail.com
inserindo colunas de dados
inserindo colunas dos botões
Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'usuario'

Answer

After more attempts and analyzing the sugestions above, I finally solve my problem, with the code below:

$(document).ready(function(){
    var url = "<c:out value="${lista}"/>";
    $.get(url, function(data){
        var json = jQuery.parseJSON( data );
        $.each(json.usuario, function(index, item){
            var row = $('<tr>');
            row.append('<td>'+item.login+'</td>');
            row.append('<td>'+item.pnome+'</td>');
            row.append('<td>'+item.unome+'</td>');
            row.append('<td>'+item.email+'</td>');

            var col = $('<td>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="editar" data-target="'+item.id+'">Editar</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="remover" data-target="'+item.id+'">Remover</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="permissoes" data-target="'+item.id+'">Permiss&otilde;es</button>');
            row.append(col);

            row.append('<td></td>');

            $('tbody.content').append(row);
        });
    });
});
Comments