在HTML中使用星座API对象_Html_Json_Oop_Api Design

在HTML中使用星座API对象

html json oop

在HTML中使用星座API对象,html,json,oop,api-design,Html,Json,Oop,Api Design,我正在创建一个网站，使用星座API生成星座本身。我使用的API创建了一个包含四个元素的JSON对象：sunsign、meta、horoscope和date。我只想使用占星术本身：因为api结果的url已经包含了日期和符号，并且不需要元数据，所以没有必要让它变得更复杂 API来自以下站点：我现在遇到的麻烦是参照这个物体的星座。我无法判断我是否对输出进行了不正确的格式化，以便网页不会显示它，或者引用本身是否有缺陷。如果有人能帮我弄明白并纠正它，我将不胜感激以下是我当前的代码： <!DOC

我正在创建一个网站，使用星座API生成星座本身。我使用的API创建了一个包含四个元素的JSON对象：sunsign、meta、horoscope和date。我只想使用占星术本身：因为api结果的url已经包含了日期和符号，并且不需要元数据，所以没有必要让它变得更复杂

API来自以下站点：

我现在遇到的麻烦是参照这个物体的星座。我无法判断我是否对输出进行了不正确的格式化，以便网页不会显示它，或者引用本身是否有缺陷。如果有人能帮我弄明白并纠正它，我将不胜感激

以下是我当前的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Daily Horoscope</title>
    <link rel="Stylesheet" media="all" href="styles.css" />
    <link rel="shortcut icon" type="icon/x-icon" href="icon.jpg" />
</head>

<body>
    <img class = "banner" src="horoscopebanner.jpg" />
    <h2>What's your day going to be? Find out now!</h2>
    <h4>If this is your first visit, scroll on down to your horoscope. Select your sign at from the bottom radial buttons, 
so when you join us next time, your horoscope will be at the top of the list!</h4>
<div class = "horoscopes" id="aries">
    <img class="signs" src="aries.jpg" alt="Aries Sign" align="left" />
</div>
<div class = "horoscopes" id="taurus" >
    <img class="signs" src ="taurus.jpg" alt="Taurus Sign" align="left" />
</div>
/* Rest of the signs and their horoscopes here */

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://theastrologer-api.herokuapp.com/api/horoscope/taurus/today";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
    var object = JSON.parse(response);
    var out = "<p>";
    out += object.horoscope + "</p>";
    document.getElementById("taurus").innerHTML = out;
}
</script>

</body>
</html>

提前感谢您提供的任何帮助。

只需使用像这样的现成API即可