Give out a specific values of a json for a specific html

Question

I have 3 html files. All of them have a button, which opens a list. The javascript gives out values of a json to the list. I want to give out specific values of the json for each website but can't get it to work. Is there a way to give out specific parts of the json? I tried it with a if else function but it does give out all values of the json on each html.

function Naehrwerte() {
  if (document.getElementById("id1").style.display == 'block') {
    document.getElementById("id1").style.display = 'none';
  } else {
    document.getElementById("id1").style.display = 'block';
  }
  $.getJSON("Naehrwertangabe.json", function(json) {
      let z = json;
      let aus = '';
      let anzahl = z.Naehrwerte_Pommes.length
      let anzahl2 = z.Naehrwerte_Schmarrn.length
      let anzahl3 = z.Naehrwerte_Kartoffel.length
      aus += z.Art;
      if ($("h1").text == "Pommes"); {
        aus += " für das Rezept: <br/>"
        for (let i = 0; i < anzahl; i++) {
          aus += "<ul>"
          aus += "<li> Energie=" + z.Naehrwerte_Pommes[i].Kcal + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Pommes[i].Zucker + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Pommes[i].Ballaststoffe + "</li>";
          aus += "</ul>"

          $('#anzeige1').html(aus);
        }
      };

      if ($("h1").text == "Kartoffelpüree"); {
        aus += " für das Rezept: <br/>"

        for (let i = 0; i < anzahl2; i++) {

          aus += "<ul>";
          aus += "<li> Energie=" + z.Naehrwerte_Kartoffel[i].Kcal + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Kartoffel[i].Zucker + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Kartoffel[i].Ballaststoffe + "</li>";
          aus += "</ul>";
          $('#anzeige1').html(aus);
        }
      }

      if ($("h1").text == "Kaiserschmarrn"); {
        aus += " für das Rezept: <br/>"
        for (let i = 0; i < anzahl3; i++) {
          aus += "<ul>"
          aus += "<li> Energie=" + z.Naehrwerte_Schmarrn[i].Kcal + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Schmarrn[i].Zucker + "</li>";
          aus += "<li> Energie=" + z.Naehrwerte_Schmarrn[i].Ballaststoffe + "</li>";
          aus += "</ul>"
          $('#anzeige1').html(aus);
        }
      };
    })
  })
};                      

this is the json file

{
    "Art": "pro 100g",
    "Naehrwerte_Pommes": [
        {
           "Kcal": "148kcal",
           "Zucker": "1g",
           "Ballaststoffe": "1,4g"
        }
    ],
    "Naehrwerte_Schmarrn": [
        {
           "Kcal": "205kcal",
           "Zucker": "14,6g",
           "Ballaststoffe": "4,2g"
        }
    ],
    "Naehrwerte_Kartoffel": [
        {
            "Kcal": "308,4kcal",
            "Zucker": "2,1g",
            "Ballaststoffe": "0,8g"
        }
    ],  
}

Answer 1

Because this?

                        let z = json;           
                        let Kcal = z.Kcal;
                        let Zucker = z.Zucker;
                        let Ballaststoffe = z.Ballasstoffe

KCal, Zucker... attributes is not in JSON root, but inside Naehrwerte_Pommes, Naehrwerte_Schmarrn... objects.

I try to refactor in notepad, then pls check before use ;)

function toggleId1() {
  if (document.getElementById("id1").style.display === "block") {
    document.getElementById("id1").style.display = "none";
  } else {
    document.getElementById("id1").style.display = "block";
  }
}

function getEnergiesByName(name, json) {
  if(name === 'Pommes') return json.Naehrwerte_Pommes;
  if(name === 'Kartoffelpüree') return json.Naehrwerte_Kartoffel;
  if(name === 'Kaiserschmarrn') return json.Naehrwerte_Schmarrn;
  return [];
}

function Naehrwerte() {
  toggleId1();

  $.getJSON("Naehrwertangabe.json", function (json) {
    let aus = json.Art;
    const energies = getEnergiesByName($("h1").text);
    const energiesLength = energies.length;
    if(energiesLength === 0) return aus;
    energies.forEach(energiesPart => {
      const parts = Object.values(energiesPart).map(v => `<li> Energie=${v}</li>`);
      aus += " für das Rezept: <br/>";
      aus += `<ul>${parts}</ul>`;
    })
    $('#anzeige1').html(aus);
  });
}

I recomend turn on inspector, where in console Javascript show this errors.

P.S.: You call $.getJSON("Naehrwertangabe.json", function (json) { twice - delete one of.