如果 json 对象和 return 键和值都不同甚至为空，如何循环？ Vue，Javascript

Question

需要遍历一个 JSON 对象，它可能有也可能没有属性字段，它可以为 null 或者它可以有 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"
        }
    ]
}

和return值如：

<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 中的属性都是不同的，也尝试了长度循环。

getProperties(grade) {
      if (grade) {
         for (const [key, value] of Object.entries(grade)) {
            return `key: ${key}, value: ${value}`
          }
          
         }
      }
    },

只需要属性，提前致谢

Answer 1

我无法从 getProperties 函数中计算出你想要的东西，但这有帮助吗？

const grade1 = {"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"};
const grade2 = {"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"};
const grade3 = {"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"};
const grade4 = {"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"};

// this function is used in getProperties
function keyValString(obj) {
  // reduce the output to one string
  return Object.entries(obj).reduce((str, [key, value], index) => { // for each key and value
    if (value) { // if value is not null or an empty string
      if (str) str += ", "; // if there is already text, add a comma and space
      str += `${key}: ${value}`; // add on the key and value
    }
    return str; // keep the string for the next loop
  }, "" /* <--- this empty string is the start value for our reduce operation */);
}

function getProperties(grade) {
  // if grade not null, and grade.properties not null, use keyValString(grade.properties) else use "No properties on grade."
  return (grade && grade.properties && keyValString(grade.properties)) || "No properties on grade."; // to instead return null, just replace the string with null
}

console.log( getProperties(grade1) );
console.log( getProperties(grade2) );
console.log( getProperties(grade3) );
console.log( getProperties(grade4) );

.as-console-wrapper {min-height:100%} /* format the console output */

Answer 2

这个是你要找的吗？

var jsonData = JSON.parse('{"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"}]}');

new Vue({
  el: '#app',
  data() { return {
      grades: jsonData.grade,
    }
  },
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /><script src="//unpkg.com/vue@2/dist/vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <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="grade.name">
        <b-card-text v-for="[key, value] in Object.entries(grade.properties != null ? grade.properties : {})" :key="key" class="list-card">
          {{ `${key}: ${value}` }}
          <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>
  </div>
</div>

我所做的主要更改是将 getProperties 替换为 v-for，因为在 table 中显示多行需要每个 [=] 的新 HTML 元素63=] 在 grade.properties.

为了 v-for，我正在循环播放 Object.entries(grade.properties ?? {})。

Object.entries() 将为对象中的每个属性 return 一个 [key, value] 数组，使我们能够轻松显示两者。

grade.properties

null

undefined

grade.properties ?? {} 只是 return 一个空对象 {}。这避免了给 Object.entries() 赋空值，如果你用 null/ undefined 调用它会抛出错误。
- 如果您的设置不支持 ?? 运算符，那么这也足够了：
  grade.properties != null ? grade.properties : {}

（我也直接把getTitle(grade)换成了grade.name，不过这更多是个人喜好问题。）

如果 json 对象和 return 键和值都不同甚至为空，如何循环？ Vue，Javascript

How to loop through json obejct and return keys and values if they are all different or even null? Vue, Javascript

javascript

json

object

vue.js

bootstrap-vue