0

Eu fiz esse de código javascript, em um arquivo .js, onde minha intenção é pegar os dados de um arquivo JSON e usar no meu HTML. Não sei como usar a função $.getJSON no meu código para fazer isso e juntar uma coisa com a outra. Agradeço qualquer ajuda.

function loadBands() {
var saida = '';

//for(j = 0; j < 3; j++){
    for (i = 0; i < bands.length; i++) {
    saida += '<div class="row">';
    saida += '<div class="col-lg-4 band-img">';
    saida += '<img src="' + bands[i].picture + '" alt="' + bands[i].name + '" title="' + bands[i].name + '">';
    saida += '</div>';
    saida += '</div>';
    };
//};

document.getElementById ('tela').innerHTML = saida;

}

Abaixo um trecho do arquivo JSON, que fica em um diretório separado "js/database.json".

{
"bands": [
    {
        "id": 1,
        "name": "Tesseract",
        "email": "[email protected]",
        "phone": "99669-9966",
        "description": "TesseracT has arrived at the highly coveted destination of true creative freedom through bold artistic risk-taking, which has resulted in a loyal audience who are not only comfortable with being challenged by each successive release, but demand to be. A new TesseracT recording is a gift to unwrap, a puzzle to solve, an adventure that beckons.",
        "web_site": "http://tesseractband.co.uk/",
        "picture": "http://tesseractband.co.uk/wp-content/uploads/2015/07/tesseract-promo.jpg"
    },
    {
        "id": 2,
        "name": "ONE OK ROCK",
        "email": "[email protected]",
        "phone": "84848-9989",
        "description": "ONE OK ROCK is a Japanese rock band formed in 2005 and is represented by Amuse, Inc. It performs approximately 100 live concerts every year.",
        "web_site": "http://www.oneokrock.com/",
        "picture": "http://www.oneokrock.com/wp-content/uploads/2016/05/7c3a5f0fa95101d2d2923e447e1b9abf.jpg"
    },

Abaixo o meu HTML onde tento carregar o resultado do javascript.

<!-- Bands Section -->
<section id="bands" class="content-section text-center" onload="loadBands()">
    <div class="bands-section">
        <div class="container">
            <div class="row">
                <!-- Band Wall -->
                <div class="col-lg-6 col-lg-offset-0">
                    <div id="tela">Carregando ...</div>
                </div>
                <!-- Band Search and Info -->
                <div class="col-lg-4">

                </div>
            </div>
        </div>
    </div>
</section>
4
  • O que você tem como backend?
    – Lucas
    13/06/2017 às 18:44
  • eu tô rodando usando o xampp
    – isaloredo
    13/06/2017 às 19:27
  • Então está usando php ?
    – Lucas
    13/06/2017 às 19:36
  • é html mesmo, é uma pagina template do bootstrap q eu estou modificando. tem o index.html, os arquivos de css, javascript e o json em diretorios.
    – isaloredo
    13/06/2017 às 22:50

1 Resposta 1

1

Seria algo como:

$.getJSON("js/database.json", function(data) {
  var bands = data.bands;

  for (i = 0; i < bands.length; i++) {
    saida += '<div class="row">';
    saida += '<div class="col-lg-4 band-img">';
    saida += '<img src="' + bands[i].picture + '" alt="' + bands[i].name + '" title="' + bands[i].name + '">';
    saida += '</div>';
    saida += '</div>';
  }

  document.getElementById('tela').innerHTML = saida;
});

http://plnkr.co/edit/5rycBArjQRcPmnRc9Fxs?p=preview

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 .