Как перебирать дочерние объекты из JSON вызова API

Question

Я начинающий, пытаюсь перебрать дочерние объекты из моего вызова API, чтобы получить ключи из пар ключ-значение. Поэтому из приведенного ниже примера состояния я хотел бы иметь возможность печатать «id», «name» и «email» (и в конечном итоге использовать их для заполнения «headers» и «accessors» в ReactTable для автоматической генерации моих столбцов. может быть за рамками моего вопроса на данный момент).

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"
       }
]
}

Ключи для всех моих объектов одинаковы (например, идентификатор, имя, адрес электронной почты). Однако я могу получить только родительский ключ каждого из дочерних объектов в данных. В моем случае родительские ключи просто являются индексными значениями объектов в моем массиве. Таким образом, для 4 объектов, как показано выше, мой вывод console.log будет просто массивом ["0", "1", "2", "3"], поскольку имеется 4 объекта. Вместо этого я хотел бы получить ["id", "name", "email"]. Мой код ниже. Я готов добавить еще один вложенный l oop для доступа к дочерним компонентам, но все, что я делаю, нарушает код.

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)
    }

Любая помощь в редактировании моего кода или предложении нового метода будет принята с благодарностью!

Answer 1

вам не нужно для l oop. Просто измените:

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

Answer 2

Как насчет этого?

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

Это будет l oop через каждый ключ в вашем массиве. Итак, если объекты массива различны, все ключи будут подобраны.