在图表上显示来自外部网站抓取的 JSON答案

【问题标题】：Display JSON from external website scrape on a chart在图表上显示来自外部网站抓取的 JSON
【发布时间】：2012-08-12 13:43:08
【问题描述】：

所以我一直在尝试将网站 data.asp 文件（似乎是 json 格式）抓取到我的网站中以显示为图表我似乎能够获取 json 数据但不会显示为googles 图表 API 或 fusioncharts 中的图表我不确定我做错了什么，尽管在 google 和 fusioncharts 的示例中，json 数据的格式不同，我是否必须更改我的数据才能满足这一点？我将如何做到这一点以确保随着 data.asp 文件在外部网站上更新，它也在我的网站上更新？

编辑：有没有更简单的方法将数据（以及更新时）放入图表？

        <meta charset="utf-8">
        <title>Olympic Results</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!--styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
          .sidebar-nav {
            padding: 9px 0;
          }
        </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <!--HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <?php
            if(!function_exists("curl_init")) die("cURL extension is not installed");
            $ch = curl_init("http://hosted.stats.com/olympics/medals_widget/data.asp?country=NZL");
            //Configuring curl options 
            $options=array(CURLOPT_RETURNTRANSFER => true, 
                           CURLOPT_HTTPHEADER => array('Content-type: application/json'));
            //Setting curl options
            curl_setopt_array($ch, $options);
            $pageData = curl_exec($ch);
            curl_close($ch); 
            //Cache the channel file 
            $cache_expire = 60*60*24*365;
            header("Pragma: public");
            header("Cache-Control: max-age=".$cache_expire);
            header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
        ?>
        <script type="text/javascript" src="Charts/FusionCharts.js"></script>

      </head>
      <body>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container-fluid">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Olympic Results</a>

              <div class="nav-collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                </ul>
              </div><!--/.nav-collapse -->

            </div>
          </div>
        </div>

        <div class="container-fluid">
        <div id="chartContainer">FusionCharts XT will load here!</div>          
        <script type="text/javascript">

        <!--       
          var data = <?php echo $pageData; ?>;
          document.write(data);
          var myChart = new FusionCharts( "Charts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
          myChart.setJSONData(data);
          myChart.render("chartContainer");

        // -->     
        </script> 
        <?php echo("$pageData"); ?>
            <footer style="padding-top:100px;">
            <hr>
            <p>&copy; Olympic Results 2012</p>
            </footer>

        </div><!--/.fluid-container-->

        <!-- javascript -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap-transition.js"></script>
        <script src="js/bootstrap-alert.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/bootstrap-tab.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/bootstrap-button.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
        <script src="js/bootstrap-carousel.js"></script>
        <script src="js/bootstrap-typeahead.js"></script>
      </body>
    </html>

忘记添加 JSON 的样子 -

{"medals": { 
"Archery":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze":       "0", "total": "0" }], 
"Track & Field":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "0", "total": "1" }], 
"Badminton":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Basketball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Beach Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Boxing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Diving":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Equestrian":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "1", "total": "1" }], 
"Soccer":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Fencing":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Handball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Field Hockey":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Judo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Modern Pentathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }],
"Rowing":[ { "stats_id": "83", "gold": "3", "silver": "0", "bronze": "2", "total": "5" }],  
"Sailing":[ { "stats_id": "83", "gold": "1", "silver": "1", "bronze": "0", "total": "2" }], 
"Shooting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Synchronized Swimming":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Taekwondo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Triathlon":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Table Tennis":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Volleyball":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Weightlifting":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Water Polo":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Wrestling":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Cycling":[ { "stats_id": "83", "gold": "0", "silver": "1", "bronze": "2", "total": "3" }], 
"Gymnastics":[ { "stats_id": "83", "gold": "0", "silver": "0", "bronze": "0", "total": "0" }], 
"Canoe":[ { "stats_id": "83", "gold": "1", "silver": "0", "bronze": "0", "total": "1"     }] 
}}

【问题讨论】：

标签： php javascript json charts scrape

【解决方案1】：

是的，您需要重新格式化您的数据。获取数据，将其转换为真正的 javascript 对象并对其进行迭代，并以您的 API 理解的方式重新创建结构。要将 JSON 转换为 Object，您可以使用 jQuery 库的 $.parseJSON 方法。

另一件事。这些数据是由您的服务器获取并重定向到您的应用程序？

编辑：这是一个例子：

// this way, data is already an object
var data = { "medals": {
    "Archery":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "0",
        "bronze":  "0",
        "total": "0"
    }],
    "Track & Field":[{
        "stats_id": "83",
        "gold": "0",
        "silver": "1",
        "bronze": "0",
        "total": "1"
    }] // more data here...
}};

// if data comes this way (a String), it needs to be parsed
var dataStr = "{ \"medals\": {" +
"    \"Archery\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"0\"," +
"        \"bronze\":  \"0\"," +
"        \"total\": \"0\"" +
"    }]," +
"    \"Track & Field\":[{" +
"        \"stats_id\": \"83\"," +
"        \"gold\": \"0\"," +
"        \"silver\": \"1\"," +
"        \"bronze\": \"0\"," +
"        \"total\": \"1\"" +
"    }]" + // more data here...
"}}";

console.log( data );

var obj = $.parseJSON( dataStr );
console.log( obj );

traverseObj(obj);

// traverses the object to see all its properties
function traverseObj( data ) {
    for ( var key in data ) {

        var value = data[key];

        if ( $.isPlainObject( value ) ) {

            console.log( "**key: " + key );
            traverseObj( value );

        } else if ( $.isArray( value ) ) {

            console.log( "key: " + key );
            var values = "";

            for ( var i = 0; i < value.length; i++ ) {
                var currValue = value[i];
                if ( $.isPlainObject( currValue ) ) {
                    traverseObj(currValue);
                } else {
                    values += currValue + ", ";
                }
                if ( values != "" ) {
                    console.log( " - value: " + value );
                }
            }

        } else {
            console.log( "key: " + key + " - value: " + value );
        }
    }
}

这里是小提琴：http://jsfiddle.net/davidbuzatto/MysPe/

【讨论】：

Facebook 应用程序只是为了显示可能的功能，我只是用 curl 提取的 json 数据，然后尝试将该字符串用于我的图表。我真的需要一种方法来显示我通过图表获得的数据，即使我需要以某种方式对其进行编辑，如果你能告诉我如何做到这一点，那就太棒了！谢谢，我也可能会从我的示例中删除 facebook 的东西，因为它并不真正相关
所以我不需要将我的数据解析为字符串还是这样做？当我从 curl $pageData 中拉出它时，我将它设置为 Content-type: application/json 我认为它已经将它设置为一个对象？还是只能通过 $.parseJSON 完成？
看来您正在使用对象初始化器语法编写对象，因此，当您的代码运行时，它已经是一个对象。如果您通过 ajax 获取这些数据，则响应将是一个字符串，您需要对其进行解析。
您认为这会产生正确的结果吗？ var obj = ;既然我已经完成了，它似乎正在阅读数据并为其分配键值。这些空间中有空格可以吗？还是我应该去掉它们？
解析器会忽略空格，因此您无需担心。如果你想节省网络带宽，你可以摆脱它们。查看正在生成的代码以了解 json_enconde 正在生成什么。如果它有第一个 sintax os 我的例子，好的，你不需要解析。如果是生成字符串，则需要解析。