如何从js div创建者调用Json数组,但显示给我错误的预期结果?

问题描述 投票:0回答:1

我有以下JSON

{
  "saintName": "Athena",
  "category": "SS",
  "skillPrio": "1231 > 1233 > 1243 > 1443 > 1445 > 1455 > 3455 > 3555 > 4555",
  "setupCosmo": [
    {
      "cosmoName": "Felina",
      "cosmoImage": "img/lg-felina.jpg"
    },
    {
      "cosmoName": "Marsh",
      "cosmoImage": "img/lg-marsh-fairy.jpg"
    },
    {
      "cosmoName": "Decelerator",
      "cosmoImage": "img/lg-decelerator.jpg"
    },
    {
      "cosmoName": "Rosary",
      "cosmoImage": "img/sol-rosary.jpg"
    },
    {
      "cosmoName": "CStone",
      "cosmoImage": "img/sol-cstone"
    },
    {
      "cosmoName": "Tenacity",
      "cosmoImage": "img/lu-tenacity.jpg"
    },
    {
      "cosmoName": "Knowing",
      "cosmoImage": "img/lu-knowing.jpg"
    },
    {
      "cosmoName": "SpiritPrint",
      "cosmoImage": "img/lu-spirit.jpg"
    },
    {
      "cosmoName": "Humming",
      "cosmoImage": "img/st-humming.jpg"
    },
    {
      "cosmoName": "Moon",
      "cosmoImage": "img/st-moon.jpg"
    }
  ],
  "topSubstats": "Speed > Cdmg > Catk% > HP% = Catk flat > HP flat",
  "image": "img/ss-athena.jpg"
}

而且我有以下JS

const buttons = document.querySelectorAll(".caba-button");
let data = [];
const xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    const dataArray = JSON.parse(this.responseText);
    data = dataArray; //otorgando a data los valores del json para usarlos mas comodamente
  }
};

xmlhttp.open("GET", "../json/saints.json", true);
xmlhttp.send();

/*Getting saints cosmos on click*/

buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    checkSaint(button.previousElementSibling.innerHTML); //getting the name of the saint that was clicked
  });
});

function checkSaint(saint) {
  data.forEach((item) => {
    if (saint == item.saintName) {
      var div = document.createElement("div");
      div.className = "modal";
      var div2 = document.createElement("div");
      div2.className = "modal-content";
      var img = document.createElement("img");
      img.setAttribute("src", item.image);
      var imgCosmo = document.createElement("img");
      imgCosmo.setAttribute("src", item.setupCosmo);
      var p = document.createElement("p");
      var h3 = document.createElement("h3");
      var span = document.createElement("span");
      span.className = "close";
      var spanContent = document.createTextNode("X");
      var saintNames = document.createTextNode(
        item.saintName + " " + item.category
      );
      var newContent = document.createTextNode("Cosmos: " + item.setupCosmo);
      div.appendChild(div2);
      div2.appendChild(span);
      span.appendChild(spanContent);
      div2.appendChild(img);
      div2.appendChild(h3);
      h3.appendChild(saintNames);
      div2.appendChild(p);
      p.appendChild(newContent);
      var currentDiv = document.getElementById("main");
      document.body.insertBefore(div, currentDiv);
      var body = document.querySelector("body");
      body.classList.toggle("modal-open");
      span.onclick = function () {
        div.remove();
        body.classList.remove("modal-open");
      };

      window.onclick = function (event) {
        if (event.target == div) {
          div.remove();
          body.classList.remove("modal-open");
        }
      };
    }
  });
}

我想做的是调用特定的setupCosmo图像,并将其全部显示在模式创建中,实际上,我可以看到第一个图像,文本和其他内容。但是,当我尝试从Js调用setupCosmo时,仅显示此Modal show

我在这里可以做什么?我是Json的真正新手,请学习[]

我具有以下JSON {“ saintName”:“ Athena”,“ category”:“ SS”,“ skillPrio”:“ 1231> 1233> 1243> 1443> 1445> 1455> 3455> 3555> 4555”,“ setupCosmo ”:[{... ...>

在此行data = dataArray中,您将json对象分配给数组,将其从data = dataArray更改为data.push(dataArray),在此行中将其从data.forEach更改为data[0].forEach
您还必须调整此行
img = document.createElement("img"); img.setAttribute("src", item.image); var imgCosmo = document.createElement("img"); imgCosmo.setAttribute("src", item.setupCosmo.cosmoImage);

一种不同的方法是遍历所有图像链接,并像这样将它们赋予src

data[0].setupCosmo.map(x=>x.cosmoImage).forEach(imgsrc=>{ var imgCosmo = document.createElement("img"); imgCosmo.setAttribute("src", imgsrc); })

javascript html arrays json
1个回答
0
投票
img = document.createElement("img"); img.setAttribute("src", item.image); var imgCosmo = document.createElement("img"); imgCosmo.setAttribute("src", item.setupCosmo.cosmoImage);
© www.soinside.com 2019 - 2024. All rights reserved.