Question

我将从服务器获取一些JSON表示法，并使用XMLHttpRequest（）;将其呈现在站点上。

这是文件 - http://www.adweb.agency/interview/api/animals

我已获取数据，我可以在浏览器上查看。但是当我尝试将它放入一个html表时，我会得到一个充满未定义内容的表。我花了至少10个小时阅读JSON表示法，并且我很清楚它是如何工作的，但我的数据仍未定义。当我将它与w3schools的例子进行比较时，我发现我们的代码没有区别。当我试图循环数据时，问题似乎发生了，试图逐个获取数据。我研究的一些例子表明，数据通常具有某种数组名称。我在数据中看不到任何数组名称，因为我直接在浏览器中从服务器中查看它。我将使用JavaScript，我不允许使用JQuery。这适合我，因为我在这里学习，而不是简单地完成工作。这是我的功能。

function loadAnimals() {
    var animals = new XMLHttpRequest();
    animals.open("GET", "http://www.adweb.agency/interview/api/animals", true);
    animals.onreadystatechange = function () {
        if (animals.readyState == 4 && animals.status == 200) {
            var animalObject = JSON.parse(animals.responseText);
            var table = "<table>";
            var i;
            for (i = 0; i < animalObject.length; i++) {
                table += "<tr>" +
                    "<td>" + animalObject[i].Title + "</td>" +
                    "<td>" + animalObject[i].Description + "</td>" +
                    "<td>" + animalObject[i].Family + "</td>" +
                    "<td>" + animalObject[i].CollectiveNoun + "</td>" +
                    "</tr>";
            }
            table += "</table>";
            document.getElementById("animals").innerHTML = table;
        }
    }
    animals.send(null);
}

Answer 1

响应首先不是JSON :)

响应的内容类型是 - Content-Type：application / xml;字符集= UTF-8

您正在尝试读取xml文件并尝试打印JSON数据，因此存在问题。

Answer 2

