javascript - 如何从 WebAPI Controller 使用 javascript 函数发送 JSON(不带引号)

Question

我们有

1. C# WebAPI 服务器后端
2. Node JS 客户端 SPA 前端

我们的 API 之一生成一个代表 ChartJS 模型的 C# 对象。就像这样

public virtual IActionResult Chart()
{
        var chartModel = GetChart();
        return new ObjectResult(chartModel);
}

简化后的 ChartModel 类如下所示

public class ChartJSModel
{
    ...
    public string callback { get; set; } //FUNCTION
    ...
}

客户端收到此 JSON ObjectResult(再次简化)

{
    "callback": "function(value, index, values) { return Number(value.toString());}"        
}

回调函数用引号括起来。这会破坏 ChartJS。

问题

1. 所以 JSON 是 purely meant for data description language但如何让 C# WebAPI 发回不带引号的回调？
2. 我可以在客户端处理 JSON，但也许还有其他选择。

Answer 1

JSON 中不能有函数 - 在 JSON 中，值只能是...对象、数组、字符串、数字、null、true 或 false

这并不是说您想做的事情无法实现 - 您只需跳出框框思考......例如在服务器上发送 { "callback": "fn1"} ...在客户端中，处理解析后的 JSON(即您现在拥有的 javascript 对象)并查找回调键，并相应地更改值... “fn1”功能(...等

所以，如果您更改服务器代码以发送类似的内容

{
    "type": "line",
    "data": {
        "datasets": [
        ]
    },
    "options": {
        "scales": {
            "xAxes": [{
                    "type": "logarithmic",
                    "position": "bottom",
                    "ticks": {
                        "beginAtZero": false,
                        "min": 0.0,
                        "max": "NaN",
                        "stepSize": "NaN",
                        "callback": "fn1"
                    },
                }
            ],
            "yAxes": [{
                    "type": "logarithmic",
                    "position": "left",
                    "ticks": {
                        "beginAtZero": false,
                        "min": 0.0,
                        "max": "NaN",
                        "stepSize": "NaN",
                        "callback": "fn1arrow"
                    },
                }
            ]
        },

    }
}

然后你可以编写一个类似的函数

function fixCallbacks(obj) {
    const fns = {
        fn1: function(value, index, values) { return Number(value.toString());},
        fn1arrow: (value, index, values) => Number(value.toString()),
    };
    Object.entries(obj).forEach(([k, v]) => {
        if (typeof v === 'object' || typeof v === 'array') {
            fixCallbacks(v);
        } else if (k === 'callback') {
            obj[k] = fns[v] || obj[k];
        }
    });
}

注意:fn1 和 fn1arrow 执行相同的操作，只是显示您可以使用函数和箭头函数作为解决方案

它应该可以工作 - 像这样

const data = {
    "type": "line",
    "data": {
        "datasets": [
        ]
    },
    "options": {
        "scales": {
            "xAxes": [{
                    "type": "logarithmic",
                    "position": "bottom",
                    "ticks": {
                        "beginAtZero": false,
                        "min": 0.0,
                        "max": "NaN",
                        "stepSize": "NaN",
                        "callback": "fn1"
                    },
                }
            ],
            "yAxes": [{
                    "type": "logarithmic",
                    "position": "left",
                    "ticks": {
                        "beginAtZero": false,
                        "min": 0.0,
                        "max": "NaN",
                        "stepSize": "NaN",
                        "callback": "fn1arrow"
                    },
                }
            ]
        },

    }
};

function fixCallbacks(obj) {
    const fns = {
        fn1: function(value, index, values) { return Number(value.toString());},
        fn1arrow: (value, index, values) => Number(value.toString()),
    };
    Object.entries(obj).forEach(([k, v]) => {
        if (typeof v === 'object' || typeof v === 'array') {
            fixCallbacks(v);
        } else if (k === 'callback') {
            obj[k] = fns[v] || obj[k];
        }
    });
}

// here we "fix" the data
fixCallbacks(data);
//
console.log(data);