Issue involving retrieving keys from multiple classes in a JSON object

I am facing some difficulties with JSON and JavaScript as I am a beginner in this area. Currently, I am attempting to iterate through all the keys["name"] of this JSON data.

var l = [{
 "pages": [
  {
   "name": "Scan",
   "elements": [
    {
     "type": "radiogroup",
     "name": "Gender",
     "title": "Gender",
     "choices": [
      "Male",
      "Female"
     ]
    },
    {
     "type": "text",
     "name": "Name",
     "title": "Name"
    },
    {
     "type": "text",
     "name": "Age",
     "inputType": "number"
    },
    {
     "type": "text",
     "name": "E-mail",
     "title": "E-mail",
     "validators": [
      {
       "type": "email"
      }
     ],
     "inputType": "email"
    }
   ]
  },
  {
   "name": "Q",
   "elements": [
    {
     "type": "radiogroup",
     "name": "What Country Food you like?",
     "choices": [
      "Thailand",
      "Japan",
      "Italy"
     ],
     "colCount": 3
    },
    {
     "type": "text",
     "name": "What is your favorite food",
     "visibleIf": "{What Country Food you like?} notempty"
    }
   ]
  }
 ]
}];

I have been trying to achieve this using the following code snippet:

l.forEach(function(element) {
    console.log(element);       
});

However, I am only seeing 2 arrays in the console.log output:

0: Array[name:"Scan", element:Array(4)}
1: Array[name:"Q", element:Array(2)}

I am hoping to get the keys["name"] to appear as follows:

(Scan, Name, Age, Gender, E-mail, "What Country Food you like?", "What is your favorite food")

Answer №1

I have found the solution on my own. Grateful for everyone's support.

l[0].pages[0].elements[0];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The value of the checked input with the name `nameofinput` is currently not defined

I'm having trouble passing the input value to another page. $( this ).attr( "href", '?module=module_progress_report&Subject='+ $('input[name=subject]:checked').val()+ '&Centre_Selected_ID='+ encodeURIComponen ...

Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question. I am looking to create a layout where the center content stretches out to cover the entire visi ...

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

Sending basic HTML from Express.jsSending simple HTML content from an Express.js

Within my index.html document, I have the following: <input name='qwe'> {{qwe}} I am looking to send {{qwe}} in its literal form, without it being replaced by server-populated variables. How can I achieve this? My initial thought was to ...

I am attempting to display text in the input box on the console, but unfortunately, I am not seeing any changes in the console when typing

I have this code, but I am not getting any output when I run it: import { restaurantList } from "../config"; import { RestrauntCard } from "./Restraunt"; const Body = () => { const searchText = "KFC"; return ( <& ...

Utilizing state in React for CRUD operations is a fundamental practice

Currently, I am developing a React application using altjs as my Flux implementation. I have encountered an issue where when attempting to create or delete an item from the front end, regardless of the parameter passed to the function, the entire state is ...

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

In order to properly execute the JavaScript code, it is essential to create a highly customized HTML layout from the ER

I am currently utilizing this resource to create a gallery of images on my Rails page. Here is the HTML code required to display the images: <a href="assets/gallery/ave.jpg" title="Ave" data-gallery> <img src="assets/gallery/ave_tb.jpg" alt="Av ...

What is the best way to describe a JSON data format?

I'm attempting to achieve something similar to this, even though I know it's not feasible: using JSON<object> = Dictionary<string, object>; Is there a way for me to write code that accomplishes what I illustrated in the example above ...

connecting parameters to functions in javascript

I'm attempting to execute a second query once the first query has been resolved by using the following code: const task1 = nextQuery => $.get('1.json', data => nextQuery()); const task2 = nextQuery => $.get('2.json', ...

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

Implementing Vue plugins in your Store: A step-by-step guide

Looking for the proper way to integrate a plugin within a Vuex module or plain JS module. Currently using an event bus but unsure if it's the best approach. Any guidance would be appreciated. Plugin1.plugin.js: const Plugin1 = { install(Vue, optio ...

Using jQuery to Organize JSON Tables

I'm in a bit of a bind... I'm in need of sorting tables from a list of formulas. I've extracted 3 parameters from JSON files and created formulas, but now I need to sort this list of formulas. JSON files: <body> <script> $ ...

The addition of one hour to the date time format increases the total time

Currently, I am retrieving a datetime column value from a database table as 2015-03-04 21:00:00 UTC. When attempting to convert this format into a datetime picker, the following code is used: date = moment($("#event_start").val()); // date time value fro ...

I am curious as to how this function is aware of the specific attribute that is being passed

I've been experimenting with a little application that fetches a list of movies from an API. You input a word and it returns all movies with that word in the title. Here's the code responsible for fetching the list: var getMovies = function (que ...

Having trouble running the script, chrome error with message passing?

I've hit a roadblock while working on my Chrome extension and could use some assistance. The main issue I'm facing is getting the script to run when activated by the user through an on/off switch in the popup window. It seems like there might be ...

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

There seems to be an issue with loading data for the grid from the JSON

I need some help with creating a fiddle that loads data from a json file. I'm not sure why the data is not loading properly. You can view my fiddle here: Fiddle This is my code for the data store: Ext.create('Ext.data.Store', { storeI ...

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...