如何访问API返回的二层嵌套字段并实现按adress.state排序

问题根源 #

你传入adress.state作为column参数时，代码直接使用a[column]的方式只会读取对象的一级属性，也就是尝试找键名为adress.state的字段，而非读取adress下的state二级字段，因此无法拿到正确值导致排序失效。

重构方案 #

新增一个嵌套属性取值工具函数，自动拆分路径逐层读取属性值，同时优化原有重复的排序逻辑，重构后代码如下：

// 嵌套属性取值工具函数
function getNestedValue(obj, path) {
  return path.split('.').reduce((current, key) => {
    return current ? current[key] : undefined;
  }, obj);
}

function sortInfo(e) {
  const column = e.target.dataset.column;
  const order = e.target.dataset.order;
  const changeData = e.target;
  // 切换排序方向
  const newOrder = order === 'desc' ? 'asc' : 'desc';
  changeData.setAttribute('data-order', newOrder);

  searchResult.fetchResult().then(response => {
    response.sort((a, b) => {
      const valA = getNestedValue(a, column);
      const valB = getNestedValue(b, column);
      // 统一排序逻辑，根据方向返回对应结果
      if (newOrder === 'asc') {
        return valA > valB ? 1 : -1;
      } else {
        return valA < valB ? 1 : -1;
      }
    });
    buildTable(response);
  });
}

使用方式 #

保持你给state对应排序按钮的data-column属性设置为adress.state即可，现在代码可以正确读取二级嵌套字段完成排序，原有一级字段的排序功能也不受影响。

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