Visitar URL original
第 42 期(算法-搜索):获取多层嵌套对象的目标属性值 · Issue #45 · fezaoduke/fe-practice-hard · GitHub
Skip to content

第 42 期(算法-搜索):获取多层嵌套对象的目标属性值 #45

Description

@wingmeng

题目:

已知后端某接口可能返回的数据结构如下:

// 正常情况:
{
  "status": 200,
  "msg": "ok",
  "response": {
    "data": {
      "total": 2,
      "pageSize": 10,
      "lists": [
        { "id": 1, "name": "hello" },
        { "id": 2, "name": "world" }
      ]
    },
    "keyword": "hello world"
  }
}

// 请求异常:
{
  "status": 400,
  "msg": "bad request",
  "response": null
}

// 空数据:
{
  "status": 200,
  "msg": "ok",
  "response": {
    "data": {
      "total": 0,
      "pageSize": 10,
      "lists": null
    },
    "keyword": "hack"
  }
}

前端需要获取返回数据中的 response.data.lists 来渲染业务页面(伪代码如下),请编写一个通用函数来改善逐级判断属性值的问题。

axios.get('/list?keyword=xxx')
  .then(function(res) {
    // 为了防止报错,而不得不逐级判断属性值的有效性
    if (res.response && res.response.data && res.response.data.lists) {
      render(res.response.data.lists);
    }
  });
/**
 * @param {object | array} data - 源数据
 * @param {string} fieldRoute - 字段名路径,如 a.b.c 
 */
function getDataBy(data, fieldRoute) {
  // 你的代码
}

测试数据:

// 正常情况:
getDataBy(res, 'response.data.lists');  // [{"id": 1, "name": "hello"}, {"id": 2, "name": "world"}]

// 请求异常:
getDataBy(res, 'response.data.lists');  // null

// 空数据:
getDataBy(res, 'response.data.lists');  // null

getDataBy(null, 'response.data.lists');  // null
getDataBy([{id: 1}, {id: 2}, {id: 3}, {id: 4}], 1);  // {id: 2}

参考答案:

function getDataBy(data, fieldRoute) {
  if (fieldRoute == undefined) {  // undefined | null
    return data
  }

  var fields = String(fieldRoute).split('.');
  
  return fields.reduce(function(obj, field) {
    if (obj) {
      return obj[field]
    } else {
      return null
    }
  }, data);
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions