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).

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

Issue with asmx Web Service causing failure to return JSON data when using FineUploader for file uploads

I acknowledge that there are numerous questions similar to mine regarding this issue, but none of them have provided a solution for me. I understand that web services inherently convert my objects into json as part of the framework. I manually set the requ ...

Examining interconnected services' dependencies

Looking to test out AService, which has dependencies on BService and CService. The dependency chain looks like this: AService --> BService --> CService The constructor for AService is as follows: constructor( private bService: BService ) {} The const ...

Utilizing various filters and sorting options on API response within Angular 8

Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...

Issue encountered with connecting to development server on Expo iOS simulator that is not present when using a browser

During the development of a chat application with React Native Expo, I encountered an issue when running "expo start" in my typical workflow. The error message displayed was "could not connect to development server." If anyone has experienced a similar pr ...

Combining JSON objects using a LEFT JOIN in SQL Server based on a shared property

In my database, I have two tables. One table holds the schema (key, type) of a JSON object, and the other table holds instances of objects based on that schema. Sometimes, the object instance may not include all the properties defined in the JSON schema, ...

Tips for combining Angular 2 with a current J2EE Spring project and deploying them on the same PORT

I currently have a project with Spring on the back-end and AngularJS 1 on the front-end. When I start the Spring server, it only opens one port for me: 8080 which allows me to access REST APIs and the AngularJS front-end components. https://i.stack.imgur. ...

Troubleshooting Angular2 component testing: Why is Karma not loading the templateUrl?

As I work on writing tests for my Angular2 application, I am encountering a problem. When I use the templateUrl property in the Angular2 component, linking it to an HTML file, instead of using the template property, the test fails to run. The async callbac ...

The setupFile defined in Jest's setupFilesAfterEnv configuration is not recognized by the VSCode IDE unless the editor is actively open

I've put together a simplified repository where you can find the issue replicated. Feel free to give it a try: https://github.com/Danielvandervelden/jest-error-minimal-repro Disclaimer: I have only tested this in VSCode. I'm encountering diffic ...

Making API calls using JavaScript

I'm struggling with understanding how to approach this problem in javascript. Here is the question along with the details. I would appreciate any assistance. QUERY We have a server backend that provides two endpoints: /GetLocalPressReleases and /Get ...

The current version of npm for @angular 2 has not been released yet

Looking to transition from Angular 2 Beta 15 to Angular 2 RC1. Currently utilizing Visual Studio 2015. Within my npm package.json in Visual Studio, I've inputted: "dependencies": { "@angular/core": "Unavailable", } However, it displays as unav ...

Tips for altering Koa's HTTP status code for undeclared paths

If an undefined route is accessed on a Koa server, what is the best method to change the default HTTP status code and response body? Currently, Koa returns a 404 status and 'Not Found' text in the body. I intend to modify this to 501 (Not implem ...

What is the best way to find a specific date and time within a JSON file?

I've managed to figure out how to make this work with strings, but I'm having trouble applying the same logic to a json file. My goal is to count each activity type on every date in a json file. The code snippet below works perfectly, however, I ...

Issue: Incorrectly calling a hook. Hooks can only be used within the body of a function component. Assistance needed to resolve this issue

import React, { useState } from "react"; const RegistrationForm = () => { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const [email, setEmail] = useState(" ...

Is it possible to include a value for the "src" attribute rather than the "class" attribute in the array of values in list.js?

Check out the HTML code I wrote: <html> <head> </head> <body> <input class="search" placeholder="Search" /> <div id="users"> <ul class="list"> ...

Ways to extract link value in Angular

Is there a way to extract a value from a link using Angular 4? I have used *ngIf and would like to display a div based on the value within the link. <div *ngIf="obtain the value from the current href"> ...

Guide on organizing the Object into a precise structure in Angular

I am looking to transform the current API response object into a more structured format. Current Output let temp = [ { "imagePath": "", "imageDescription": [ { "language": "en ...

Formatting JSON lists using Pandas

Looking to standardize a column from a Pandas dataset that consists of a list of dictionaries (some of which may be missing). Here's an example for you import pandas as pd bids = pd.Series([[{'price': 606, 'quantity': 28},{'p ...

The output of switchMap inner will generate an array similar to what forkJoin produces

I have a series of observables that need to run sequentially, with each result depending on the previous one. However, I also need all the intermediate results in an array at the end, similar to what is achieved with the use of forkJoin. Below is the curr ...

Effective Management of Uploaded Files

I am currently working on an Angular2 application that interacts with a .NET WebApi to generate text files. Once these files are created, the goal is for users to be able to download them from the application. I am seeking guidance on the best practices ...

Upgrade from AngularJS 1.x to the latest version of Angular, AngularJS 2.x

Currently in the process of mastering AngularJS 2 in order to transition my applications from Angular 1.x. The differences between the two versions are quite significant. Can you please share the advantages of upgrading from Angular 1 to Angular 2? I am ...