Question

我是一个初学者，有一个问题想问大家

例如，我获取JSON的URL是：

返回的JSON是：

{
"Data":{
"id": 1312,
"Name": "Steem Dollars",
"Symbol": "SBD",
"website_slug": "steem-dollars",
"Level": 313,
"circulating_supply": 15185862.0,
"total_supply": 15185862.0,
"max_supply":null,
Quotes: {
"Dollar": {
"Price": 1.2369,
"volume_24h": 660195.0,
"market_cap": 18783392.0,
"percent_change_1h": 0.84,
"percent_change_24h": - 5.87,
"percent_change_7d": -10.61
}
},
"last_updated": 1529462954
},
"Metadata":{
"time stamp": 1529462906,
"Error": null
}
}

如何通过https://api.coinmarketcap.com/v2/ticker/1312/获取HTML信息并在HTML中显示以下字段：

名称
符号
等级
价格
Volume_24h
Market_cap
Percent_change_1h
Percent_change_24h
Percent_change_7d

谁可以举一个例子，再次感谢。

Answer 1

JavaScript方式：

my $ua2 = LWP::UserAgent->new;
$ua2->agent("Mozilla/5.0 (compatible; MSIE 6.0; Windows 98)");
my $req2 = HTTP::Request->new(POST => "$url", [ frm-advSearch => 'frmadvSearch' ]);
$req2->content_type('text/html');
my $res2 = $ua2->request($req2);
$http_stat = substr($res2->status_line,0,3);

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("name").innerHTML = myObj.data.name;
    }
};
xmlhttp.open("GET", "https://api.coinmarketcap.com/v2/ticker/1312/", true);
xmlhttp.send();

Answer 2

为此，我建议使用jQuery。它可以很好地处理JSON。

$( document ).ready(function() {
	var url = "https://api.coinmarketcap.com/v2/ticker/1312/";
	$.getJSON( url, {
  	format: "json"
	})
  .done(function( data ) {
     $("#iid").text(data.data.id);
     $("#name").text(data.data.name);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></script>

<div id="iid"></div>
<div id="name"></div>

Answer 3

您可以使用Fetch API，因此您不必依赖其他库，可以执行类似的操作。

您还需要了解对象在JavaScript中的工作方式。

function getElement(id) {
  return document.getElementById(id);
}

fetch('https://api.coinmarketcap.com/v2/ticker/1312/')
.then(res => res.json())
.then((res) => {
  const data = res.data;
  getElement('name').innerHTML =  'Name: ' + data.name;
  getElement('symbol').innerHTML = 'Symbol: ' + data.symbol;
  getElement('rank').innerHTML = 'Rank: ' + data.rank;
  getElement('price').innerHTML = 'Price: ' + data.quotes.USD.price;
  // do the rest here
});

<div>
  <p id="name"></p>
  <p id="symbol"></p>
  <p id="rank"></p>
  <p id="price"></p>
</div>

Answer 4

JSON基本上处于层次结构中。因此，为了访问特定属性，您需要逐步进行操作。

您可以使用Jquery进行Ajax调用。

所以总结您的整个代码看起来像这样

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("https://api.coinmarketcap.com/v2/ticker/1312/",                      
     function(json, status){

            var data = json.data;
            var quotes = data.quotes;
            var usd = quotes.USD;


            console.log(JSON.stringify(quotes));
            console.log(JSON.stringify(data.name));
            console.log(JSON.stringify(quotes));

            $("#container").append(data.name+"<br>");

        });
    });
});
</script>
</head>
<body>

<button>Get Data</button>

<div id="container" ></div>

</body>
</html>

Answer 5

另一种解决方案是对json文件中的每个键运行并将其设置为相同的id名称。

  $.getJSON( "resources/screenText.json", function( data ) {
      $.each( data, function( key, val ) {
        $( `#${key}`).html(val);
      });
    });

请参阅 jQuery.getJSON()

screenText.json：

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

html：

<span id="one"></span>
<span id="two"></span>
<span id="three"></span>

如何从json中获取数据并以html显示

5 个答案: