You can get the keys of each object inside an array of objects in many ways. In this article, we will cover two methods.
Methods to get the keys of each object
- Using Object.keys() and Object.assign()
- Using Array.flatMap() and Object.keys()
Method 1: Using Object.keys() and Object.assign()
Object.keys() – Object.keys() is a javascript method that returns an array of the enumerable property names of the given object. In other words, it extracts the keys of an object and returns them as an array. The order of the keys in the array is determined by the order in which they are defined in the object.
Object.assign() – Object.assign() is a method in JavaScript used to copy the values of all enumerable properties from one or more source objects to a target object. It returns the modified target object.
let obj = [{"a": 1}, {"b" : 2}, {"c" : 3}];
let result = Object.keys(Object.assign(
{},
...obj
));
console.log(result);
The Output of the above code will be
(3) ["a", "b", "c"]
0:"a"
1:"b"
2:"c"
[[Prototype]]:[]
Method 2: Using Array.flatMap() and Object.keys()
Array.flatMap() – Array.flatMap() is a method in JavaScript that both maps and flattens an array. It applies a provided mapping function to each array element and then flattens the result into a new array.
let obj = [{"a": 1}, {"b" : 2}, {"c" : 3}];
let result = obj.flatMap(Object.keys);
console.log(result);
The Output of the above code will be
(3) ["a", "b", "c"]
0:"a"
1:"b"
2:"c"
[[Prototype]]:[]
Similar Reads
- Vibe Coding: The Future of Programming Might Not Be CodeProgramming used to be all about typing lines of code, fixing syntax errors, and wrestling with documentation. But what if coding could feel more like… Read more: Vibe Coding: The Future of Programming Might Not Be Code
- Spinner Tick Mark Pop Up EffectIn this article, we’ll create a smooth Spinner to Tick Mark animation using HTML, CSS, and a touch of JavaScript. This interactive effect is perfect… Read more: Spinner Tick Mark Pop Up Effect
- TileLang: Streamlining AI Kernel Programming Like Never BeforeWhen you’re building AI systems that need to run fast, every nanosecond counts. The trickiest part? Programming the kernels—those low-level routines that sit at the… Read more: TileLang: Streamlining AI Kernel Programming Like Never Before
- AlphaEvolve: AI Designing Algorithms Beyond Human ExpertiseImagine an AI that doesn’t just follow instructions—it writes the playbook. Not one built on rules we give it, but one it builds itself from… Read more: AlphaEvolve: AI Designing Algorithms Beyond Human Expertise
- Pure CSS Magic: Glowing Rainbow Text AnimationIn this article, we’ll create a mesmerizing Rainbow Text Animation using only HTML and CSS. This vibrant gradient effect adds a playful, attention-grabbing visual to… Read more: Pure CSS Magic: Glowing Rainbow Text Animation