时间戳

首页 > 解决方案 > 获取与特定值匹配的 JSON 对象

javascript - 获取与特定值匹配的 JSON 对象

问题描述

我正在构建一个小网络应用程序来练习和学习 Vue.js 并使用 API。

对于我想解决的特定问题，我想返回具有我请求的匹配 uuid 的对象。

以我目前的知识，我知道我可以通过实现一些排序和循环逻辑来做到这一点。

但是我对 JS 和 Vue.js 还是很陌生，所以我不确定是否有更好的方法来解决这个问题。

是否有内置功能或某种形式的“最佳实践”来解决这个问题？

methods: {
    fetchItem(row) {
        // row.target_uuid  -- this is the UUID I want
        // this.$props.todoItems;   -- this contains the json objects
        // return this.$props.todoItems[i] where this.$props.todoItems[i]['uuid'] == row.target_uuid
},

这是我的 $props.todoItems 的片段，用于上下文

[
  {
    "title": "Install Maris",
    "uuid": "9ec9ea6b-0efc-4f6a-be2e-143be5748d3a",
    "field_completed": "False"
  },
  {
    "title": "Figure out why VS Code sucks",
    "uuid": "85120da5-ee59-4947-a40f-648699365c73",
    "field_completed": "False"
  },
  {
    "title": "Start designing portfolio",
    "uuid": "243c1960-7ade-4a68-9a74-0ccc4afa3e36",
    "field_completed": "False"
  },
  {
    "title": "Meal Prep",
    "uuid": "85b64b18-9110-44d8-bd2d-8f818b0a810f",
    "field_completed": "False"
  },
  {
    "title": "Sharpen knives",
    "uuid": "8a7ac5f6-8180-4f20-b886-628fd3bcfc85",
    "field_completed": "False"
  },
  {
    "title": "Set up SSH keys",
    "uuid": "f879c441-8c05-4f24-9226-125c62576297",
    "field_completed": "False"
  }
]

标签： javascriptjsonvue.jsfilter

解决方案

如果您知道您正在寻找一个项目（或第一个匹配的项目），您应该仔细查看Array.find()JS 提供的方法。（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）
还可以查看 Array 原型提供的所有其他方法，其中大多数都具有相当的描述性和解决您将遇到的大部分基本问题。

要在您的 Vue 应用程序中使用它，您可以使用一种方法，该方法根据提供的 uid 返回您的待办事项，如下所示

todoByUid(uidToFind) {
  return this.todos.find(todo => todo.uid == uidToFind)
}

如果您只关心当前选定的项目，那么 Jacob 提到的计算值就是要走的路：

computed() {
  selectedTodo() {
    return this.todos.find(todo => todo.uid == this.selectedUid)
  }
}

推荐阅读