Struggling to extract specific information from a json array using Angular, my current approach is only retrieving a portion of the required data

My JSON structure is as shown in the image below: https://i.stack.imgur.com/5M6aC.png

This is my current approach:

createUIListElements(){
    xml2js.parseString(this.xml, (err, result) => {
      console.log(result);
      this.uiListElement = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement'][0]['UIElement'];
      console.log(this.uiListElement);
      this.uiListElementArray = this.uiListElement.map((element: { $: any;}) => element);
      this.uiListElementArray.forEach((element: any) => {
        console.log(element);
      })
    })

  }

Currently, it only retrieves the data for UIListElement. I am seeking assistance on how to display all the UIElement data from both UIListElement when using console.log(element).

jsonangulartypescript

Answer №1

To proceed, kindly share the array with me. After analyzing the provided image, I have formulated the following logic:


constructUIList(){
    xml2js.parseString(this.xml, (error, result) => {
      console.log(result);
      this.uiList = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement'][0]['UIElement'];
      console.log(this.uiList);
      this.uiListArray = this.uiList.map((element: { $: any;}) => element);
      this.uiListArray.forEach((element: any) => {
        console.log(element);
        element.UIElement.forEach((elem: any) => {
           console.log(elem)
        })
      })
    })

  }

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

Can a type name be converted into a string representation for use as a template literal type?

Is there a way to retrieve the string representation of a type name in order to return a more concise compile error message from a type function? I came across this solution (unfortunately, the article does not have anchor links so you will need to search ...

typescripttypescript-generics

main.js:1 ERROR TypeError: Unable to access property 'querySelectorAll' of null

I am currently using Chartist in conjunction with Angular to generate charts. However, I am encountering a problem where the charts do not display when the server is running, and an error appears on the console. Strangely enough, refreshing the page caus ...

javascriptangularchartist.js

Angular unable to send object to HTML page

Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This speci ...

javascriptangulartypescriptrxjs

Utilizing AWS CDK to Define StackProps Input Variables

Recently, I have started using the AWS CDK and encountered a challenge. I want to allow end users to define custom input variables when using my AWS CDK without having to edit the entire code. While I have been able to work with standard types such as stri ...

typescriptamazon-web-servicesaws-cdk

PostgreSQL's JSON column in Rails is failing to accept values and is instead returning nil after storage

I need help simplifying the initial question. I am struggling to convert a nested hash object into a format that can be stored in a PostgreSQL database using ActiveRecord. I attempted to use the "nested-hstore" gem without success and also tried serializin ...

ruby-on-railsjsonrubypostgresqlhash

Creating a functional component in React using TypeScript with an explicit function return type

const App: FC = () => { const addItem = () => { useState([...items, {id:1,name:'something']) } return <div>hello</div> } The linter is showing an error in my App.tsx file. warning There is a missing return type ...

javascriptreactjstypescript

Data has not been loaded into the Angular NGX Datatable

As a beginner in Angular, I am struggling to set data from the module. ngOnInit() { this.populate(); } public populate() { this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => { this. ...

angulartypescriptngx-datatable

The Power of Json, Ajax, and Javascript

Is there a way to regularly check for updates and update the relevant cell accordingly? I want the updated cell to flash and change color to red/green based on if it is a negative or positive numeric value. I will be using JQuery, Ajax, and JSON... Best ...

javascriptajaxjsondynamic

Combining Key and Value into a Single String in Pyspark Json Column

I am currently working with a dataframe containing 2 string columns and another column structured as an array: -- music: string (nullable = true) |-- artist: string (nullable = true) |-- details: array (nullable = false) | |-- element: struct (containsN ...

jsonapache-sparkpyspark

Cease monitoring for operations within NGRX

One challenge I am facing is related to common components that dispatch actions. Take "Status Selection" for example, a component used in various modules of my application. In each module, there are effects triggered by this action. However, the issue ari ...

angularreduxrxjsngrx

Top method for verifying input during keyup or blur events

When it comes to validating user inputs, I often find myself wondering about the best approach to take. In this case, I have created a regex for numbers with decimal points. .ts part checkIsNumber(event) { console.log('event', event.target. ...

javascriptangular

Using jq: how can we tailor the atomize function to suit a high-volume streaming scenario?

I am facing a challenge with a massive file that has the following structure: { "users": { ... }, ... "stats": { "daily": { "k1": { ... }, "k2": { ... }, ... "kN": { ... } }, "monthly": { "p1": { ... }, ...

jsonstreamingjq

Aggregate the data chunks in the antd table into groups

I've been struggling to find a solution for this specific issue. My goal is to group the data in my table based on a particular field, but I need it to be styled as depicted in the image linked below. https://i.stack.imgur.com/OsR7J.png After looking ...

reactjstypescriptantd

Discovering duplicate values in a JSON object using JavaScript (JQuery)

Below is a JSON object that contains information about various materials: [ { "idMaterial": "Alloy 450 (15Cr6Ni1.5Cu)_S45000", "tipoMaterial": "Alloy 450 (15Cr6Ni1.5Cu)", "uns": "S45000", "temperatura": "NL", "p ...

javascriptjqueryjson

Obtain various attributes from AWS CloudTrail JSON data with jq

I am struggling to extract specific fields from the following JSON data retrieved from AWS CloudTrail. The fields I am trying to extract are: userIdentity.userName eventTime awsRegion sourceIPAddress responseElements.ConsoleLogin eventID Here is the JSON ...

jsonjq

Having issues with importing momentjs by reference in TypeScript with amd configuration

I'm puzzled by the difference in behavior between these two snippets: import * as moment from "../Typings/moment"; One works, while this one doesn't: /// <reference path="../Typings/moment.d.ts" /> import * as moment from "moment"; It t ...

javascriptvisual-studiotypescriptmomentjsamd

What is the best method for sending a JSON array to the server from the client side?

Utilizing jQuery, I have created a JSON array and now I am looking to send this data from the client side to the server/backend through a modal window. Upon clicking "Save Changes" on the modal window, my goal is to transmit the var data = $(this).serial ...

javascriptjqueryjson

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

htmlangularspringtypescript

Revitalize metamorphosis of array

Below is a JSON input: { "id": 1031435, "event_id": "Formula_257", "formula_id": 257, "ts_start": 1583164200084000, "ts_end": 1583164484960000, "type": "formula", "details": { "6aa0734f-6d6a-4b95-8a2b-2dde346f9df7": { "PowerActiv ...

jsonjolt

Tips on identifying elements from 2 ArrayLists merged into a single ArrayList and using a ListViewAdapter

Apologies for the complex Title (it's hard to summarize my issue in a few words) Here is my current situation: I am working on an app that collects Stamps. I have a JSON file that contains 2 JSONArrays for "collectedStamp" and "unCollectedStamp". Th ...

androidjsonandroid-listviewarraylistandroid-json