【发布时间】：2021-09-23 11:03:12
【问题描述】：
需要通过一个 JSON 对象，该对象可能有也可能没有属性字段，它可以为空，也可以有 10 个不同的字段，然后我需要在代码块中打印它，JSON 数据在这里：
"grade": [
{
"alias": "G1",
"id": "4d72868e-c46f-41d1-83a6-429a2421fd34",
"name": "Grade 1",
"properties": {
"size": "A1",
"dimensions": "2x2",
"maturity_weight": "150"
},
"createdAt": "2020-03-30T09:57:24.756Z",
"updatedAt": "2020-03-30T09:57:24.756Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "G2",
"id": "62fbefef-3342-43aa-8ed3-ed2ff0ff7cd6",
"name": "Grade 2",
"properties": {
"size": "A2",
"dimensions": "3x3",
"maturity_weight": "150"
},
"createdAt": "2020-11-22T13:29:42.461Z",
"updatedAt": "2020-11-22T13:29:42.461Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "G3",
"id": "9ce20ee1-c197-4775-97cb-35998ce51d4b",
"name": "Grade 3",
"properties": {
"size": "A3",
"dimensions": "4x4",
"maturity_weight": "150"
},
"createdAt": "2020-11-22T13:31:16.955Z",
"updatedAt": "2020-11-22T13:31:16.955Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "G4",
"id": "83f6ff4b-ab75-4930-ab84-59763b24d435",
"name": "Grade 4",
"properties": {
"size": "A4",
"dimensions": "4x4",
"maturity_weight": "150"
},
"createdAt": "2020-11-22T13:31:16.955Z",
"updatedAt": "2020-11-22T13:31:16.955Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "G5",
"id": "8dea25be-93e3-4ab4-ae58-685e4ab05dbf",
"name": "Grade 5",
"properties": {
"units": "gms",
"maxWeight": "170",
"minWeight": "100"
},
"createdAt": "2020-08-11T08:52:23.484Z",
"updatedAt": "2020-08-11T08:52:23.484Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "G6",
"id": "85aa81e4-b428-44d5-9ee2-4215de6c8226",
"name": "Grade 6",
"properties": null,
"createdAt": "2020-05-15T09:53:23.809Z",
"updatedAt": "2020-05-15T09:53:23.809Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "SG",
"id": "f4cd4ec4-1b99-42b1-839b-cd18c54d1761",
"name": "some grade",
"properties": {
"shape": "",
"units": "gms",
"dimension": "",
"maxWeight": "2",
"minWeight": "1"
},
"createdAt": "2021-06-11T15:10:39.102Z",
"updatedAt": "2021-06-11T15:10:39.102Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "SO",
"id": "ef862161-e3e9-4b84-9164-178a600a15a8",
"name": "som",
"properties": {
"shape": null,
"units": "gms",
"dimension": null,
"maxWeight": "3",
"minWeight": "2"
},
"createdAt": "2021-06-11T15:18:16.460Z",
"updatedAt": "2021-06-11T15:18:16.460Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
},
{
"alias": "AS",
"id": "4a4e1584-b0a7-4069-8851-0ee7f9e18267",
"name": "asdfadf",
"properties": {
"shape": null,
"units": "gms",
"dimension": null,
"maxWeight": "sdf",
"minWeight": "asfd"
},
"createdAt": "2021-06-11T15:19:07.387Z",
"updatedAt": "2021-06-11T15:19:07.387Z",
"farmId": "703ab269-20f5-4dca-8687-e14de5f6a4cb"
}
]
}
并返回值如：
<br>
<b-row>
<b-col class="underline">My Grades</b-col>
</b-row>
<br>
<div v-if="grades.length > 0">
<b-card-group class="mb-4" v-for="grade in grades" :key="grade.id">
<b-card :title="getTitle(grade)">
<b-card-text class="list-card">
{{getProperties(grade)}}
<span style="float:right">
<b-button
class="mr-1"
v-b-modal.modalConfirmDelete
type="submit"
variant="primary"
size="sm"
>
<b-icon icon="map" size="is-small"></b-icon>
</b-button>
<b-button
class="mr-1"
type="reset"
variant="danger"
@click="actionDelete(grade.id)"
size="sm"
>
<b-icon icon="trash-fill" size="is-small"></b-icon>
</b-button>
<b-modal id="modalConfirmDelete" title="BootstrapVue">
ddd
</b-modal>
</span>
</b-card-text>
</b-card>
</b-card-group>
我尝试了一些类似 map、this below 和 join 的东西，但没有任何效果，因为 json 中的属性都是 diff，也尝试了带有长度的 for 循环。
getProperties(grade) {
if (grade) {
for (const [key, value] of Object.entries(grade)) {
return `key: ${key}, value: ${value}`
}
}
}
},
只需要属性，在此先感谢
【问题讨论】：
-
请您澄清一下，
getProperties函数的 期望输出 是什么？您想要grade中每个条目的properties属性吗？你想要什么格式的？ -
对不起，我只需要它一个年级，但它会循环遍历所有不为空的属性，输出将是一个字符串，例如：Weight: 20, MaxDimension: 30, Extra: blablablabla , 所以无论是在单一等级的属性中
标签： javascript json vue.js object bootstrap-vue