List json object returned by php

Question

List json object returned by php

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I need a help, I'm developing an app with HMTL5, JS, CSS that lists a pizza menu. My PHP returns an array that I use json_encode() to make it available in JSON format. So far everything then I have the following <div> :

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

My question is how can I build the above structure and loop to fill in the elements with the JSON object data. In PHP you could just use foreach and give echo $matriz['valor'] . But as it is an App did not want to transmit much data.

php javascript html5 json

asked by anonymous 19.05.2015 / 01:51

3 answers

I would like a brief explanation of how to fill a combobox in MVVM pattern section overlap my header

score 1 · Answer 1

Post here to complement William Urbano's answer, with an alternative way to assemble the 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>

score 0 · Answer 2

Try using the following JSON structure:

[{
    "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"
}];

Also use <div> to receive all items:

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

Already the iteration of the JSON data can be done as follows:

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);
}

score 0 · Answer 3

You can use each to scroll through json and enter the values in the fields you want to use:

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.

EXAMPLE