0

Boa noite, pessoal.

Preciso pegar um retorno json e montar um html com os dados dinamicamente. Cheguei até a parte de conseguir pegar o json e nada mais, estou travado.

$.ajax({
    type: "get",
    url: "products.json",
    dataType: "json",
    success: function (data) {
        $(data.cart.item).each(function (index, product) {
            
        })
    }
});
<div class="hide-scroller">
                <div class="hide-product">
                    <img class="hide-img" src="img/note-gamer-acer-160-160.jpg" alt="">
                    <div class="colum-product">
                        <p id="name">Notebook Gamer Acer</p>
                        <p id="quant">Qtd.: 1 <span id="total">R$ 7.158,21</span></p>
                    </div>
                </div>
            </div>

1 Resposta 1

0

Você tem várias formas de se fazer isso. Usando a API repositórios do GitHub, podemos fazer um exemplo:

const API_URL = 'https://api.github.com/users/lffg/repos?sort=updated';

function generateHTML(data) {
  const repositories = data;
  const $list = $('.list');

  for (const repository of repositories) {
    // Criamos um elemento `<a>`, adicionamos o texto e alguns atributos:
    const $item = $('<a>');
    $item.css('display', 'block');
    $item.text(repository.name);
    $item.attr('href', `https://github.com/${repository.full_name}`);

    // Inserimos o elemento que criamos acima (o `<a>`) na lista.
    $list.append($item);
  }
}

$.ajax({
  type: 'get',
  url: API_URL,
  dataType: 'json',
  success: generateHTML
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list">
  <!-- Os itens serão adicionados aqui dinâmicamente. -->
</div>

No exemplo acima, como a API do GitHub retorna uma estrutura em JSON da seguinte maneira:

[
  { /* Objeto de um repositório. */ },
  { /* Objeto de outro repositório. */ },
  // ...
]

Devemos iterar sobre cada elemento do array. É por isso que temos a seguinte declaração:

const repositories = data;

Se você tiver um JSON mais ou menos assim:

{
  "items": [
    { /* Objeto de um repositório. */ },
    { /* Objeto de outro repositório. */ },
    // ...
  ]
}

Deverá o trecho destacado acima para:

const repositories = data.items;

Para saber mais sobre essa notação, leia assessores de propriedade na MDN.


Se você quiser elaborar um template um pouco mais avançado, pode usar as template strings. Deixo também um exemplo com um HTML um pouco mais complexo:

const API_URL = 'https://api.github.com/users/lffg/repos?sort=updated';

function generateHTML(data) {
  const repositories = data;
  const $list = $('.list');

  for (const repository of repositories) {
    const $item = $(`
      <div class="item">
        <strong>${repository.name}</strong>
        <em>Linguagem: ${repository.language}</em>
        <a href="https://github.com/${repository.full_name}" target="_blank">
          Link ->
        </a>
      </div>
    `);

    // Inserimos o elemento que criamos acima na lista:
    $list.append($item);
  }
}

$.ajax({
  type: 'get',
  url: API_URL,
  dataType: 'json',
  success: generateHTML
});
.item {
  border: solid 1px #555;
  margin-bottom: 1rem;
  padding: 5px;
}

.item > * {
  display: block;
}

.item > strong {
  font-family: monospace;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .