Question

我目前正面临尝试将此JSON文件中的赔率值提取到HTML文件中的任务，我已经尝试过阅读但我无法找到任何内容

JSON文件：（此文件已存储并可在线访问）

  [{"id":"128995",
    "home":"RB Leipzig",
    "away":"FC Heidenheim",
    "homeLogo":"36360.png","awayLogo":"5885.png",
    "url":"",
    "odds1":"1.47","
    oddsx":"4.39",
    "odds2":"8.40"}]

HTML：

 <html>
    <head>
    /*script src*/
    </head>
    <body>
    <span id="odds"></span> /*output value from json odds */
    </body>
    </html>

我想提取odds1 oddsx odds2并将这些值放入HTML文件中。任何帮助将不胜感激！

Answer 1

试试这个

 <script id="myJson" type="application/json">
 { 
    "id":"128995",
    "home":"RB Leipzig",
    "away":"FC Heidenheim",
    "homeLogo":"36360.png","awayLogo":"5885.png",
    "url":"",
    "odds1":"1.47",
    "oddsx":"4.39",
    "odds2":"8.40"
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        console.log(x.odds1);
        console.log(x.odds2);
        console.log(x.oddsx);
     });
</script>

Answer 2

如果您愿意使用类似jQuery的东西，这应该可行。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON TEST</title>
    <meta name="generator" content="BBEdit 11.5" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
        $.getJSON( "http://pathto/test.json", function( data ) {
          var items = [];
          $.each( data, function( key, val ) {
            items.push( "<span id='" + key + "'>" + key + ":  " + val + "</span><br />" );
          });

          $( "<div/>", {
            "class": "my-new-list",
            html: "<p>Summary of JSON data:</p>" + items.join( "" )
          }).appendTo( "body" );
          $("#odds").html("odds1:  " + data.odds1 + ", oddsx:  " + data.oddsx + ", odds2:  " + data.odds2);
        });
        });
    </script>
</head>
<body>
<span id="odds"></span>
</body>
</html>

JSON文件

{"id":"128995","home":"RB Leipzig","away":"FC Heidenheim","homeLogo":"36360.png","awayLogo":"5885.png","url":"","odds1":"1.47","oddsx":"4.39","odds2":"8.40"}

从json文件中提取一个值到html doc

2 个答案: