write json sentences html

Question

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>

Answer 1

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>

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

Answer 3

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