{"data":
{"characters":[
{"name":["Harry Potter"],"age":["18"],"gender":["Male"]},
{"name":["Hermione Granger"],"age":["18"],"gender":["Female"]}
]}
}
In the given JSON data, I am interested in retrieving the keys like name, age, gender for each character.
Can you provide guidance on how to achieve this?
One method I frequently use is Object.keys, a built-in feature of JavaScript Objects. This function returns an array containing the keys of a specified object. For more information, you can refer to the MDN documentation.
const user = {
username: "exampleUser",
email: "example@example.com",
role: "user"
}
console.log(Object.keys(user))Give this a shot
let person = {firstName: "Sarah", lastName: "Smith", age: 30};
let properties = [];
for(let prop in person) {
properties.push(prop);
}
The properties array will contain the keys ["firstName", "lastName", "age"]
let data = {"info":
{"people":[
{"name":["John Doe"],"age":["25"],"gender":["Male"]},
{"name":["Jane Smith"],"age":["30"],"gender":["Female"]},
]}
}
let attributes = [];
for(let i = 0;i<data.info.people.length;i++)
{
Object.keys(data.info.people[i]).forEach(function(attribute){
if(attributes.indexOf(attribute) == -1)
{
attributes.push(attribute);
}
});
}
console.log(attributes);
Today's JavaScript tip: ES6 Edition
const getAllKeysFromJSON = data => (
data.reduce((keys, obj) => (
keys.concat(Object.keys(obj).filter(key => (
keys.indexOf(key) === -1))
)
), [])
)
You can also condense it into a single long line like this:
const getAllKeysFromJSON = data => data.reduce((keys, obj) => keys.concat(Object.keys(obj).filter(key => keys.indexOf(key) === -1)), [])
Update: This function will retrieve all top-level keys from an array of objects
In order to retrieve a list of ALL the keys (also known as key names) within a JSON object, including keys nested within other key/value pairs, the following function can be utilized:
function get_all_json_keys(json_object, ret_array = []) {
for (json_key in json_object) {
if (typeof(json_object[json_key]) === 'object' && !Array.isArray(json_object[json_key])) {
ret_array.push(json_key);
get_all_json_keys(json_object[json_key], ret_array);
} else if (Array.isArray(json_object[json_key])) {
ret_array.push(json_key);
first_element = json_object[json_key][0];
if (typeof(first_element) === 'object') {
get_all_json_keys(first_element, ret_array);
}
} else {
ret_array.push(json_key);
}
}
return ret_array
}
When applying this function to the original OP's object shown below
const op_object =
{
"document":{
"people":[
{
"name":[
"Harry Potter"
],
"age":[
"18"
],
"gender":[
"Male"
]
},
{
"name":[
"hermione granger"
],
"age"[
"18"
],
"gender":[
"Female"
]
}
]
}
}
var all_keys = [];
function get_all_json_keys(json_object, ret_array = []) {
// Function Code Here
}
get_all_json_keys(op_object, all_keys);
console.log(all_keys);
The expected output will be
[ 'document', 'people', 'name', 'age', 'gender' ]Please note: This output contains a unique collection of all key names present in the JSON object.
let personData = { Name: "Ricardo Vasquez", age: "46", Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="db89b2b8b0a2a8b4bdaf9bbcb6bab2b7f5b8b4b6">[email protected]</a>" };
for (property in personData) {
console.log(property +" => "+ personData[property]);
alert(property +" => "+ personData[property]);
}
One important step is to properly "interpret" our jsonObject
console.log('{"key0":"value0", "key1":"value1"}');
var jsonObject = JSON.parse('{"key0":"value0", "key1":"value1"}')
Object.keys(jsonObject).forEach(key => {
console.log(jsonObject[key]); //values
console.log(key); //keys
})
I'm struggling with my Knockout and SignalR implementation as a beginner. Although I can display JSON data in a debug element by databinding it to dashboard, I encounter undefined errors when trying more complex databinding. For example, the code sni ...
I have a link that calls an action named UserSettingsTabsStructure: @Ajax.ActionLink(User.Identity.Name,"UserSettingsTabsStructure","Account", new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "contentDynamic", OnComplete = "loadDialogSettings" } ...
How can I effectively test the get function in Jest, specifically by mocking Promise rejection in localForage.getItem to test the catch block? async get<T>(key: string): Promise<T | null> { if (!key) { return Promise.reject(new Error(&apo ...
OBJECTIVE I aim to restrict the user from scrolling while the page is loading. ISSUE The snippet of code provided successfully prevents the user from scrolling during the additional 2 seconds of the loader animation: $('body').toggleClass(&ap ...
I recently set up a Heroku server with BootBot running on it, but I'm facing challenges while trying to render an HTML page from it. Here is what I have in my code: var app = express(); var path = require('path'); app.use(express.static(pat ...
Hello, I am encountering an issue with my Laravel application that displays posts and comments. The problem lies with the Vue v-model in the input text when using the @foreach directive in Blade. Each post is showing the comments input box, but when I ente ...
I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...
Here's a Flask application that showcases a list of objects. from flask import * app = Flask(__name__) class Entry: def __init__(self, name, surname): self.name = name self.surname = surname entries = [] entries.append(Entr ...
I am currently working on developing a tic-tac-toe game and looking to store user data in a database. However, I am facing an issue with the router I intended to use for this purpose as it is returning an 'Internal server error message (500)'. B ...
Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...
Whenever a user clicks on a hyperlink, my goal is to locate the nearest span element with a specific class and retrieve the text within that class. As of now, it is only returning blank text: Here is the provided HTML code snippet: <div class="plan re ...
In my React application, I have a component that receives HTML content as a string field in the props from an API call. My objectives are: To render this HTML content with styles applied. To parse the content and detect "accept-comments" tags within sec ...
Encountering a minor issue with my javascript code. Following a tutorial for a seemingly simple task: link What I did: Adapted the HTML from the tutorial to fit my desired visual outcome while maintaining correct class and id attributes. Utilized identic ...
I am looking to simulate the pressing of the enter key in a text field when a page is loaded. Essentially, I want the text field to automatically trigger the enter key press event as if it had been pressed on the keyboard by the user. Below is an example o ...
I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...
Extracting a value from a parameter looks like the following: { "Line1":"Nav Place Road", "Line2":"Nyork City", "Line3":"USA 34576" } The desired display format is as follows: ColumnName Value --------------------------- Line1 Nav Place Road Line ...
I am encountering an issue with our website deployment on GKE, which consists of 10 pods. When deploying a new version, we use MAXsurge=1 and MAXunavailable=0. Upon trying to access the website during a new deployment, I sometimes only see the header in t ...
Developing a Chrome Extension that utilizes a click-to-call API, I have encountered an issue where certain pages are displaying unusual behavior. After investigating, I have identified this specific code snippet as the source of the problem. var rxpCtc = n ...
There seems to be an issue with adding padding to the results id div box. The padding is causing a blank yellow box to appear at the bottom before any results are submitted. I've tried to hide this box without success by adding a displayResult() funct ...
I have two derived classes that inherit from an abstract base class public class Class1 : MainBaseClass { public int attribute1 {get; set;} public int attribute2 {get; set;} } public class Class2 : MainBaseClass { public int attributex {get; set ...