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);
}
json_decode($array, true)
. Esse segundo parâmetro, quandotrue
, converte ojson object
emarray
.