如何在KnockoutJS观测对象赋值前为JSON数字添加千位分隔符

看了你的需求，你想在把AJAX获取的results数据绑定到Knockout观测对象前，给number1和number2字段加上千位分隔符，而且不想创建新对象，直接修改原数据对吧？没问题，咱们直接在AJAX的成功回调里处理就行。

实现步骤 #

核心思路就是遍历原数据数组，直接修改每个对象的数字字段，用你指定的正则表达式把数字转换成带千位分隔符的字符串，这样Knockout绑定的时候就能直接渲染格式化后的内容了。

修改后的完整代码 #

首先是AJAX数据处理部分：

var myChart= [];
/*Knockout.js*/
var viewModel = { 
  myChartData: ko.observable() 
};
$.ajax({
  method: "GET",
  url: myAPI,
  dataType: 'json',
  success: function (data) {
    // 遍历results数组，直接修改每个item的number1和number2
    data.results.forEach(item => {
      // 将数字转为字符串并添加千位分隔符
      item.number1 = item.number1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      item.number2 = item.number2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
    myChart[0] = data.results;
    viewModel.myChartData(myChart[0]);
  }
});

然后是Knockout的表格绑定（注意修正了绑定的观测对象名称，原来的leftChartData应该是笔误）：

<tbody id="topretailers" data-bind="foreach: myChartData">
  <tr>
    <td data-bind="text: name"></td>
    <td data-bind="text: number1"></td>
    <td data-bind="text: number2"></td>
  </tr>
</tbody>

关键说明 #

• 这里没有创建新对象，直接对data.results里的每个元素进行修改，完全符合你的要求。
• 正则表达式/\B(?=(\d{3})+(?!\d))/g会正确在数字的千位位置插入逗号，比如20000会变成20,000。
• 绑定的时候要确保foreach指向的是你定义的观测对象myChartData，避免因为名称不匹配导致数据不渲染。

内容的提问来源于stack exchange，提问作者user7019480