The technique for accessing nested key-value pairs in a JSON object within an Angular application

After receiving the response from the backend, I have retrieved a nested hash map structure where one hash map is nested within another:

hmap.put(l,hmaps); //hmap within hmap

When returning the response to the frontend, I am using the ResponseEntity method to send back the data in the following format:

The structure of the response obtained from the Backend is as follows:

In this structure, 'email1' and 'email2' act as keys for a main hash map, with their corresponding subparts being key-value pairs within the nested hash map.

responsive: {email2: {,…},…}
 email1: {sub3: "Hi Subpart 3", sub4: "Hi Subpart 4",…}
  sub1: "Hi subpart 1"
  sub2: "Hi subpart 2"
  sub3: "Hi Subpart 3"
  sub4: "Hi subpart 4"
 email2: {,…}
  sub7: "Hi Subpart 7"
  sub8: "Hi Subpart 8"

To access 'email1' and 'email2' in my code, I have utilized the following approach:

 Object.keys(emails.responsive).forEach(e => {
          let ref = this.dialog.open(emaildialog, {    
             data: emails.responsive[e],
             width: "600px",
             height: "600px",

            } 
          );

        });

However, I am currently facing difficulties in accessing the individual subparts of each Email type.

javascriptangulartypescriptfor-loop

Answer №1

If you have structured data like this: 

 messages = {
  message1: {
    part1: "Hello part 1",
    part2: "Hello part 2",
    part3: "Hello Part 3",
    part4: "Hello part 4",
  },
  message2: {
    part5: "Hello part 5",
    part6: "Hello part 6",
    part7: "Hello Part 7",
    part8: "Hello part 8",
  }
}

You can access each part of every message by doing the following:

Object.keys(messages).forEach(m => {
  Object.keys(messages[m]).forEach(item => {
    console.log(messages[m][item]);
  })
})

Answer №2

when dealing with the given JSON structure or nested JSON:

    Obj : {
      email1: {
        sub1: "Hi subpart 1",
        sub2: "Hi subpart 2",
        sub3: "Hi Subpart 3",
        sub4: "Hi subpart 4",
      },
      email2: {
        sub5: "Hi subpart 5",
        sub6: "Hi subpart 6",
        sub7: "Hi Subpart 7",
        sub8: "Hi subpart 8",
      }
    }

or

    Obj : {
      email1: {
        sub1: "Hi subpart 1",
        sub2: "Hi subpart 2",
        sub3: "Hi Subpart 3",
        sub4: {
            sub41: "Hi Subpart 4",
            sub42: "Hi Subpart 42"
        },
      },
      email2: {
        sub5: "Hi subpart 5",
        sub6: "Hi subpart 6",
        sub7: "Hi Subpart 7",
        sub8: "Hi subpart 8",
      }
    }

explore the following:

  function getObjectKeyValue(obj, key) {
      if (typeof(obj) === "string")
        console.log(key + " " + obj);

      else for (key in obj)
        getObjectKeyValue(obj[key], key)
    }

getObjectKeyValue(Obj)

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

Guide to integrating numerous product filters for an ECommerce platform using Spring Boot, JavaScript, Ajax, and MySql

Currently, I am developing an E-Commerce Web App using Spring Boot which includes a feature to add multiple product filters. The user can select checkboxes corresponding to their preferences for filtering or searching products from the store. However, I am ...

javascriptjqueryajaxspring-boote-commerce

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

javascripthtmlhtml-table

Using DraftJS to swap text while preserving formatting

Currently, I am implementing Draftjs with draft-js-plugins-editor and utilizing two plugins: draft-js-mathjax-plugin and draft-js-mention-plugin My goal is to replace all mentions with their corresponding values when the user uses '@' to mention ...

javascriptreactjsdraftjsdraft-js-plugins

1. Catalog of dual JSON inquiries2. Compilation of

