Transforming JSON/XML into a hierarchical display

I've come across the following XML file:

<Person attribute1="value1" attribute2="value2">
  value3
  <Address street="value4" city="value5">value6</Address>
  <Phone number="value7" type="value8">value9</Phone>
</Person>

My goal is to convert it into a treeview, like this:

Parameter/Attribute Name   Parameter/Attribute Value

Person                     value3                    
    Address                value6
         ()street               value4
         ()city                 value5
    Phone                  value9
         ()number               value7
         ()type                 value8

The JSON representation of the file would be:

{
  "Person": {
    "-attribute1": "value1",
    "-attribute2": "value2",
    "#text": "value3",
    "Address": {
      "-street": "value4",
      "-city": "value5",
      "#text": "value6"
    },
    "Phone": {
      "-number": "value7",
      "-type": "value8",
      "#text": "value9"
    }
  }
}

I initially attempted to use an open source tool called editJSON (), but it did not meet my requirements. Now, I have decided to develop my own directive. Does anyone have any ideas on how to get started or know of any other open source solutions that can help with this task?

Thank you, Ramzy

Answer №1

A strategy for converting data into a tree view requires the use of specific directives. I have successfully implemented this approach:

$scope.roleList2 = [{"Category":[{"-name":"categoryName1","-type":"categoryType1","#text":"value1","Subcategory":[{"-subAttr1":"subValue3","-subAttr2":"subValue4","#text":"value2"}]}],"Item":[{"-itemAttr1":"itemValue1","#text":"value2"}]}];

Interactive demo available on Plunker:

http://jsfiddle.net/uniqueuser/9ATPB/

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

Refresh my website's specific table automatically whenever the database is updated. Alternatively, reload the table every 2 seconds to ensure the latest values from the database are displayed

How can I update table values in real-time when the database in phpMyAdmin is updated? I have implemented some code that successfully updates the data on my webpage, but the issue is that the entire page reloads every 2 seconds. Is there a way to only ...

Tips for managing @ManyToMany relationships in TypeORM

In this scenario, there are two distinct entities known as Article and Classification, linked together by a relationship of @ManyToMany. The main inquiry here is: How can one persist this relationship effectively? The provided code snippets showcase the ...

Struggling with parsing JSON response in PHP code

I am struggling with decoding the JSON response from api-football using PHP. My PHP knowledge is limited, so please be patient with me. Here is a snippet of the vardump: array(1) { ["api"]=> array(2) { ["results"]=> int(10) ["fixture ...

Troubleshoot React component re-rendering issue

I'm currently facing a challenging bug that only occurs very sporadically (about once every few dozen attempts). During the render call, I'm determined to gather as much information as possible: I want to understand what triggered the rerender ...

Struggling to dynamically append additional textboxes to a <div> element using JavaScript

After spending over 12 hours on this problem, I am completely stuck and frustrated. I have tried countless variations and sought out other solutions to no avail. It should be a simple task. My project involves using JQueryMobile 1.2 along with its dependen ...

Step-by-Step Guide on Dividing Table Row Data into Two Distinct Tables

At present, I have created a dynamic table that retrieves data from the database using forms in Django. I'm facing an issue with this table as even though there are 7 columns, only 2 of them are visible. However, all 5 hidden columns do contain impor ...

Why is it that one function does not hold off on execution until Promise.all() is resolved in another function?

I am currently working on a form that allows users to upload files seamlessly. <form @submit.prevent="sendForm" enctype="multipart/form-data"> <input multiple ref="PostFiles" name="PostFiles" type="file" @change="selectFile('add')"> ...

Upon submission in Vue, the data variable becomes undefined

I set isError to false in the data, but when there is an error from Laravel, I receive a 422 error. I want to then set isError to true, but when I do, I get an error in the console saying that isError is undefined even though it has been defined. What coul ...

The table is failing to update its data when I attempt to refresh it using the custom button on the page

I need to incorporate a refresh button using an angular material icon on my webpage that triggers an HTTP call to retrieve the latest data and update the view. I have implemented a $watch function to monitor any updates. Below is the corresponding JavaScri ...

The API call for /api/users/create was resolved without a response, which could potentially lead to requests getting stuck. This issue was detected in

I've developed an API endpoint to manage user account creation within my Next.js application, utilizing knex.js for handling queries. Despite this, I keep encountering the following error: API resolved without sending a response for /api/users/create ...

What causes the transformation of [{"value":"tag1"} into [object Object] when it is logged?

Currently on my node.js server, the code I'm using is as follows: var tags = [{"value":"tag1"},{"value":"tag2"}]; console.log("tags: " + tags); My expectation was to see this in the console: tags: [{"value":"tag1"},{"value":"tag2"}] However, what ...

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

After receiving a JSON post response, I am looking to iterate over the data and display it in image divs. Can anyone provide guidance on how to achieve this using JavaScript? Thank you. Here is the JavaScript code that handles the JSON post response: cor ...

Angular.js encountered an error with the Injector.modulerr function

I'm facing an issue with my node-jade-angular application: layout.jade doctype html html(ng-app='listApp') head title= title script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js') ...

Efficiently making JQuery Ajax requests using HTTP Basic Authentication

I am currently experiencing challenges with implementing HTTP Basic Authentication in JQuery when communicating with a REST-based server. This server provides responses in both XML and JSON formats, but I have chosen to work with JSON format. Our authoriz ...

After each animation in the sequence is completed, CSS3 looping occurs

I have currently set up a sequence of 5 frames, where each frame consists of 3 animations that gradually fade into the next frame over time. My challenge is figuring out how to loop the animation after completing the last sequence (in this case, #frame2). ...

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

Next.js, Knex, and SWR: Unusual issue disrupting queries

When making API requests using Next API routes and interacting with Knex + MySQL, along with utilizing React and SWR for data fetching, I encountered a strange issue. If a request fails, my SQL queries start to append ", *" to the "select" statement, causi ...

Show a preview of an image in an HTML document

How can I display an image after uploading it? I attempted to use the following code, but it didn't work: onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status& ...

Segment will expand completely upon inserting a new division

Lately, I've been trying to simplify things by consolidating my JavaScript functions into one file instead of using multiple separate files. The idea was to merge all the functions together and wrap each one in its own function so that they can be eas ...

Transforming a list format into JSON within the output child process in Node.js - is there a way to

After executing a Python script in Node.js as a child process, I have received an array from the output that is converted to JSON with a status response. Here is the initial output array: [ 759864000, 740308000, 724748000, 725208000, 7 ...