"[{\"Id\":1,\"Title\":\"Baby Antelope\",\"Description\":\"An antelope is a member of a number of even-toed ungulate species indigenous to various regions in Africa and Eurasia. A group of antelope is called a herd.\",\"Family\":\"Bovidae\",\"CollectiveNoun\":\"Herd\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/1_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/1_thumb.jpg\"}},{\"Id\":2,\"Title\":\"Baby Sheep (Lamb)\",\"Description\":\"Sheep (Ovis aries) are quadrupedal, ruminant mammals typically kept as livestock. Numbering a little over one billion, domestic sheep are also the most numerous species of sheep.\",\"Family\":\"Bovidae\",\"CollectiveNoun\":\"Flock\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/2_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/2_thumb.jpg\"}},{\"Id\":3,\"Title\":\"Leopard\",\"Description\":\"The leopard is one of the five big cats in the genus Panthera. It is similar in appearance to the jaguar, but is smaller and more lightly built.\",\"Family\":\"Felidae\",\"CollectiveNoun\":\"Leap\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/3_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/3_thumb.jpg\"}},{\"Id\":4,\"Title\":\"Squirrel\",\"Description\":\"Squirrels are members of the family Sciuridae, consisting of small or medium-size rodents. Squirrels are indigenous to the Americas, Eurasia, and Africa, and have been introduced to Australia.\",\"Family\":\"Sciuridae\",\"CollectiveNoun\":\"Colony\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/4_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/4_thumb.jpg\"}},{\"Id\":5,\"Title\":\"Rooster\",\"Description\":\"A rooster, also known as a cockerel or cock, is a male gallinaceous bird, usually a male chicken. The term rooster originates in the United States, and the term is widely used throughout North America, as well as Australia and New Zealand.\",\"Family\":\"Phasianidae\",\"CollectiveNoun\":\"Brood\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/5_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/5_thumb.jpg\"}},{\"Id\":6,\"Title\":\"Duck\",\"Description\":\"Duck is the common name for a large number of species in the Anatidae family of birds which also includes swans and geese. Ducks are mostly aquatic birds, mostly smaller than the swans and geese, and may be found in both fresh water and sea water.\",\"Family\":\"Anatidae\",\"CollectiveNoun\":\"Flock\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/6_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/6_thumb.jpg\"}},{\"Id\":7,\"Title\":\"Rabbit\",\"Description\":\"Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. Rabbits live in groups, and the best known species, the European rabbit, lives in underground burrows, or rabbit holes.\",\"Family\":\"Leporidae\",\"CollectiveNoun\":\"Berry\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/7_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/7_thumb.jpg\"}},{\"Id\":8,\"Title\":\"Dog\",\"Description\":\"The domestic dog is a domesticated canid which has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals.\",\"Family\":\"Pack\",\"CollectiveNoun\":\"Canidae\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/8_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/8_thumb.jpg\"}},{\"Id\":9,\"Title\":\"Collared Peccary\",\"Description\":\"The collared peccary (Pecari tajacu) is a species of mammal in the family Tayassuidae found in North, Central, and South America. Although somewhat related to the pigs and frequently referred to as one, this species and the other peccaries are no longer classified in the pig family.\",\"Family\":\"Tayassuidae\",\"CollectiveNoun\":\"Parcel\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/9_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/9_thumb.jpg\"}},{\"Id\":10,\"Title\":\"Bee\",\"Description\":\"Bees are flying insects closely related to wasps and ants, known for their role in pollination and, in the case of the best-known bee species, the European honey bee, for producing honey and beeswax.\",\"Family\":\"Apoidea\",\"CollectiveNoun\":\"Swarm\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/10_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/10_thumb.jpg\"}},{\"Id\":11,\"Title\":\"Horse\",\"Description\":\"The horse (Equus ferus caballus) is one of two extant subspecies of Equus ferus. Humans began to domesticate horses around 4000 BC, and their domestication is believed to have been widespread by 3000 BC.\",\"Family\":\"Equidae\",\"CollectiveNoun\":\"Team\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/11_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/11_thumb.jpg\"}},{\"Id\":12,\"Title\":\"European Robin\",\"Description\":\"The European robin (Erithacus rubecula), most commonly known in Anglophone Europe simply as the robin, is a small insectivorous passerine bird, specifically a chat, that was formerly classed as a member of the thrush family (Turdidae), but is now considered to be an Old World flycatcher.\",\"Family\":\"Muscicapidae\",\"CollectiveNoun\":\"Flock\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/12_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/12_thumb.jpg\"}},{\"Id\":13,\"Title\":\"Lemur\",\"Description\":\"Lemurs are a clade of strepsirrhine primates endemic to the island of Madagascar. The word lemur derives from the word lemures (ghosts or spirits) from Roman mythology and was first used to describe a slender loris due to its nocturnal habits and slow pace.\",\"Family\":\"Lemuroidea\",\"CollectiveNoun\":\"Conspiracy\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/13_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/13_thumb.jpg\"}},{\"Id\":14,\"Title\":\"Wild Boar\",\"Description\":\"The wild boar (Sus scrofa), also known as the wild swine or Eurasian wild pig is a suid native to much of Eurasia, North Africa, and the Greater Sunda Islands. Human intervention has spread its range further, making the species one of the widest-ranging mammals in the world, as well as the most widely spread suiform.\",\"Family\":\"Suidae\",\"CollectiveNoun\":\"Sounder\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/14_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/14_thumb.jpg\"}},{\"Id\":15,\"Title\":\"Peacock\",\"Description\":\"The term peacock is properly reserved for the male; the female is known as a peahen, and the immature offspring are sometimes called peachicks. The male has very long tail feathers with eye-like markings that can be erected and fanned out in display.\",\"Family\":\"Phasianidae\",\"CollectiveNoun\":\"Muster\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/15_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/15_thumb.jpg\"}},{\"Id\":16,\"Title\":\"Raccoon\",\"Description\":\"The raccoon is a medium-sized mammal native to North America. Two of the raccoon's most distinctive features are its extremely dexterous front paws and its facial mask, which are themes in the mythology of several Native American ethnic groups.\",\"Family\":\"Procyonidae\",\"CollectiveNoun\":\"Gaze\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/16_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/16_thumb.jpg\"}},{\"Id\":17,\"Title\":\"Fox\",\"Description\":\"Foxes are small-to-medium-sized, omnivorous mammals belonging to several genera of the Canidae family. Foxes are slightly smaller than a medium-size domestic dog, with a flattened skull, upright triangular ears, a pointed, slightly upturned snout, and a long bushy tail (or brush).\",\"Family\":\"Canidae\",\"CollectiveNoun\":\"Leash\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/17_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/17_thumb.jpg\"}},{\"Id\":18,\"Title\":\"Addax (White Antelope)\",\"Description\":\"The addax is an antelope of the genus Addax, that lives in the Sahara desert. The addax mainly eats grasses and leaves of any available shrubs, leguminous herbs and bushes.\",\"Family\":\"Bovidae\",\"CollectiveNoun\":\"Herd\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/18_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/18_thumb.jpg\"}},{\"Id\":19,\"Title\":\"Kitten\",\"Description\":\"A kitten (also known as a kitty or kitty cat) is a juvenile cat. After being born, kittens are totally dependent on their mother for survival and do not normally open their eyes until after seven to ten days.\",\"Family\":\"Felidae\",\"CollectiveNoun\":\"Kindle\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/19_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/19_thumb.jpg\"}},{\"Id\":20,\"Title\":\"Turtle\",\"Description\":\"Turtles are reptiles of the order Testudines (or Chelonii) characterised by a special bony or cartilaginous shell developed from their ribs and acting as a shield.\",\"Family\":\"Cheloniidae\",\"CollectiveNoun\":\"Bale\",\"Width\":800,\"Height\":600,\"ImageURLs\":{\"FullSize\":\"http://adweb.agency/interview/images/animals/20_full.jpg\",\"Thumb\":\"http://adweb.agency/interview/images/animals/20_thumb.jpg\"}}]"

