javascript - 无法将 json 转换为 javascript 中谷歌图表所需的格式

Question

下面的 Controller 返回的 json 格式如下:

[
{"classification":"CON","count":2},
{"classification":"PUB","count":1},
{"classification":"SENS","count":1}
] 

但是谷歌图表所需的格式是

[
['classification','count'],
['CON',2],
['PUB',1],
['SENS',1]
] 

下面是我正在使用的 Controller :

[Produces("application/json")]
    [Route("api/Reports")]
    public class ReportsController : Controller
    {
        private readonly Documint.Models.DocumintDBContext _context;
        public ReportsController(Documint.Models.DocumintDBContext context)
        {
            _context = context;
        }
        [HttpGet("MDReport", Name = "rep")]
        public JsonResult Report()
        {
            var q3 = _context.Masterdocs
            .Where(m => m.CorpId == "AFRICUREIND")
                .GroupBy(s => new { classi = s.Classification })
                .Select(x => new { classification = x.Key.classi, count = x.Count() }).ToList();


            JsonResult result = Json(q3);


           return Json(q3);
        }
    }

因此，我正在进行一些拆分操作，首先将其转换为数组并返回:

[classification,count,CON,2,PUB,1,SENS,1]

最后一个 for 循环后得到的数组是

['[classification','count'],['CON',2],['PUB',1],['SENS','1]']

实际上应该如下所示:

[['classification','count'],['CON',2],['PUB',1],['SENS',1]]

请注意上述数组开头和结尾的不需要的单引号。下面是我的 javascript 和 HTML 代码。

        // Load the Visualization API and the piechart package.
        google.charts.load('current', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                type: 'GET',
                url: "/api/Reports/MDReport",
                dataType: 'JSON',
                async: false
            }).responseText;
            alert(jsonData);
            var split1 = jsonData.split("},");


            var split2, split3;
            var splitlist=[];
            var k,x,y;
            for (k = 0; k < split1.length; k++)
            {
                split2 = split1[k].split(",");


                for (x = 0; x < split2.length; x++)
                {
                    split3 = split2[x].split(":");

                    for (y = 0; y < split3.length; y++)
                    {
                        splitlist.push(split3[y]);


                    }

                }

            }

            for (var j = 0; j < splitlist.length; j++)
            {
                splitlist[j] = splitlist[j].replace('{', '');
                splitlist[j] = splitlist[j].replace('}', '');
                splitlist[j] = splitlist[j].replace('"', '');
                splitlist[j] = splitlist[j].replace('"', '');

            }


            var finallist = [];
            finallist.push(splitlist[0]);
            finallist.push(splitlist[2]);

            for (var n = 1; n < splitlist.length; n = n + 2)
            {
                finallist.push(splitlist[n]);

            }
            alert(finallist);
            for (var m = 0; m < finallist.length; m=m+2)
            {
                finallist[m] = "['"+finallist[m]+"'";
                if (isNaN(finallist[m + 1])) {

                    finallist[m + 1] = "'" + finallist[m + 1] + "']";
                }
                else
                {
                    finallist[m + 1] = finallist[m + 1]+"]";
                }

            }
            alert(finallist);


            var data = google.visualization.arrayToDataTable(finallist);

            var options = {
                title: 'Master Documents',
                is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }

    </script>
    <div id="chart_div" style="height:500px;width:500px"></div>

有人可以帮我解决需要修改的问题吗？我无法找出错误。

Answer 1

最好的选择是在 JavaScript 中执行此操作。流程大概是这样的:

1. 从服务器/ Controller 获取正确键入的 JSON。这样你就得到了你的第一个 JSON。
2. 解析数据并将其转换为 Google 图表所需的格式。
3. 将转换后的数据传递到 Google 图表。

对于第二步，可能如下所示:

// you would get this from your AJAX request
var data = [
    { "classification": "CON", "count": 2 },
    { "classification": "PUB", "count": 1 },
    { "classification": "SENS", "count": 1 }
];

var chartsData = [['classification', 'count']].concat(data.map(x => [x.classification, x.count]));

var chartsDataJson = JSON.stringify(chartsData);
console.log(chartsDataJson);
// [["classification","count"],["CON",2],["PUB",1],["SENS",1]]

<小时/>

请永远不要尝试像您那样使用字符串操作来解析 JSON。 JSON 是 JavaScript 的原生格式，因此您有 JSON.parse和 JSON.stringify用于将 JavaScript 对象序列化和反序列化为 JSON。