2

Preciso de uma ajuda, estou desenvolvendo um app com HMTL5, JS, CSS que lista um cardápio de pizza. O meu PHP retorna um array que eu uso o json_encode() para poder disponibilizar no formato JSON. Até aqui tudo então tenho a seguinte <div>:

<div class="card">
  <div class="logo">
   <img src"image1.jpg">
   <h2>title imagens</h2>
   <p>Outro titulo</p>
  </div>
</div>

A minha pergunta é como posso fazer para construir a estrutura acima e fazer um laço para preencher os elementos com os dados do objeto JSON. No PHP poderia apenas utilizar o foreach e dar um echo $matriz['valor']. Mas como é um App não queria transmitir muitos dados.

2
  • por favor, adicione um exemplo do JSON retornado Commented 19/05/2015 às 11:44
  • Não entendi a dificuldade.. Se já está usando array, basta continuar usando o array.. Você codifica o array em formato json. E para ler, basta decodificar de volta como um array associativo json_decode($array, true). Esse segundo parâmetro, quando true, converte o json object em array. Commented 28/09/2015 às 7:47

3 Respostas 3

1

postar aqui um complemento a resposta do William Urbano, com uma forma alternativa para montar os cards.

var imagens = [
    {
        "titulo": "Imagem 01",
        "descricao": "Lorem ipsum Culpa quis et",
        "img": "/images/img1.jpg"
    }, {
        "titulo": "Imagem 02",
        "descricao": "Lorem ipsum Laborum exercitation ea consequat ad",
        "img": "/images/img2.jpg"
    }, {
        "titulo": "Imagem 03",
        "descricao": "Lorem ipsum Magna incididunt proident culpa Duis",
        "img": "/images/img3.jpg"
    }, {
        "titulo": "Imagem 04",
        "descricao": "Lorem ipsum Ut proident dolor enim id",
        "img": "/images/img4.jpg"
    }, {
        "titulo": "Imagem 05",
        "descricao": "Lorem ipsum Ut fugiat ut veniam",
        "img": "/images/img5.jpg"
    }, {
        "titulo": "Imagem 06",
        "descricao": "Lorem ipsum Cupidatat enim Excepteur in",
        "img": "/images/img6.jpg"
    }, {
        "titulo": "Imagem 07",
        "descricao": "Lorem ipsum Occaecat esse cillum deserunt reprehenderit",
        "img": "/images/img7.jpg"
    }, {
        "titulo": "Imagem 08",
        "descricao": "Lorem ipsum Tempor dolor commodo fugiat elit in",
        "img": "/images/img8.jpg"
    }, {
        "titulo": "Imagem 09",
        "descricao": "Lorem ipsum Ut mollit eu nostrud Duis",
        "img": "/images/img9.jpg"
    }, {
        "titulo": "Imagem 10",
        "descricao": "Lorem ipsum Ut cillum in voluptate deserunt",
        "img": "/images/img10.jpg"
    }
];

var cards = document.getElementById("cards");
var tmplCard = document.getElementById("tmplCard").innerHTML;

cards.innerHTML = imagens.map(function (imagem) {
    return tmplCard.replace(/{(\w+)}/g, function(match, key){
        return imagem[key];
    });
}).join("");
console.log(teste);
<div id="cards">
    
</div>

<script id="tmplCard" type="text/template">
    <div class="card">
        <div class="logo">
            <img src="{img}" />
            <h2>{titulo}</h2>
            <p>{descricao}</p>
        </div>
    </div>
</script>

0

Tente utilizar a seguinte estrutura JSON:

[{
    "id": 1,
    "nome": "Lorem ipsum Culpa quis et",
    "img": "/images/img1.jpg"
}, {
    "id": 2,
    "nome": "Lorem ipsum Laborum exercitation ea consequat ad",
    "img": "/images/img2.jpg"
}, {
    "id": 3,
    "nome": "Lorem ipsum Magna incididunt proident culpa Duis",
    "img": "/images/img3.jpg"
}, {
    "id": 4,
    "nome": "Lorem ipsum Ut proident dolor enim id",
    "img": "/images/img4.jpg"
}, {
    "id": 5,
    "nome": "Lorem ipsum Ut fugiat ut veniam",
    "img": "/images/img5.jpg"
}, {
    "id": 6,
    "nome": "Lorem ipsum Cupidatat enim Excepteur in",
    "img": "/images/img6.jpg"
}, {
    "id": 7,
    "nome": "Lorem ipsum Occaecat esse cillum deserunt reprehenderit",
    "img": "/images/img7.jpg"
}, {
    "id": 8,
    "nome": "Lorem ipsum Tempor dolor commodo fugiat elit in",
    "img": "/images/img8.jpg"
}, {
    "id": 9,
    "nome": "Lorem ipsum Ut mollit eu nostrud Duis",
    "img": "/images/img9.jpg"
}, {
    "id": 10,
    "nome": "Lorem ipsum Ut cillum in voluptate deserunt",
    "img": "/images/img10.jpg"
}];

Utilize também uma <div> para receber todos os itens:

...
<body>
    <div id="items-container"></div>
...

Já a iteração dos dados JSON pode ser feita da seguinte forma:

var dados = JSON.parse('dados.json');

var container = document.getElementById('items-container'),
    divCard,
    divLogo,
    divLogoImg,
    divLogoH2,
    divLogoP;

for (var i in dados) {
    // Veja seu objeto para organizar as informações
    console.log(dados[i]);

    divLogoP = document.createElement('p');
    divLogoP.textContent = "Outro titulo";

    divLogoH2 = document.createElement('h2');
    divLogoH2.textContent = "title imagens";

    divLogoImg = document.createElement('img');
    divLogoImg.src = "/images/img10.jpg";

    divLogo = document.createElement('div');
    divLogo.className = "logo";
    divLogo.appendChild(divLogoImg);
    divLogo.appendChild(divLogoH2);
    divLogo.appendChild(divLogoP);

    divCard = document.createElement('div');
    divCard.className = "card";
    divCard.appendChild(divLogo);

    container.appendChild(divCard);
}
0

Você pode usar o each para percorrer o json e inserir os valores nos campos que deseja exemplo:

var json = {
    "resposta": [

      {
        "titulo": "A TERRA",
        "outroTitulo": "DIA DA TERRA"
      }
    ]

  } // exemplo de json

   $.each(json['resposta'], function(key, value) 
    {
        $.each(json['resposta'], function(key_result, value_result)
        {
           $('h2').append(value_result['titulo'] + '
'); $('h2').append(value_result['outroTitulo']); }); }); // each percorre todo json procurando pelos indices titulo e outroTitulo e substituem nas tags.

EXEMPLO

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 .