65.9K
CodeProject 正在变化。 阅读更多。
Home

JSON 数据可视化工具 (适用于 Google, Yahoo!, Bing 和 Twitter) 使用 jQuery, JavaScript, ASP.NET MVC 2.0

silverazure
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (14投票s)

2010年6月29日

CPOL

6分钟阅读

viewsIcon

74645

downloadIcon

915

本文介绍了一个 JSON 数据可视化工具，用于 Google, Yahoo!, Bing 和 Twitter 等流行的 Web 服务，使用 jQuery, JavaScript 和 ASP.NET MVC 2.0。

引言

本文介绍了一个 JSON 数据可视化工具，用于 Google, Yahoo!, Bing 和 Twitter 等流行的 Web 服务，使用 jQuery, JavaScript 和 ASP.NET MVC 2.0。

背景

Google, Yahoo!, Bing 和 Twitter 等流行的 Web 服务由于 JSON 的紧凑数据结构，为 Web 应用程序返回 JSON (JavaScript 对象表示法)。当我开始开发一个使用 JSON 数据的聚合应用程序时，由于我对返回数据结构缺乏理解，在将数据连接到我的网页时遇到了问题。因此，我开发了这个 JSON 可视化工具，它对我理解数据结构非常有帮助。这个分析器帮助我轻松地更改参数，并在设计应用程序之前测试我的 REST (Representational State Transfer) 调用。我希望它也能对其他人有所帮助。

数据可视化工具以以下格式呈现数据

  1. RawData 选项显示 Web 服务返回的原始 JSON 数据，无需任何处理。
  2. Table 选项以漂亮的表格格式显示 JSON 数据。我使用了 James Podesly 开发的名为 prettyPrint for JavaScript 的 JavaScript 程序来渲染此表格数据。
  3. Beautify 选项格式化 JSON 数据以进行打印。为此，我使用了 Einar Lielmanis 开发的名为 JavaScript unpacker and beautifier 的 JavaScript 程序。
  4. Class 输出选项是我自己用于遍历数据的实验性软件。为此，我开发了一个递归迭代例程，其灵感来自 Matt Holthe 的文章：Show Object Properties。

输出

初始页面如图所示。可在此网站找到实时演示：Json_Demo。

页面加载时，下拉框将加载搜索引擎名称。参数也会随着搜索引擎的选择而改变。这些参数硬编码在 JavaScript 对象中，可以轻松地在代码中进行更改。

原始数据格式输出如下。这有时很有用，尤其是在返回错误以及调试此软件时。

表格格式输出如下。这非常强大。数据以分层格式表示。您可以通过单击到达的深度来深入了解结构。

表格格式及其展开的深度输出如下

美化视图如下。当您想查看总体结构以及想打印结果时，这很有用。您必须将输出复制并粘贴到 Word 文档中并打印，因为在此版本的软件中我没有包含打印选项。

下面的类视图。当我想要遍历数组以选择特定对象时，我发现它很有用。

代码描述

安装

您需要 Visual Studio 2010 来使用此项目。您还需要一些 jQuery, JavaScript 和 MVC 2.0 知识来理解本讨论。

当您在 Visual Studio 2010 中创建一个新的 ASP.NET MVC 2.0 应用程序项目时，它会创建一个带有 Home 和 About 视图的主控制器。Visual Studio 还会自动加载一个包含 jQuery-1.4-1.js 的脚本文件夹。我将 jQuery 更新到版本 1.4-2。我还曾在 Scripts 文件夹中创建了一个自定义文件夹来存放此应用程序的独特脚本。这些独特脚本包括

  1. beautify.js，它从 http://github.com/einars/js-beautify 下载。它用于创建可打印的输出。
  2. beautifyresult1.js 用于设置 beautify.js。
  3. prettyprint.js 来自 http://github.com/jamespadolsey/prettyPrint.js。它用于表格输出。
  4. BuildClassTree.Js 用于构建类树。
  5. paramselect1.js 负责加载选择框、参数、获取数据并显示它。

JSON 控制器

JSON 控制器从 Web 服务获取数据。代码如下

public JsonResult JsonData1(string searchengine, string url1, string parameter)
{
    string appid = "";
    switch (searchengine)
    {
        case "Google":
            appid = "";
            break;
        case "Yahoo":
            appid = "Use your appid here";
            break;
        case "Bing":
            appid = "Use your appid here";
            break;
        default:
            break;
    }
    string urselected = url1 + parameter + appid;
    WebClient serviceRequest = new WebClient();
    var JsonResponse = serviceRequest.DownloadString(new Uri(urselected));
    return Json(JsonResponse, JsonRequestBehavior.AllowGet);
}

通过这段代码，我们使用提供的 url1 (取决于搜索引擎)、应用程序 ID 和参数来构建 URI。请注意，您必须从 Bing 和 Yahoo! 获取自己的应用程序 ID。虽然 Google 推荐使用应用程序 ID，但我没有使用。另外，请注意返回的数据是 JSON 格式。

JSON 视图 'Div's

