代码之家 › 专栏 › 技术社区 › Gnik

如何使用键从JSON中提取对象?

typescript2.0 typescript reactjs json arrays

-1

Gnik · 技术社区 · 6 年前

我在用打字稿。我想迭代下面的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();

例如,我的意见是 印度的 “然后我需要从JSON中提取对象

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

我怎么能拿到这个?

2 回复 | 直到 6 年前

madjaoue 6 年前

在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));

异步访问 :

如果 获取所有菜单 返回一个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"
  }
]

OliverRadini 6 年前

这是一个 typescript playground example 显示相同但来自本地数据。这取决于什么 getAllMenus 返回;我猜它是异步的,所以我们需要知道您在那里处理的是什么。