如何从 JSON API 调用迭代子对象答案

【问题标题】：How to iterate through child objects from JSON API call如何从 JSON API 调用迭代子对象
【发布时间】：2020-06-05 05:40:06
【问题描述】：

我是初学者，试图从我的 API 调用中迭代子对象以从键值对中获取键。因此，从下面的状态示例中，我希望能够打印“id”、“name”和“email”（并最终使用这些来填充 ReactTable 中的“headers”和“accessors”以自动生成我的列。这个现在可能超出了我的问题范围）。

state = {
data: [
       {"id": 1, 
        "name": "John", 
        "email": "john@test.com"
       },
       {"id": 2, 
        "name": "Alex", 
        "email": "alex@test.com"
       },
       {"id": 3, 
        "name": "Sam", 
        "email": "sam@test.com"
       },
       {"id": 4, 
        "name": "Jess", 
        "email": "Jess@test.com"
       }
]
}

我所有对象的键都是相同的（例如 ID、姓名、电子邮件）。但是，我只能获取数据中每个子对象的父键。在我的例子中，父键恰好是我数组中对象的索引值。所以对于上面显示的 4 个对象，我的 console.log 输出将只是一个 ["0", "1", "2", "3"] 的数组，因为有 4 个对象。相反，我想获得 ["id", "name", "email"]。我的代码如下。我愿意添加另一个嵌套循环来访问子组件，但无论我做什么都会破坏代码。

getKeys = () => {
        var keysArr = []
        var i;
        for (i = 0; i < 1; i++) { // i < 1 because I only need to access the keys from a single object
            keysArr.push(Object.keys(this.props.data.children)); // The '.children' breaks my code but it is to show that I would like to access the child objects          
        }
        console.log(keysArr)
    }

任何帮助编辑我的代码或建议一种新方法将不胜感激！

【问题讨论】：

标签： javascript arrays json reactjs key

【解决方案1】：

你不需要 for 循环。只需更改您的：

keysArr.push(Object.keys(this.props.data.children));

到

keysArr.push(Object.keys(this.props.data[0]));

您只能使用以下方法直接访问密钥：

keysArr = Object.keys(this.props.data[0])

你的函数应该是这样的：

var state = {
data: [
       {"id": 1, 
        "name": "John", 
        "email": "john@test.com"
       },
       {"id": 2, 
        "name": "Alex", 
        "email": "alex@test.com"
       },
       {"id": 3, 
        "name": "Sam", 
        "email": "sam@test.com"
       },
       {"id": 4, 
        "name": "Jess", 
        "email": "Jess@test.com"
       }
]
}
getKeys = () => {
        var keysArr = []
        var i;
        keysArr=Object.keys(state.data[0]);       
        console.log(keysArr)
    }
    
getKeys();

【讨论】：

感谢您的帮助。这似乎是工作。但是，我遇到了一个不寻常的怪癖。由于我从 API 调用中获取数据，因此我将“数据”初始化为一个空数组。当我这样做并使用您显示的代码时，我似乎得到“未捕获的类型错误：无法将未定义或空值转换为对象”。但是，如果我用一些预定义的数据初始化数据数组（就像在我的原始帖子中一样），然后执行 API 调用来覆盖数据，它似乎工作得很好。我怀疑在数组中有任何数据之前调用了 getKeys() 函数。有什么解决办法吗？
嗨@purelife，您可以寻找触发 getKeys() 的事件，然后仅在实际存在 prop 对象时调用它。就像添加一个 if(this.prop && this.prop.data) 或类似的东西。

【解决方案2】：

这样的事情怎么样？

const yourSet = new Set();
data.forEach(obj => Object.keys(obj).forEach(k => yourSet.add(k)))

这将遍历数组中的每个键。因此，如果对象是数组不同的所有键将被拾取。

【讨论】：