# Mustache

A notação Mustache desempenha um papel fundamental no desenvolvimento de APIs ao permitir a separação clara entre a lógica de negócios e a apresentação de dados. Em um contexto de API, onde os dados são frequentemente transmitidos entre servidores e clientes, a notação Mustache oferece uma maneira simples e eficaz de estruturar e exibir esses dados de forma dinâmica.

<figure><img src="/files/JG8xl7K32OGm6vLKPmQL" alt=""><figcaption></figcaption></figure>

## O que é Mustache?

No caso do Floui a notação Mustache é amplamente utilizada para manipular e exibir valores através de objetos Javascript que são transferidos entre conectores dentro do fluxo.

<figure><img src="/files/ZcDPELfT5IEuBThbsNf5" alt=""><figcaption><p>Utilizando notações Mustache na plataforma Floui.</p></figcaption></figure>

No Floui, as cargas de saída relacionados a um determinado componente podem ser acessadas por [`msg.payload`](/guia/conectores/estrutura-do-conector.md#anatomia-de-um-conector) (saiba mais sobre a [Anatomia de um conector Floui](/guia/conectores/estrutura-do-conector.md#anatomia)).

Neste contexto, os campos geralmente são referenciados usando essa sintaxe a partir do objeto da mensagem que trafega pelo fluxo. Por exemplo, se quisermos utilizar o valor de um campo específico na mensagem, utilizamos algo semelhante à notação `{{msg.payload}}`

## Sintaxe básica

1. **valores de variáveis**

   As variáveis são representadas entre chaves duplas `{{ }}` e sem espaços internos.

   * Exemplo: `{{nome}}`

   No contexto de uma API, `nome` seria uma variável que seria substituída pelo valor correspondente quando o template fosse renderizado.
2. **utilizando com HTML**

   Para evitar a interpretação de HTML nas variáveis, você pode usar chaves triplas `{{{ }}}`.

   * Exemplo: `{{{conteúdoHTML}}}`

   Isso é útil para evitar ataques de injeção de código (XSS), já que o conteúdo HTML será tratado como texto simples.
3. **criando seção:**

   As seções são usadas para lidar com listas ou estruturas condicionais.

   * `{{# secao }}` indica o início de uma seção.
   * `{{/ secao }}` indica o final de uma seção.

No exemplo a seguir, **`produtos`** é uma lista de objetos e o template dentro da seção será repetido para cada objeto na lista.

{% code title="" overflow="wrap" lineNumbers="true" %}

```mustache
var produtos = [
  {
    descrição: "Blusa feminina tam M",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  },
  {
    descrição: "Shorts feminino tam P",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  }
];

{{#produtos}}
  {{descrição}}
  {{#cores}}
    {{.}}
  {{/cores}}
{{/produtos}}

```

{% endcode %}

{% hint style="info" %}
O ponto na linha 15 dentro do bloco `{{#cores}}` representa o contexto atual da iteração. Neste caso, ele se refere a cada elemento individual no array de cores.
{% endhint %}

## Acessando um atributo

Considere o seguinte objeto JSON:

{% code title="msg.payload" overflow="wrap" lineNumbers="true" %}

```json
{
    name:'Floui',
    site: 'https://floui.io/',
    app: 'https://app.floui.io/', 
    since : [2021, 2022, 2023]   
}
```

{% endcode %}

Agora, para acessar o atributo que contém uma string com o link para o site da plataforma, precisamos usar `{{msg.payload.app}}` ou ainda, podemos acessar os demais atríbutos alterando apenas o caminho:

* `{{msg.payload.app}}` -> <https://app.floui.io/>
* `{{msg.payload.name}}` -> Floui

## Helpers

<table data-full-width="false"><thead><tr><th width="224">Helper</th><th width="280.3333333333333">Função</th><th>Exemplo de uso</th></tr></thead><tbody><tr><td><code>var</code></td><td>Substitui a expressão por um valor de variável cadastrada no Floui</td><td>{{var nome_da_variavel}}</td></tr><tr><td><code>json</code></td><td>Substitui a expressão por um objeto Javascript convertido em JSON (String)</td><td>{{json msg.payload}}</td></tr><tr><td><code>to_float</code></td><td>Substitui a expressão pelo valor já convertido para <code>float</code></td><td>{{to_float msg.price}}</td></tr><tr><td><code>to_int</code></td><td>Substitui a expressão pelo valor já convertido para <code>integer</code></td><td>{{to_int msg.payload.ID}}</td></tr><tr><td><code>to_base64</code></td><td>Substitui a expressão pelo valor já convertido para <code>base64</code></td><td>{{to_base64 msg.response.data}}</td></tr><tr><td><code>to_slug</code></td><td>Substitui a expressão pelo valor convertido em um <em>Slug</em>, substituindo caracteres especiais por traços. </td><td><code>uma-frase-em-forma-de-slug</code></td></tr><tr><td><code>var timestamp</code></td><td>Substitui a expressão pelo valor de timestamp do momento da execução do Flow</td><td>{{var timestamp}}</td></tr><tr><td><code>var workspace_url</code></td><td>Substitui a expressão pelo valor da URL pública do workspace</td><td>{{var workspace_url}}</td></tr><tr><td><code>var current_time</code></td><td>Substitui a expressão pelo horário da execução do fluxo</td><td>{{var current_time}}</td></tr><tr><td><code>var current_datetime</code></td><td>Substitui a expressão pela data e horário da execução do fluxo</td><td>{{var current_datetime}}</td></tr><tr><td><code>var current_date</code></td><td>Substitui a expressão pela data da execução do fluxo</td><td>{{var current_date}}</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.floui.io/guia/funcionalidades/mustache.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.