如何使用 javascript function 从 WebAPI Z594C103F2C6E04C31DAZAB059F01 发送 JSON 不带引号

Question

我们有

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

我们的一个 API 生成一个 C# object，它代表一个 ChartJS model。 像这样

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

ChartModel class 简化看起来像这样

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

客户端收到此 JSON ObjectResult（再次简化）

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

回调 function 用引号引起来。 这打破了 ChartJS。

问题

1. 所以 JSON 纯粹是用于数据描述语言，但我如何让 C# WebAPI 发送回不带引号的回调？
2. 我可以在客户端处理 JSON 但也许还有其他选择。

Answer 1

you can't have functions in JSON - in JSON, values can only be... object, array, string, number, null, true or false

这并不是说您想要做的事情是无法实现的-您只需要跳出框框思考...例如在服务器上发送{“回调”：“fn1”}...在客户端中，处理已解析的 JSON （即，您现在拥有的 javascript Object）并查找回调键，并相应地更改值......“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 像

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);