<div id="controls_div" style="background-color: #FCFCFC">
<select id="select_engine_select" 
    onclick="return select_engine_select_onclick()" 
    style="border: thin solid #000000; width: 108px; background-color: #FCFCFC;" >
</select>
<hr/><b>Parameters</b>
<div id="buildenginediv"></div>
<hr />
<input type="button" class="cssbutton2" id="RawData_button" 
  onclick="Get_Engine_Data('#rawdatadiv')" value="RawData" />
<input type="button" class="cssbutton2" id="table_Button" 
  onclick="Get_Engine_Data('#tabledatadiv')" value="Table" />
<input type="button" class="cssbutton2" id="Beautify_button" 
  onclick="Get_Engine_Data('#beautifydiv')" value="Beautify" />
<input type="button" class="cssbutton2" id="Class_button" 
  onclick="Get_Engine_Data('#JsonListdiv')" value="Class" />
<input type="button" class="cssbutton2" id="Clear_button" 
  onclick="Clear_AllData()" value="Clear Data" />
<br />
<hr />
</div>
<div id="headerdiv"></div>
<div id="JsonListdiv"></div>
<div id ="rawdatadiv"></div>
<div id="tabledatadiv" ></div> 
<div id="animclassdiv"></div> 
<div id="beautifydiv">
<textarea rows="30" cols="80" name="content" id="textdiv" 
style="background-color: #FCFCFC">
</textarea>
</div>
<div id="footerdiv"></div>

控件的 DIV 包含用于选择引擎的下拉框和按钮。为了保持视图的简洁，我为每种类型的数据呈现使用了一个 DIV。paramselect1.js JavaScript 文件加载选择框、参数、获取数据并显示它们。我将描述各种函数。

搜索引擎选择框

Search_engines1 包含 URL 引擎和每个搜索引擎特有的参数信息。可以修改此项以添加新的搜索引擎或新的参数。

var search_engines1 =
{
    "Google": {
    "urlengine": "https://ajax.googleapis.ac.cn/ajax/services/search/web?v=1.0",
    "parameter": { "&q": "pizza 94539" }
}
,
//Yahoo
"Yahoo": {
"urlengine": http://local.yahooapis.com/LocalSearchService/V3/localSearch?output=json",
"parameter: { 
"&query": "pizza",
"&zip": "94539",
"&results": "2"
}
}
,
//Bing
"Bing": {
"urlengine": http://api.search.live.net/json.aspx?sources=web",
"parameter: { 
"&query":"pizza 94539",
"&count":"2"
}
}
,
//Twitter
"Twitter": {
"urlengine": "http://search.twitter.com/search.json?",
"parameter": { 
"&q":"windows phone 7"
}
}

Build_Engine 函数

Build_Engine 函数将搜索引擎名称加载到选择框中，并加载第一个搜索引擎参数作为默认值。

function Build_Engine() {
    // jQuery.each(search_engines, function (key, val) { recursiveFunction(key, val) });
    $('#buildenginediv').empty();
    var s = $('#select_engine_select')[0]; //Select the select box
    s.length = 0; //empty out the select box
    var iselect = 0;
    $.each(search_engines1, function (key, val) 
    {
        var op = new Option(key); //Create "Option i" with a value of i
        s[iselect] = op; //Add "Option i" at index i
        iselect++;
    }
    )
    // $('#buildenginediv').append( $("#select_engine_select option:selected")[0].value);
}

Build_Engine1 函数根据选定的搜索引擎填充参数。

function Build_Engine1() {
    $('#buildenginediv').empty();
    var params = $("#select_engine_select option:selected")[0].value;
    var parameter_selected = search_engines1[params];
    param_count = 0;
    $.each(parameter_selected['parameter'], function (key, val) {
    $('#buildenginediv').append('<input id="Key' + param_count + 
       '" type="text" readonly="readonly" style="width: 150px" value="' + 
       key + '"/>' + '<input id="Text' + param_count + 
       '" type="text" style="width: 400px" value="' + 
       val + '"/> <br/>');
    param_count++;
    })
}

Get_Engine_Data 函数

Get_Engine_Data(divname) 函数将 DIV 名称作为参数传入。它将此名称与选定引擎的参数值一起使用，来构建对 JSON 控制器的请求，并使用 jQuery 获取 JSON 数据。然后它调用 displayresult 函数。

function Get_Engine_Data(divname) {
    var searchengine_selected = 
        $("#select_engine_select option:selected")[0].value;
    var parameter_selected = search_engines1[searchengine_selected];
    var urlengine = parameter_selected["urlengine"];
    var param1 = '';
    for (var iparamcount = 0; iparamcount < param_count; iparamcount++) {
        var textboxid = '#Text' + iparamcount;
        var keyid = '#Key' + iparamcount;
        param1 += $(keyid).val() + '=' + $(textboxid).val();
    }
    Clear_AllData();
    var selecteditems = { "searchengine": searchengine_selected, 
             "parameter": param1, "url1": urlengine };
    jQuery.getJSON('/Json/JsonData1', selecteditems, function (result) {
    displayresult(result, divname, selecteditems);
    })
}