I am struggling to understand the right way to proceed. When I run this query, I receive a JSON response containing file names: $.getJSON("http://api.server.com/my/?callback=?", function(data){ var results = []; $.each(data['resul ...

javascriptjsonparsing

Exporting variables in node.js allows you to share data between different

Hi, I'm currently working with a file that looks like this: module.exports = { some variables that are being exported here, execute(message) { } } I want to export the message parameter to another file. I've attempted using var msg ...

javascriptnode.js

Using ng-mouseover along with ng-if and an animated class causes issues

Whenever I hover over a link, it triggers a change in a variable value which then displays a <p> tag using ng-if. The code snippet looks like this: <div class="position text-center" ng-mouseover="social=1" ng-mouseleave="social=-1"> &l ...

javascriptangularjsanimate.css

The code functions properly on React Webpack when running on localhost, however, it fails to work once deployed to AWS Amplify

As I work on my React.js app, I encountered an issue with hosting pdf files on Amplify. While everything runs smoothly on localhost/3000, allowing me to access and view the pdf files as desired either in a new tab or embedded with html, the same cannot be ...

javascripthtmlnode.jsreactjsaws-amplify

Angular6 Error: Property 'catch' is missing

I am new to Angular and have a basic understanding of it. I am interested in learning how to use HttpClient to create a JSON file instead of relying on a real server. I have set up a service and imported HttpClient: service.ts import { Injectable } from ...

node.jsangular

The mousedown event handler in Three.js disrupts the focus on the input field

Here is a line of code in threejs: document.addEventListener('mousedown', onDocumentMouseDown, false); This particular code snippet causes the input field to lose focus when clicked. This can be problematic, for instance, when there is a canva ...

javascriptjquerythree.js

Placing options and a clickable element within a collapsible navigation bar

Within my angular project, there are 4 input fields where users need to enter information, along with a button labeled Set All which will populate them. https://i.sstatic.net/1GGh1.png I am wondering how I can organize these input fields and the button i ...

javascripthtmlangulartypescriptbutton

Implementing custom styles in JavaScript according to the specific browser or platform

When it comes to adding multiple css styles to a dom element and ensuring compatibility across different browsers, which approach is more optimal for performance? Combining all prefixed css properties together, allowing the browser to decide which one ...

javascripthtmlcsscross-browser

Sending a JSON stringified JavaScript object to a server: A step-by-step guide

I am currently working with VB.Net and MVC 5. In my project, I have an object that I created using javaScript: var myEdits = { listOfIDs: [], listOfValues : [] }; My goal is to send this object to the controller an ...

javascriptjsonasp.net-mvcvb.net

Troubleshooting Vue Unit Tests: Issue with Setting Input Values

I am currently utilizing Vue with typescript and making an effort to perform a unit test on the input value for a login page. The issue lies in the fact that after setting the input value, it does not return as expected – instead, it comes back empty ("" ...

typescriptvue.jsunit-testing

How can the label value be updated in a material ui slider component?

code snippet: https://codesandbox.io/s/runtime-worker-kxse3?file=/src/App.js Can anyone help me ensure that the labels in the bubble display the same values as the text (3, 5, 7, 10)? ...

javascriptreactjsmaterial-ui

Creating an object based on its type in JavaScript is a simple task

In a recent project, I found myself using the following code: function foo(type, desc) { var p = new type(desc); } Although I am not a JavaScript expert, it seems to be functioning properly in Chrome. Can anyone confirm if this is valid JavaScript? Th ...

javascriptoop

Issue TS1112: It is not possible to declare a class member as optional

I'm currently working on creating a movie catalog using Angular and Ionic. Within the Movie class, I have properties for id, title, image, and plot. On the initial page of the app, only the id, title, and image are displayed, while the plot is omitte ...

javascriptangularjsclasstypescript

Importing modules from another module in Node.js

I'm currently working on a nodejs app that consists of two files, index.js and ping.js. The main functionality is in index.js which handles routing and other tasks, while ping.js utilizes phantomJS. In my index.js file, I have the following line of co ...

javascriptnode.jsexpressnpmphantomjs

Tips for removing all elements from an array using jQuery

let values=[]; values.push(data); I have decided to use an array to keep track of my data, and then send it via ajax. The first submission goes smoothly. However, on subsequent submissions, null values are also sent along with the actual data to the serv ...

javascriptjqueryajax

I am attempting to create a form in NodeJs to search for a user in MongoDB by their telephone number using query routing. However, I am puzzled as to why this is not functioning properly

Can you identify the issue in this code? I am able to retrieve the correct mobile number on the console, but it is not being passed to the query routing on /search_user?mob. <input type="tel" name="message" id="mobile_input&qu ...

javascripthtmlnode.jsexpressejs

Getting the parent from a child in Typescript: Best Practices

Querying: In TypeScript, is it possible to retrieve a parent instance from a child instance? I am aware that casting a child into its parent is a method, however, the child's additional properties still exist in the parent, albeit concealed. Check o ...

typescriptoopinheritanceparent-child