Problem with JS/Jquery/JSON/AJAX

Question

I’m having some problems with JSON in my application and wanted to see if you can help me, please.

The situation is as follows:

I have a method in my controller that searches some items:

@RequestMapping(value = "/buscaTodosCardapios", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public String buscaTodosCardapios(Usuario usuario, Model model){
    JSONObject retorno = new JSONObject();
    try{        
        retorno.put("data", cardapioRepository.findBySubmenuIsNull());
    }catch (Exception ex){
        retorno.put("situacao", "ERRO");
        retorno.put("mensagem", "Falha ao iniciar produção!");
    }
    return retorno.toString();
}

A JS file that picks up these items:

function buscaTodosCardapios(){
$.ajax({
    url: "buscaTodosCardapios",
    type: 'GET',
    dataType: 'json',
    cache: false,
    success: updateCardapios
});
}

function updateCardapios(data){
    console.log(data);
    console.log(data.cardapioId);
}

Everything returns OK:

Only, as you can see, the second console.log, it returns nothing and I can’t get it to pick up any element from within the date. Can someone help me with that?

-EDIT- Solution for those who need it:

console.log(data.data[0].cardapioId);

Answer 1

you are returning an array.

Use This

console.log(data.data[0].cardapioId);

Answer 2

As you are bringing an array of objects, to gain access, it will have to be:

console.log(data.data[0].atributo);

Answer 3

Hello, when you use the @Requestmapping annotation to produce={"application/json"} you don’t need to write it down with @Respondebody. You also don’t need the return to be string type, you can directly return the object and Spring will transform it into json format.