这是你的回复，它不是JSON字符串，所以你应该在使用JSON.parse之前解码它，就像这样：

function loadAnimals() {
    var animals = new XMLHttpRequest();
    animals.open("GET", "http://www.adweb.agency/interview/api/animals", true);
    animals.onreadystatechange = function () {
        if (animals.readyState == 4 && animals.status == 200) {
            var animalObject = JSON.parse(decodeURIComponent(animals.responseText));
            var table = "<table>";
            var i;
            for (i = 0; i < animalObject.length; i++) {
                table += "<tr>" +
                    "<td>" + animalObject[i].Title + "</td>" +
                    "<td>" + animalObject[i].Description + "</td>" +
                    "<td>" + animalObject[i].Family + "</td>" +
                    "<td>" + animalObject[i].CollectiveNoun + "</td>" +
                    "</tr>";
            }
            table += "</table>";
            document.getElementById("animals").innerHTML = table;
        }
    }
    animals.send(null);
}

Answer 3

嗨，请在sinle文件中尝试此html保存并运行我有结果

 <!DOCTYPE html>
<html>
<body>

<div id="animals"></div>

<script>
loadAnimals()

 function loadAnimals(){ 

              var animals = new XMLHttpRequest(); 
              animals.open("GET", "http://www.adweb.agency/interview/api/animals", true ); 

       animals.onreadystatechange = function(){      

                                     if ( animals.readyState == 4 && animals.status == 200 )  {

                                        var animalObject = JSON.parse(animals.responseText);
                                        var animallength = JSON.parse(animalObject)

                                        var table = "<table>";
                                        var i;

                                        for( i = 0; i < animallength.length ; i ++ ) {

                                             table += "<tr>" +
                                            "<td>" + animallength[i].Title + "</td>" +
                                            "<td>" + animallength[i].Description + "</td>" + 
                                            "<td>" + animallength[i].Family + "</td>" +
                                            "<td>" + animallength[i].CollectiveNoun + "</td>" +
                                            "</tr>";
                                            }

                                            table += "</table>";
                                            document.getElementById("animals").innerHTML = table;

                                           }
                                         }
                               animals.send(null);    
                             }   
</script>

</body>
</html>

Answer 4

你好有一个简单的错误

 function loadAnimals(){ 

          var animals = new XMLHttpRequest(); 
          animals.open("GET", "http://www.adweb.agency/interview/api/animals", true ); 

   animals.onreadystatechange = function(){      

                                 if ( animals.readyState == 4 && animals.status == 200 )  {

                                    var animalObject = JSON.parse(animals.responseText);
                                    var animallength = JSON.parse(animalObject)

                                    var table = "<table>";
                                    var i;

                                    for( i = 0; i < animallength.length ; i ++ ) {

                                         table += "<tr>" +
                                        "<td>" + animallength[i].Title + "</td>" +
                                        "<td>" + animallength[i].Description + "</td>" + 
                                        "<td>" + animallength[i].Family + "</td>" +
                                        "<td>" + animallength[i].CollectiveNoun + "</td>" +
                                        "</tr>";
                                        }

                                        table += "</table>";
                                        document.getElementById("animals").innerHTML = table;

                                       }
                                     }
                           animals.send(null);    
                         }

你必须解析并存储一个变量使用那个长度，我绑这个适合我，所以尝试并替换上面的函数

使用JavaScript循环访问JSON文件但获取未定义的输出

4 个答案: