javascript does not recognize the array possible when I set

Question

I am making a project in Ionic 3 however when weighed for it shows a specific place of the array it does not recognize and undefine my code:

 public status: boolean = null;
public id_est = null;
public item;
public LojaDados;

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
    this.route.params.subscribe(parametros => {
        if (parametros['id']) {
            this.id_est = parametros['id'];
            this.produtos();
        }
    });
    this.status = false;
}

produtos() {
    let estabelecimento = this.id_est;
    let produto = [];
    let loja = [];
    $.post('http://localhost/nolo/api/produtos/produtos.php', {
            id_estabelecimento: estabelecimento,
            hash: sessionStorage.getItem('hash')
        },

        function (data) {
            if (data.status === 'sucesso' || data.status === 'Sucesso') {
                //console.log(data);
                if (data.data.menssage != 'undefined') {
                    loja[0] = {
                        nomes: data.data.nome,
                        tipos: data.data.tipo,
                        descicaos: data.data.descicao,
                    };
                    $.each(data.data.descricao_prod, function (i, d) {
                        produto[i] = {
                            Valo: data.data.valor[i],
                            DescricaoProduto: data.data.descricao_prod[i],
                            Produto: data.data.produtos[i]
                        };
                    });
                  //  console.log(produto);
                } else {
                    loja[0] = {
                        nomes: data.data.mensage.nome,
                        tipos: data.data.mensage.tipo,
                        descicaos: data.data.mensage.descicao,
                        mensage: data.data.menssage.motivo
                    };
                }
            }
        });
    this.item = produto;
    this.LojaDados = loja;
    $('#nomedaloja').empty();
    console.log('loja');
    console.log(this.item);
    console.log('loja');
    //$('#nomedaloja').append(loja[0].nomes);
    console.log(this.item);
    console.log(this.LojaDados);
}

If I print it so it appears content :

console.log(this.item);

But when I have it printed like this:

console.log(this.item[0]);

He returns me undefinid:

Answer 1

The reason is that the code executes before being set has so

 public status: boolean = null;
public id_est = null;
public item;
public LojaDados;

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
    this.route.params.subscribe(parametros => {
        if (parametros['id']) {
            this.id_est = parametros['id'];
            this.produtos();
        }
    });
    this.status = false;
}

produtos() {
    let estabelecimento = this.id_est;
    let produto = [];
    let loja = [];
    $.post('http://localhost/nolo/api/produtos/produtos.php', {
            id_estabelecimento: estabelecimento,
            hash: sessionStorage.getItem('hash')
        },

        function (data) {
            if (data.status === 'sucesso' || data.status === 'Sucesso') {
                //console.log(data);
                if (data.data.menssage != 'undefined') {
                    loja[0] = {
                        nomes: data.data.nome,
                        tipos: data.data.tipo,
                        descicaos: data.data.descicao,
                    };
                    $.each(data.data.descricao_prod, function (i, d) {
                        produto[i] = {
                            Valo: data.data.valor[i],
                            DescricaoProduto: data.data.descricao_prod[i],
                            Produto: data.data.produtos[i]
                        };
                    });
                  //  console.log(produto);
                } else {
                    loja[0] = {
                        nomes: data.data.mensage.nome,
                        tipos: data.data.mensage.tipo,
                        descicaos: data.data.mensage.descicao,
                        mensage: data.data.menssage.motivo
                    };
                }
            }
        }).then(() => {
            this.item = produto;
    this.LojaDados = loja;
    $('#nomedaloja').empty();
    console.log('loja');
    console.log(this.item);
    console.log('loja');
    //$('#nomedaloja').append(loja[0].nomes);
    console.log(this.item);
    console.log(this.LojaDados);
        });

}

Using the:

.then()=>{}

the other part is executed only when the first part is completed