write json sentences html

Asked

Viewed 146 times

4

I tried to make a mini database in JSON:

[
    {
        "titulo": "Exemplo",
        "localizacao": "Rua de Exemplo",
        "texto": "Texto grande de exemplo para usar como teste"
    }
]

Then I created a general variable for JSON to use JSON in a separate file:

function LoadJsonData() {

    var jsondata;

    $.ajax({
      url: './Json/JsonSite.json',
      dataType: 'json',
      async: false,
      success: function (json) {
        jsondata = json;
      }
    });

    return jsondata;
  }

but I have a problem.

I wanted to write the title that is in JSON, the location and the text in my HTML, but it is not writing.

var json = LoadJsonData();

document.getElementById("tituloareas").innerHTML = json[1].titulo;

document.getElementById("localizacaoareas").innerHTML = json[1].localizacao;

document.getElementById("textoareas").innerHTML = json[1].texto;
<div class="informacaodasareas">
    <h2 class="tituloinfo" id="tituloareas"></h2>

    <p class="localizacaoinfo" id="localizacaoareas"></p>

    <h5 class="textoinfo" id="textoareas"></h5> 

    <div class="imageminfo" id="imagemareas"></div>

</div>
  • 3

    json[1]? would not json[0]?

  • @Ricardopunctual changed to json[0] and nothing changed

  • after that line var json = LoadJsonData(); can display the content that returned in the json variable?

  • @Ricardopunctual I put everything I created to var json e defeni that would be equal to function that this in another file! tas to realize this is my script I think is missing something to activate the Document

3 answers

3

I made an example with the data mocked and as you can see it worked, of course I had to change the [1] for [0] otherwise it would not work tbm. Probably your problem is in the request Ajax. To make sure that the problem is in the request of a console.log(json) within success and note what is returned and whether it is in the expected format.

let json = LoadJsonData();

function LoadJsonData() {

  let dados = [{
    "titulo": "Exemplo",
    "localizacao": "Rua de Exemplo",
    "texto": "Texto grande de exemplo para usar como teste"
  }];

  return dados;
}

document.getElementById("tituloareas").innerHTML = json[0].titulo;

document.getElementById("localizacaoareas").innerHTML = json[0].localizacao;

document.getElementById("textoareas").innerHTML = json[0].texto;
<div class="informacaodasareas">

  <h2 class="tituloinfo" id="tituloareas"></h2>

  <p class="localizacaoinfo" id="localizacaoareas"></p>

  <h5 class="textoinfo" id="textoareas"></h5>

  <div class="imageminfo" id="imagemareas"></div>

</div>

  • But I would like to have a json in a separate file and in another file I would like to create a variable that basically using this var already connected the json in javascript so it was easier even to organize myself in case the json is too big don’t get a giant javascript

  • 1

    @Davidmv, then you can simply declare the global variable in a separate js file.

  • That’s what I tried to do

  • Yes, I just created the mocked example to see that the problem is in the return of the Ajax request!

2


If you change your function LoadJsonData to receive a callback, you can do this. See:

function LoadJsonData(callback) {
    $.ajax({
        url: './Json/JsonSite.json',
        dataType: 'json',
        success: function (json) {
            if (callback) callback(json)
        }
    });
}

// Setar os dados via callback
LoadJsonData(function (json) {
    $("#tituloareas").text(json[0].titulo);
    $("#localizacaoareas").text(json[0].localizacao);
    $("#textoareas").text(json[0].texto);
});
  • But I would like to have a json in a separate file and in another file I would like to create a variable that basically using this var already connected the json in javascript so it was easier even to organize myself in case the json is too big don’t get a giant javascript

  • 1

    That’s how I exemplified the file .json will continue inside your own file.

  • and the var is general? if I wanted to use the function in another script or after I have to repeat the command (curiosity)

  • 1

    You can use this function on other pages without problems

  • OK thanks I’ll try to insert in my code to see if it works then!

1

function loadJsonData() {
  return $.ajax({
    url: './Json/JsonSite.json',
    dataType: 'json',
  );
}

loadJsonData().then(function (data) {
  document.getElementById("tituloareas").textContent = data[0].titulo;
  document.getElementById("localizacaoareas").textContent = data[0].localizacao;
  document.getElementById("textoareas").textContent = data[0].texto;
})
  • But I would like to have a json in a separate file and in another file I would like to create a variable that basically using this var already connected the json in javascript so it was easier even to organize myself in case the json is too big don’t get a giant javascript

Browser other questions tagged

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