Skip to main content

Bom dia, eu tenho uma api que irá me retornar uma array de locais e estou fazendo um script para interar esses array, porém o meu desejo é criar um menu numerado com essa lista ex.:

  1. Localidade 1
  2. Localidade 2
  3. Localidade 3

Nesse array o minimo de localidade é de 1 e maximo de 20, então fiquei com a dúvida de como fazer essa lista numerada e de como atribuir o valor da opção do usuário escolheu dentro de um array!

Bom dia @Wellington_de_Brito,
O que vou passar pra vocÊ talvez não funcione porque não sei como é o retorno dessa sua API. Mas tenho esse script aqui.

Você vai passar como parâmetro esse seu retorno da API, uma variável de index que deve ter o valor 1 e quantas localidades você quer exibir por vez.

function run(actualIndex, localidade, maxDealersMenu) { //Indice atual, array json com as localidades, qunatidade máxima de css que vc vai exibir (o conteúdo dinâmico suporta 9 + ver mais)
    var dealers = JSON.parse(localidade);
    actualIndex = Number(actualIndex) - 1;
    var view = [];
    var content = '';
    maxDealersMenu = dealers.length < maxDealersMenu ?  dealers.length : maxDealersMenu;
    var maxDealers = actualIndex + Number(maxDealersMenu);
    
    for(var i = actualIndex; i < maxDealers; i++){ // for para ir adicionando as localidades para dentro do content
        var resource = dealers[i];
        if(resource){
            var index = i+1;
            content += `{
                        "id": "${index}",
                        "title": "${index} ${resource.substr(0,24)}",
                    },`;
        }
    }

    if(actualIndex == 0 && dealerslength > maxDealersMenu){ // Vai criar a opção "ver mais" caso tenha + de 9 localidades
        content += `{
                        "id": "0",
                        "title": "Ver mais",
                        "description": "Não encontrou a localidade desejada? Clique aqui para ver mais."
                    },`;
    }

    return { //Da o return do index + o content
        "actualIndex": (maxDealers + 1).toString(),
        "content": content
    };
}

Depois você vai ter que criar outro script passando como referência o resultado do script acima

function run(dealersView) {
    return JSON.parse(dealersView).content; 
}

Agora você cria um bloco de conteúdo dinâmico no seguinte formato

{
    "recipient_type": "individual",
    "type": "interactive",
    "interactive": {
        "type": "list",
        "header": {
            "type": "text",
            "text": "Localidades"
        },
        "body": {
            "text": "Um texto de menu qualquer"
        },
        "action": {
            "button": "Selecionar",
            "sections": [
                {
                    "rows": [
                        {{script2Content}} //Vai colocar aqui o output do segundo script
                    ]
                }
            ]
        }
    }
}

Por fim você vai ter que atualizar a sua variável de index, porque ela muda caso o usuário deseje ver mais localidades

image

Acredito que você pode tentar fazer a sua solução em volta desse código que passei, provavelmente você terá que mudar algumas variáveis


@Giovanni_Soares Bom dia! Então esse é o retorno da minha lista de condominios
image

essa solução acima funcionaria?

E verfiquei que você passa 3 parametros na função, quais seriam essas variáveis? Eu passo somente a variável que vem de retorno da api aqui?
image


@Wellington_de_Brito boa tarde, funciona sim, tem que fazer apenas umas modificações, pra atender ao seu script ele ficaria assim:

function run(actualIndex, localidade, maxDealersMenu) { //Indice atual, array json com as localidades, qunatidade máxima de css que vc vai exibir (o conteúdo dinâmico suporta 9 + ver mais)
    var dealers = (localidade);
    actualIndex = Number(actualIndex) - 1;
    var view = [];
    var content = '';
    maxDealersMenu = dealers.quant < maxDealersMenu ?  dealers.quant : maxDealersMenu;
    var maxDealers = actualIndex + Number(maxDealersMenu);
    
    for(var i = actualIndex; i < maxDealers; i++){ // for para ir adicionando as localidades para dentro do content
        var resource = dealers.locais[i].local;
        if(resource){
            var index = i+1;
            content += `{
                        "id": "${index}",
                        "title": "${index} ${resource}",
                    },`;
        }
    }

    if(actualIndex == 0 && dealers.quant > maxDealersMenu){ // Vai criar a opção "ver mais" caso tenha + de 9 localidades
        content += `{
                        "id": "0",
                        "title": "Ver mais",
                        "description": "Não encontrou a localidade desejada? Clique aqui para ver mais."
                    },`;
    }

    return { //Da o return do index + o content
        "actualIndex": (maxDealers + 1).toString(),
        "content": content,
    };
}

os parâmetros da função são nessa ordem:
- Uma variável de índice que vc vai criar com qualquer nome (no caso do exemplo eu uso dealerIndex) que TEM que ter o valor inicial 1.
- O retorno da sua lista de condominios
- Quantos condominios você quer exibir no seu menu (esse valor pode ser no máximo 9 devido a compatibilidade do conteúdo dinâmico do BLip)

O segundo script que eu passei e o conteúdo dinâmico vai continuar a mesma coisa.

Por fim você vai ter que atualizar a sua variável de index, porque ela muda caso o usuário deseje ver mais localidades (foto que eu mandei no comentário anterior)
OBS: O delaersView que ta ali no valor é o output do primeiro script


uma dúvida, como eu passaria somente o array com a lista de condominios na variável de entrada do script. Por exemplo eu tenho esse JSON

{
	"quant": "2",
	"locais": [
		{
			"id_local": "165",
			"local": "HELLOO APP"
		},
		{
			"id_local": "181",
			"local": "CONDOMÍNIO METRO OFFICE BUTANTÃ"
		}
	]
}

