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

Posted 2023-02-22

【中文标题】获取与特定值匹配的 JSON 对象

【英文标题】：Get the JSON object that matches a specific value

【发布时间】：2019-10-05 14:12:04

【问题描述】：

我正在构建一个小型网络应用程序来练习和学习 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 用于上下文的 sn-p

[
  
    "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"
  
]

【问题讨论】：

1) 使用 javascript filter 是正确的。 2) 如果合适，使用computed values 而不是methods。计算值将被缓存，因此它通常比方法更高效

谢谢！将研究过滤器和计算值！

【参考方案1】：

如果您知道您正在寻找一个项目（或第一个匹配的项目），您应该仔细查看 JS 提供的 Array.find() 方法。 (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)