how to load read JSON file in JS and load search result in HTML code?

Question

how to load read JSON file in JS and load search result in HTML code?

Navigation

#1 by (2 votes)

0

I made this javascript code in a .js file, where my intent is to get the data from a JSON file and use it in my HTML. I do not know how to use the $ .getJSON function in my code to do this and put one thing together. Thanks for any help.

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;

}

Below is an excerpt from the JSON file, which is located in a separate directory "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"
    },

Below my HTML where I try to load the javascript result.

<!-- 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>

javascript html jquery json

asked by anonymous 13.06.2017 / 20:33

1 answer

Putting delete method inside an append Jquery How to traverse all columns of a table with jquery and hide if it is empty

score 2 · Answer 1

It would be something like:

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

link