Só quero passar o locais!!


Pode passar inteiro, que funciona, porque no script eu uso tbm esse valor “quant” aí que eu suponho que seja a quantidade de condomínios localizados (se n for deu ruim kkkkk).


Ok! Estou fazendo aqui o script se surgir alguma dúvida chamo aqui!!


@Giovanni_Soares Ele me retornou um Not a Number kkk
image


eu mandei uma coisa errada, troca “var dealers = (localidade);” por “var dealers = JSON.parse(localidade);” no primeiro script e olha se vai


Troquei aqui!! Vou fazer o teste pq estava testando e o dealers estava dando undefined e o maxDelaresMenu tbm.


Ops!! Esqueci de descomentar uma parte do código kkkk


image
Continua com Not A Number… acredito que seja devido o dealers está como undefined e o maxDelaresMenu também!!


Tenta fazer o teste aí definindo essas variáveis. Estranho pq o script em si funcionou quando fiz os testes aqui no meu computador 🤔


Estou fazendo aqui!! Coloquei com o return dealers.toString(); no final da função no lugar desse { "actualIndex": (maxDealers + 1).toString(), "content": content, } o resultado foi
image

Ele retorna o objeto! Ou seja não está fazendo o for pq quando entra loop ele ainda está como objeto!


@Giovanni_Soares Não estou conseguindo acessar o array da variável já tentei

var dealers = JSON.parse(localidade.locais)
var result= dealers.locais

e todos esses dão undefined!


@GabrielPetrone esse é o script que estou usando:


eu já coloquei daquela forma que você tinha me passado, porém ele me retorna undefined! E assim desse jeito ele está entrando no loop (for) como um objeto e assim ele não consegue fazer a interação do array!


@Giovanni_Soares eu estou encontrando esse erro ao rodar o meu script no bot!


Consegui resolver o problema do array, porém travei aqui e não estou conseguindo dar continuidade no script, pois quando tento fazer ele retornar esse objeto me dar esse erro!!


Hey @Wellington_de_Brito , ontem precisei me ausentar e por isso não te respondi, me desculpe.

Vamos tentar ir por partes (como diria o Jack) com esse script? Eu vi o tópico aqui mas estou um pouco confuso.

A primeira pergunta que eu tenho é:

  • Qual o canal que você irá publicar o seu chatbot?

Agora, vamos pensar num cenário simples onde você apenas vai listar (em texto) quais são os locais disponíveis. Você precisaria apenas desse script:

Variáveis de entrada: locais
Variável de saída: menu
function run(locais) {
  locais = JSON.parse(locais);

  var count = 1;
  var txt = "";

  locais.locais.forEach(element => {
    txt += count + ". " + element.local + "\n";
    count++;
  });

  return txt;
}

Esse script retornará:

  1. HELLOO APP
  2. CONDOMÍNIO METRO OFFICE BUTANTÃ

Com isso é só adicionar a var menu no seu conteúdo do bloco.

Neste script, eu usei o seguinte retorno (na var locais) que você passou da sua API:

{
	"quant": "2",
	"locais": [
		{
			"id_local": "165",
			"local": "HELLOO APP"
		},
		{
			"id_local": "181",
			"local": "CONDOMÍNIO METRO OFFICE BUTANTÃ"
		}
	]
}

Veja se consegue fazer isso primeiro e vamos evoluindo com as próximas partes.
Aguardo.


@GabrielPetrone Tudo bem Gabriel! Então eu irei publicar no whatsapp pois estou fazendo esse bot para empresa que trabalho! A ideia é realizar uma lista de até 20 locais, por cada sindico terá uma lista de condominios. Por exemplo um sindico pode ter 3 condomios um outro pode ter 10 e assim em diante! Então queria mostrar essa lista para eles de forma numerada para que eles possam selecionar qual o condominio eles querem realizar a ação! Então pegando essa resposta irei guardar em uma variável o valor do id dele no caso 'id_local' para que ele possa ser enviado em uma requisição HTTP, fez sentido a explicação?


Boa!
O que o @Giovanni_Soares trouxe é um script muito bom pra utilizar o componente de List Message do WhatsApp, mas você vai precisar fazer algumas tratativas pra não quebrar o fluxo devido a limitações que o WhatsApp coloca para esse componente. Pensando nisso, recomendo que você use um texto puro, como no exemplo que dei acima.

Agora vamos validar outro ponto:
Você gostaria que a lista fosse numerada sequencialmente? Exemplo:

  1. HELLOO APP
  2. CONDOMÍNIO METRO OFFICE BUTANTÃ

Ou de acordo com os seus ids? Exemplo:

  1. HELLOO APP
  2. CONDOMÍNIO METRO OFFICE BUTANTÃ

Não precisa ser numerada sequencialmente, para pegar o id dele eu posso fazer um script depois comparando a resposta do usuário com o array sem problemas, a minha unica dúvida é colocar esses 20 itens na tela!! Eu conseguiria colocar dessa forma que você me passou?


Boa, perfeito.
Da forma que te passei (usando a função forEach) ele vai listar todos os itens em locais, que a sua API retornar. Vai ser sucesso!

Manda bala e qualquer dúvida nos marque aqui.


@GabrielPetrone Perfeito! Agora eu fui colocar no conteudo dinamico para fazer a lista me retornou assim:


É porque você ainda está usando a sugestão do Giovanni, essa parte aqui:

Nesse caso que eu te exemplifiquei, você pode mudar o conceito e usar apenas um conteúdo do tipo texto passando a variável de saída.
Seguindo o exemplo que eu montei em cima onde a variável de saída é menu, você só precisa fazer isso no seu bloco que está o conteúdo dinâmico:
image

Entendeu?


Ah sim! Então Perfeito!! Obrigado!!