Question

JSON和jQuery都很新，但这是我要做的事情 - 我将JSON字符串返回到我的网页，作为更大报告模型的一部分在生成报告的同时创建多个图表（使用jqPlot）。

要练习这些图表，我使用的是以下教程 - Tutorial

以下是本教程中的jQuery -

jQuery(document).ready(function() {
    urlDataJSON = '/Graph/HearthRateDataJSON';

    $.getJSON(urlDataJSON, "", function(data) {
        var dataLines = [];
        var dataLabels = "";
        $.each(data, function(entryindex, entry) {
            dataLines.push(entry['Serie']);
            dataLabels = dataLabels + entry['Name'];
        });

        Plot(dataLines, dataLabels);
    });
});

function Plot(dataLines, dataLabels) {
    var line1 = "{ label: 'line1.0' }";
    options = {
        legend: { show: true },
        title: 'Heart rate overview',
        axesDefaults: { pad: 1 },
        seriesDefaults: { showMarker: false, trendline: { show: false }, lineWidth: 3 },
        axes: {
            yaxis: { min: 0, autoscale: true, label: 'HR[bpm]', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
            xaxis: { autoscale: true, label: 'Time', labelRenderer: $.jqplot.CanvasAxisLabelRenderer }
        }
    };

    //Data from database is already an array!
    plot = $.jqplot('chartdiv', dataLines, options);

    plot.redraw(); // gets rid of previous axis tick markers
}

要检索JSON数据，本教程使用getJson（）方法指向链接。我已准备好JSON字符串传递给jQuery，例如。

[
    {"Name":"Patient","Serie":[[1,4],[2,25],[3,7],[4,14],[5,13]]},
    {"Name":"Test","Serie":[[1,13],[2,5],[3,7],[4,20],[5,17]]}
]

在jqPlot示例中，他们通过以下方式传递硬编码数据：

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

但是，我自动生成的JSON字符串具有花括号等。有没有办法在不使用getJson方法的情况下将其传递给jQuery？

EDIT-Pie Chart Jquery Code

    $(document).ready(function () {
        var data4 = '[{ "Label": "Car", "Value": 9 },{ "Label": "Bus", "Value": 2 },{ "Label": "Train", "Value": 7 },{ "Label": "Plane", "Value": 8 },{ "Label": "Boat", "Value": 4 }]';

        var data = $.parseJSON(data4);

        var plot1 = jQuery.jqplot('pieChart', [data],
    {
        seriesDefaults: {
            // Make this a pie chart.
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                showDataLabels: true
            }
        },
        legend: { show: true, location: 'e' }
    }
  );
    });

Answer 1

使用parseJSON：

 var plotline =  $.parseJSON(jsonstring);

这将像getJSON一样工作，而不是获取网址，你可以传递你的字符串。

http://api.jquery.com/jQuery.parseJSON/

Answer 2

您还可以使用浏览器的原生JSON.parse方法

Answer 3

您可以使用其他答案中提供的任何建议方法对其进行解析，然后再使用它。或者只是简单地使用您拥有的JSON数据，因为它是一个数组，而{}中的所有数据都被视为地图。因此，您可以直接使用它们而无需解析as I do in a similar situation shown in the code available here.

在提供的示例中，有JSON个数据在变量中编码，名为json。

var json = [{
    "Name": "Poll Results",
    "Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];
var dataLines = json[0].Serie;
var title = json[0].Name;

然后在结尾dataLines变量传递给图表。

修改

在使用您提供的样本后，我得出以下结论。显然，给定的数据不是jQuery的parseJSON方法可以使用的JSON格式。但是当你stringify它有效时。

My sample showing it works fine after application of stringify on the data.

我尝试将你的JSON转换为它的String等价物，将它包装在''内并且它有效。所以答案很简单，使用parseJSON方法必须传递一个String而不是任何其他类型的Object。

使用getJson（）将Json字符串传递给JQuery

3 个答案: