javascript - 在 jQuery : equivalent to Html. Raw() 中将字符串从服务器转换为 HTML？

Question

我有一个简单的图表(使用 Chartist，但这与我的问题无关)。到目前为止，我已经为它加载了如下数据:

 <script>
        (function () {
            if ($('#ChartistDebtChart').get(0)) {
                var options = {                    };

                new Chartist.Line('#ChartistDebtChart', {
                     labels: [@Html.Raw(String.Join(", ", Model.Debt.BalanceOverTime.Select(c=> @"'" + c.Item1 + @"'").ToList()))],
                    series: [
                         [@Html.Raw(String.Join(", ", Model.Debt.BalanceOverTime.Select(c=>  ((int)c.Item2)).ToList()))],
                    ]
                }, options);
            }
        })();

        </script>

这将呈现如下内容:

 new Chartist.Line('#ChartistDebtChart', {
                     labels: ['13-02-2018', '16-03-2018', '13-04-2018', '13-04-2018'],
                    series: [
                         [9000, 9056, 9156, 9256],
                    ]
                }, options);

哪个工作完美!

但是，如果我在从后端获取数据的地方执行相同的操作。我将使用 jQuery 从我们的 Controller 执行 GET。当我们写入此数据时，'13-02-2018'、'16-03-2018'、'13-04-2018'、'13-04-2018' 不会被视为 HTML 并且图表中未显示数据。

所以我的问题是:在 jQuery 中使用 GET 时，如何将后端字符串视为 HTML？

我尝试了以下方法:

尝试 1:在列表上使用 Map:

  new Chartist.Line('#DebtDeteriorationGraph', {
                labels: [result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ")],
                series: [
                    ['70000','55000','45000','30000','25000','20000']
                ]
            }, options);

硬编码 y 值以使其变得简单，我尝试了 result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ") 将其视为一个字符串而不是多个。

尝试 2:从服务器提供准确的字符串:

我制作了一个字符串，它应该是这样的 ('13-02-2018', '16-03-2018', '13-04-2018', '13-04-2018')，然后像这样插入:

  new Chartist.Line('#DebtDeteriorationGraph', {
                    labels: [result.DebtDeteriorationOverTimeLabelString],
                    series: [
                        ['70000','55000','45000','30000','25000','20000']
                    ]
                }, options);

这在 x 轴上也被视为“1 项”。

尝试 3:从服务器获取字符串并尝试解析为 HTML

var htmlRes = $('<div/>').html(result.DebtDeteriorationOverTimeLabelString).text();
                    new Chartist.Line('#DebtDeteriorationGraph', {
                        labels: [htmlRes],
                        series: [
                            ['70000','55000','45000','30000','25000','20000']
                        ]
                    }, options);

所有 3 次尝试都被视为字符串，因此与我从 C# 运行 Html.Raw() 时的效果不同。

有什么想法吗？ :-)

Answer 1

您正在尝试让您的响应被视为“HTML”，但您并不真正需要它。 labels 是 javascript 数组(字符串)，因此您需要 javascript 数组，其中每个项目代表一个标签。最近的尝试是:

labels: [result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ")]

产生一个字符串的 javascript 数组。相反，您需要:

labels: result.DebtDeteriorationOverTime.map(item => item.Item1)

因为 DebtDeteriorationOverTime 已经是数组，但不是你需要的，所以你使用 map 来生成你需要的数组。无需在 [] 中加入任何内容或包含任何内容。

请注意，您还可以从您的 api 返回表示图表信息(带有 labels 和 series 属性)的整个 json 对象。然后你可以这样做:

new Chartist.Line('#ChartistDebtChart', result.chartData, options);