displayresult 函数

displayresult(result, divname, selecteditems) 使用 JSON 结果、DIV 名称和选定项来构建视图。

  1. 如果请求原始数据，则将其附加到 rawdatadiv。
  2. 如果请求表格数据，我们使用 jQuery 的 parseJSON 解析 JSON 并调用 prettyPrint。生成的表格将附加到 tablediv。
  3. 如果请求美化结果，我们调用 beautifyresult 函数。beautifyresult 函数设置 beautify.js 函数所需的参数，调用它，并将其添加到 TextArea。我们还需要显示 beautifydiv，因为它包含美化数据输出的文本区域。
  4. 如果请求类结果，我们对结果进行 parseJSON 并调用稍后描述的 BuildTree 函数。
function displayresult(result, divname, selecteditems) {
    $('#headerdiv').append("<hr/>" + "Results From: " + 
       selecteditems["searchengine"] + " : " + " Parameters: " + 
       selecteditems["url1"] + selecteditems["parameter"] + "<hr/>");
    switch (divname) {
        case '#rawdatadiv':
            $(divname).append(result);
            break;
        case '#tabledatadiv':
            data = $.parseJSON(result);
            var tbl = prettyPrint(data);
            $(divname).append(tbl);
            break;
        case '#beautifydiv':
            $(divname).show();
            beautifyresult(result);
            break;
        case '#JsonListdiv':
            result1 = '{"datamade":' + result + '}';
            data = $.parseJSON(result1);
            folderarray = new Array();
            BuildTree(data, "datamade", 0);
            break;
        default:
            break;
    }
    $('#footerdiv').append("<hr/>" + "done" + "<hr/>");
}

Buildtree 函数

BuildTree 函数接受三个参数并具有递归性。在调用它之前，您还必须设置一个名为 folderarray 的数组。该函数查看对象，并根据它是父对象、对象还是数组，构建每个项并将其附加到 JsonListdiv。levelcount 跟踪级别，folderarray 跟踪父级的名称。

function BuildTree(obj, parent, levelcount) {
    // Go through all the properties of the passed-in object
    var space = new String("   ");
    var space1 = "";
    var prefix = "";
    var parentprint = "";
    //Setting level counter
    if (parent != undefined) {
        for (var ispace = 0; ispace < levelcount; ispace++) {
            var space1 = space1 + space;
        }
        if (typeof obj == "object") {
            levelcount++;
        }
        else {
            levelcount = 0;
        }
    }
    //start analyzing the object
    for (var i in obj) {
        // if a parent (2nd parameter) was passed in, then use that to 
        // build the message. Message includes i (the object's property name) 
        // then the object's property value on a new line
        var msgi;
        var msgobj;
        if (parent) { msgi = i; msgobj = obj[i]; } else { msgi = msgobj = ""; };
        // If this property (i) is an object, then recursively process the object
        //had to add null test because Google has some null data!
        if ((typeof obj[i] == "object") && (obj[i] != null)) {
            if (parent) {
                if ($.isArray(obj)) {
                    folderarray[levelcount] = '[' + i + '].';
                }
                //not Array
                else {
                    folderarray[levelcount] = i +'.';
                }
                //
                BuildTree(obj[i], parent + "." + i, levelcount);
            }
            //not parent 
            else {
                BuildTree(obj[i], i, levelcount);
            }
        }
        // not object
        else {
            parentfolderstring = "";
            for (var ifolder = 2; ifolder < levelcount; ifolder++) 
            {
                parentfolderstring += folderarray[ifolder];
            };
            // var stringtoreplace ='.[';
            var parentfolderstring1 = parentfolderstring.replace(/\.\[/g, "[");
            //for i in obj continues
            var parentitem = '<font size="2" color="black"><B>' + 
                             space1 + parentfolderstring1;
            var childitem = msgi + ': </B></font>' + 
                '<font size="2" color="blue">' + 
                msgobj + '</B></font>';
            $('#JsonListdiv').append(parentitem + childitem + '<br/>');
        }
        //end of for i in obj loop
    }
}

关注点

JSON 格式是一种紧凑的格式，用于从各种 Web 服务获取数据。本文介绍的 JSON 可视化工具对我开发项目以理解数据结构很有帮助。我希望它也能对您有所帮助。

参考文献

  1. James Podesly 的 "prettyPrint" for JavaScript，用于表格数据可视化。
  2. Einar Lielmanis 的 JavaScript unpacker and beautifier，用于美化格式。
  3. Matt Holthe 的 Show Object Properties，用于理解 JavaScript 对象的递归扫描。
  4. Twitter 搜索的 http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search。
  5. 关于 Yahoo! JSON 的 http://developer.yahoo.com/common/json.html#overview。
  6. Yahoo! 搜索的 http://developer.yahoo.com/search/local/V3/localSearch.html。
  7. 关于 Bing 的 http://msdn.microsoft.com/en-us/library/dd251056.aspx。
  8. Google 的 http://code.google.com/apis/ajaxfeeds/documentation/。

历史

这是本文的第一个版本。

© . All rights reserved.