# Escrevendo JavaScript por {{ }}
Ao construir aplicativos no PocketBlocks, você pode usar JavaScript (JS) para acessar e transformar dados de objetos, incluindo componentes, consultas e parâmetros globais. Ao escrever JavaScript dentro da caixa de entrada da propriedade do componente, configurações de coluna da tabela, etc., lembre-se sempre de colocar todo o seu código JS entre chaves duplas, como `{{'olá, ' + usuarioAtual.nome}}`.
## Acessando dados
Os objetos têm nomes globalmente exclusivos, como `entrada1`, `consulta1` e `tabela1`. Você pode consultar as propriedades dos objetos em seu aplicativo por código JS.
### Acessando dados em um objeto
PocketBlocks oferece suporte para acessar os dados em um objeto usando notação de ponto (`nomeDoObjecto.nomeDaChave`). Por exemplo, `{{informacoesDoUsuario.selectedRow.nome}}` acessa o valor `nome` na linha atualmente selecionada da **Tabela** `informacoesDoUsuario`.
Ao escrever JS em `{{ }}` para acessar valores em um objeto, adicione um `.` após o nome do objeto para acionar um menu de sugestão automática caso você não tenha certeza sobre as propriedades ou métodos integrados dos objetos.
**Exemplo**
Este GIF mostra como a notação de ponto aciona um menu de sugestão automática e exibe as propriedades de `tabela1`.
### Acessando dados em um array
Você pode acessar os valores em um array por índice. O índice sempre começa em 0, então você pode usar `array[0]` para acessar o primeiro elemento do array.
**Exemplo**
A propriedade **Data** do componente **Tabela** é uma matriz de objetos. Este GIF mostra como acessar o valor de `primeiro_nome` no primeiro elemento do array **data** em `tabela1`.
## Transformando dados
Você pode aproveitar funções JS integradas e bibliotecas de terceiros em `{{ }}` para transformar dados, como operações `filter()`, `map()` e `reduce()`.
**Exemplos**
Colocando texto em caixa baixa.
```javascript
{
{
entrada1.value.toLowerCase();
}
}
```
Alterar formato de data
```javascript
{
{
moment(tabela1.selectedRow.coluna).format("DD/MM/YYYY");
}
}
```
Retornar o nome dos resultados da consulta.
```javascript
{{consulta1.data.map(i => i.nome)}}.
```
## Restrições
O código JS em `{{ }}` deve ser um código de linha única, como `.map()` ou `.reduce()` combinado com uma função de seta ou um operador ternário.
**Exemplos**
```javascript
{
{
consulta1.data.id.length;
}
} // ✅ para referenciar um valor
{
{
consulta1.data.map((linha) => linha.id);
}
} // ✅ .map() + função arrow
{
{
num1 > num2 ? num1 : num2;
}
} // ✅ ternário
```
Os seguintes exemplos de código JS são ilegais em `{{ }}`.
```javascript
{
{
// ❌ você não pode escrever código como este em {{ }}
const lista = consulta1.data;
const listaFiltrada = lista.filter((isso) => isso.valor > 10);
return listaFiltrada;
}
}
```
Se você deseja orquestrar múltiplas linhas de JavaScript, PocketBlocks oferece suporte para escrever esse código em [transformadores](/portugues-brasil/construcao-de-aplicativos/write-javascript/transformers.md).
```javascript
// códigos dentro de um transformador
if (seletor.value === "1") {
return "Opção 1";
}
if (seletor.value === "2") {
return "Opção 2";
}
return "Opção 3";
```
## Ver dados
Os dados das consultas podem ser complicados e aninhados em casos reais. A visualização de dados fornece a estrutura detalhada dos dados em objetos e ajuda a entendê-los melhor. Antes de acessar ou transformar dados, pode ser necessário primeiro visualizar os dados e sua estrutura. PocketBlocks oferece três maneiras de visualizar dados.
### Ver resultado da consulta
Depois de executar uma consulta dentro do editor de consultas, clique no botão **Executar**. O resultado da consulta é exibido no formato mostrado abaixo.
### Visualizando dados no navegador de dados
O navegador de dados localizado no painel esquerdo exibe todos os dados dentro do seu aplicativo. Você pode clicar no nó para expandir e visualizar a estrutura de dados.
### Visualizando em tempo real
Ao configurar propriedades ou escrever código JS dentro de um editor, você pode visualizar o resultado avaliado em tempo real em uma caixa abaixo do seu editor.
---
# 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://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/write-javascript/write-javascript-in.md?ask=
```
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.