Question

我正在尝试使用JSON和AJAX从API打印对象，当我使用console.log进行查看时，它可以正常工作。但是我的generateCreatureDiv函数由于某些原因不起作用。

这是我的代码：

$(document).ready(function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      var creatureData = JSON.parse(response);
      console.log(creatureData);

      // get a creature from the data

      for (var i = 0; i < creatureData.creatures.length; i++) {
        var creature = creatureData.creatures;
        console.log(creature[i]);
        document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
      }

      function generateCreatureDiv(creature) {
        var CreatureDiv = $("<div />");
        console.log("hoe");
        CreatureDiv.id = "CreatureInfo";
        console.log("hoe")
        $("CreatureDiv").append("<h1>" + creature.name + "</h1>");
        console.log("hoe");
        $("CreatureDiv").append("<img>" + creature.image + "</img>");
        return CreatureDiv;
        console.log("hoe");

      }

      // create a select option  for the object
      // Have a


    }

  };

  xhttp.open("GET", "https://api.myjson.com/bins/17f3jl", true);
  xhttp.send();



});

<!DOCTYPE html>
<html>
  <head>
    <script src="./jquery-3.1.1.min.js"></script>
    <script src="./script.js"></script>
    <script src="./stylesheet.css"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="CreatureEntry">
      <select id="SelectOption">
        
      </select>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

Answer 1

删除String[] arrperson1={"111","Sameer","Roy","samro@gmail.com","12-Apr-1990","64567","8888","Kolkata"}; String[] arrperson2={"333","Pranoy","Roy","praro@gmail.com","12-Apr-1990","64577","8888","Asansol"};中的for(int i=0; i<mixedArray.length;i++) { for(int j=0;j<mixedArray[i].length; j++) { System.out.println("Values at arr["+i+"]["+j+"] is "+mixedArray[i][j] ); } }引号。如果没有选择任何ID或Class.And你的代码已经声明"。所以改变就像这样

$("CreatureDiv")

并且像这样改变

var CreatureDiv = $("<div />");

而不是

function generateCreatureDiv(creature) {
        var CreatureDiv = $("<div />");
        console.log("hoe");
        CreatureDiv.id = "CreatureInfo";
        console.log("hoe")
        $(CreatureDiv).append("<h1>" + creature.name + "</h1>");
        console.log("hoe");
        $(CreatureDiv).append("<img>" + creature.image + "</img>");
        return CreatureDiv;
        console.log("hoe");

      }

因为document.getElementById("CreatureEntry").innerHTML += generateCreatureDiv(creature[i]);它会在每次调用时重置以前的值

Answer 2

此行正在删除阵列中每个元素的DIV的所有内容：

document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);

删除第一部分，然后调用您的方法并附加结果？

$("CreatureEntry").append(generateCreatureDiv(creature[i]));

此外，您需要在引用$("CreatureDiv")的任何地方删除引号并使用$(CreatureDiv)。

我的JavaScript代码未显示预期结果

2 个答案: