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

Asked

Viewed 13,280 times

0

I made this javascript code, in a . js file, where my intention is to take the data from a JSON file and use it in my HTML. I don’t know how to use the $.getJSON function in my code to do this and join one thing with the other. I appreciate 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 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 jquery html json

  • What you have as backend?

  • I’m running using shaman

  • So you’re using php ?

  • is html itself, is a page template of bootstrap q I’m modifying. has index.html, css files, javascript and json in directories.

1 answer

2

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

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

Browser other questions tagged javascript jquery html json

You are not signed in. Login or sign up in order to post.