如何使用密钥从 json 中提取对象？答案

【问题标题】：How can I pull the object from the json using a key?如何使用密钥从 json 中提取对象？
【发布时间】：2018-12-30 22:43:32
【问题描述】：

我正在使用 Typescript。我想迭代下面的 json 文件并根据搜索字符串提取单个对象。

{
  "menus": {
    "indian": [
        {
            "id": "000123",
            "name": "Dish 1"
        },
        {
            "id": "000124",
            "name": "Dish 2"
        },
        {
            "id": "000125,
            "name": "Dish 3"
        }
    ],
    "chinese": [
        {
            "id": "000126",
            "name": "Dish 4"
        },
        {
            "id": "000127",
            "name": "Dish 5"
        },
        {
            "id": "000128",
            "name": "Dish 6"
        }
    ],
    "tandoori": [
        {
            "id": "000129",
            "name": "Dish 7"
        },
        {
            "id": "000130",
            "name": "Dish 8"
        },
        {
            "id": "000131",
            "name": "Dish 9"
        }
    ]
   }
 }

我会将响应 json 映射到我的模型类

export interface Menu {
    indian: Item[];
    chinese: Item[];
    tabdoori: Item[];
}       

export interface Item {
    id: string;
    name: string;
}

const response: Menu = this.myApiService.getAllMenus();

例如，我的输入是“indian”，那么我需要从 json 中提取对象

"indian": [
            {
                "id": "000123",
                "name": "Dish 1"
            },
            {
                "id": "000124",
                "name": "Dish 2"
            },
            {
                "id": "000125,
                "name": "Dish 3"
            }
        ]

我怎样才能得到这个？

【问题讨论】：

你试过getAllMenus().menus.indian吗？
"indian" 是对象中的属性名称。因此，正如 Colin 所说，您可以简单地引用该属性。但是，如果“indian”是来自某个搜索字段的变量内的值（例如，如果您有 searchTerm = "indian" 这样的代码，您可能必须编写 ....menus[searchTerm]，以便您可以使用字符串变量来访问该对象属性。一旦你有了它，就很容易循环遍历数组中的项目。

标签： arrays json reactjs typescript typescript2.0

【解决方案1】：

这是一个typescript playground example，它显示相同但来自本地数据。它确实取决于getAllMenus 返回的内容；我猜它是异步的，所以我们需要知道你在那里使用的是什么。

【讨论】：

【解决方案2】：

在 TypeScript 中，属性和 JSON 键是不同的。 getAllMenus().menus 在这种情况下会给你一个错误。相反，使用getAllMenus()['menus'] 表示法。

export interface Menu {
    indian: Item[];
    chinese: Item[];
    tabdoori: Item[];
}       

export interface Item {
    id: string;
    name: string;
}

function getMenu(response ,name){
   return response['menus'][name]
}

同步访问

如果getAllMenus 返回一个对象（而不是可观察对象）：

const response: Menu = this.myApiService.getAllMenus();

console.log(getMenu(response, name));

异步访问：

如果 getAllMenus 返回一个 observable，并且需要订阅：

this.myApiService.getAllMenus().pipe(
  map( response : Menu => getMenu(response, name))
)
.subscribe( nameItems=> console.log(nameItems) );

输出：

[
  {
    "id": "000123",
    "name": "Dish 1"
  },
  {
    "id": "000124",
    "name": "Dish 2"
  },
  {
    "id": "000125,
    "name": "Dish 3"
  }
]

【讨论】：