循环遍历json对象嵌套属性并在不为空时显示它们-vue [重复]答案

【问题标题】：Looping through json object nested properties and displaying them if not null - vue [duplicate]循环遍历json对象嵌套属性并在不为空时显示它们-vue [重复]
【发布时间】：2021-07-14 16:01:03
【问题描述】：

需要通过一个 JSON 对象，该对象可能有也可能没有“属性”字段，它可以为空，或者它可以有 10 个不同的，你不知道它们实际上叫什么，然后我需要将它打印在代码块，JSON数据在这里：

{
  "alias": "AS",
  "id": "4a4e1584-b0a7-4069-8851-0ee7f9e18267",
  "name": "asdfadf",
  "properties": {
    "shape": null,
    "units": "gms",
    "dimension": null,
    "maxWeight": "sdf",
    "minWeight": "asfd"
  },
}

输出需要是一个字符串，例如 Units: gms, MaxWeight: sdf... 或者这些可以是 'size' 或其他人在额外属性中指定的任何内容，但它们将在属性下。

【问题讨论】：

标签： javascript json object

【解决方案1】：

有几种方法可以实现这一点，基本上您可以使用Object.keys() 遍历properties' 属性，访问这些值，然后将它们组合成一个字符串，如下所示：

const data = {
  "alias": "AS",
  "id": "4a4e1584-b0a7-4069-8851-0ee7f9e18267",
  "name": "asdfadf",
  "properties": {
    "shape": null,
    "units": "gms",
    "dimension": null,
    "maxWeight": "sdf",
    "minWeight": "asfd"
  },
};

function propertiesToString(data) {
  return Object.keys(data).map((key) => key + ':' + data[key]).join(', ')
}

console.log(propertiesToString(data.properties));

【讨论】：

那不起作用我不知道为什么，特别是在我的例子中，它在这里起作用，无论如何我都有答案，但感谢您的贡献！

【解决方案2】：

如果我正确理解您的问题，如果properties 不为空，您需要查看对象内部的properties。

你只需要检查它是否不为空并循环遍历它。

let j = {
            "alias": "AS",
            "id": "4a4e1584-b0a7-4069-8851-0ee7f9e18267",
            "name": "asdfadf",
            "properties": {
                "shape": null,
                "units": "gms",
                "dimension": null,
                "maxWeight": "sdf",
                "minWeight": "asfd"
            },
}

if(j.properties !== null){
    for(let key in j.properties){
        console.log(` ${key} : ${j.properties[key]}`)
    }
}

如果您在 Vue 中需要帮助，您也可以将其包含在您的问题中，这样我们就可以准确地看到您想要做什么。

【讨论】：

谢谢，不知何故只对第一个属性起作用，不知道为什么我知道它在这里起作用，无论如何我得到了答案，我想谢谢！

【解决方案3】：

这是一个使用Object.entries() 和一些Array 原型方法来过滤掉nulls 并正确字符串化结果的解决方案。

var obj = JSON.parse('{"alias":"AS","id":"4a4e1584-b0a7-4069-8851-0ee7f9e18267","name":"asdfadf","properties":{"shape":null,"units":"gms","dimension":null,"maxWeight":"sdf","minWeight":"asfd"}}');

function getPropertyString(obj) {
  return Object.entries(obj)
  .filter(el => el[1] != null)
  .map(el => el.join(': '))
  .join(', ');
}
  
console.log(getPropertyString(obj.properties));

一步一步：

Object.entries(obj) – 返回一个数组数组，结构为：
[[key1, value1], [key2, value2], ... , [keyN, valueN]]
Array.prototype.filter(func) – 返回数组的副本，其中包含从提供的回调中返回 true 的所有元素
- 在这种情况下，从entries 中过滤掉所有具有null 值的数组
Array.prototype.map(func) – 使用提供的回调转换每个元素后返回数组的副本
- 在这种情况下，将所有[key, value] 数组转换为格式为"key: value" 的字符串
Array.prototype.join(str) – 返回一个表示数组的字符串，每个元素由提供的字符串连接
- 将"key: value" 字符串相互连接，", " 介于两者之间

【讨论】：