根据xpath值创建动态xml树

Question

I want to create a dynamic xml tree base on the xpath. Let's say my xpath value is

Product/Organization/RegisteredDetail/something

and I want to put value in the following format.

<product>
   <organization>
        <registeredDetail>
                    <something>valueOfSomething</something>
        </registeredDetail>
    </organization>
<product>

In short I want to create a treeview/tree table by reading xpath. I want to put the value at the inner most child and show the location of value in a tree structure Or simply the location of the child in a tree form. The value of the xpath will be vary. Any suggestion using java or jquery will be valuable for me.

I tried to implement suggestion given by @ThW. I made some modifications:

var dom = document.implementation.createDocument("", "", null);
var node = dom;

New code:

var pathmap = new Object(); 
var path1 = 'Product/Organization/RegisteredDetail/something';
var path2 = 'Product/Organization/RegisteredDetail';
var path3 = 'Product/Organization/RegisteredDetail/anything/nothing';
pathmap[path1] = 'Product/Organization/RegisteredDetail/something';
pathmap[path2] = 'Product/Organization/RegisteredDetail';
pathmap[path3] = 'Product/Organization/RegisteredDetail/anything/nothing';

console.log(pathmap);
for (var path in pathmap) {
  var parts = path.split(/\//);

  for (var i = 0; i < parts.length; i++) {
    node = node.appendChild(dom.createElement(parts[i]));
  }
  node.appendChild(dom.createTextNode('valueOfSomething'));
}
var serializer = new XMLSerializer();
console.log(dom);

and the output I got is

As you can see tree nodes are repeating. I need to add the valueOfSomething where it belongs. If the node exist don't recreate that, simply add a new child. something like this

<product>
       <organization>
             <registeredDetail>
                            valueOfSomethng
                             <something>valueOfSomethng</something>
                             <anything>
                                     <nothing>valueOfSomethng</nothing>
                             </anything>
            </registeredDetail>
        </organization>
</product>

I am planning to put the value of xpath and valueOfSomething in a hashMap. and put the value of 'valueOfSomething' dynamically.

Answer 1

Xpath allows for a lot more syntax. An the result is not necessary something that can be parsed into a list of element names. For example /product//something will select any descendant something node in product.

If you have a list of elements names you can easily create nodes from them. XPath can be used to fetch existing nodes:

function addElementByPath(parent, path, value) {
  var node = parent;
  var parts = path.split(/\//);
  var dom = parent.ownerDocument;
  var existingNode;

  for (var i = 0; i < parts.length; i++) {
    existingNode = dom.evaluate(
      parts[i], node, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null
    ).singleNodeValue;
    if (existingNode) {
      node = existingNode;
    } else {
      node = node.appendChild(dom.createElement(parts[i]));
    }
  }
  node.appendChild(dom.createTextNode(value));
}

var paths = [
  'Product/Organization/RegisteredDetail/something',
  'Product/Organization/RegisteredDetail',
  'Product/Organization/RegisteredDetail/anything/nothing',
  'Some/OtherPath'
];

var dom = document.implementation.createDocument("", "", null);
var root = dom.appendChild(dom.createElement('tree'));

for (var i = 0; i < paths.length; i++) {
  addElementByPath(root, paths[i], paths[i])
}

console.dirxml(dom);

Output:

<tree>
  <Product>
    <Organization>
      <RegisteredDetail>
        <something>Product/Organization/RegisteredDetail/something</something>
        Product/Organization/RegisteredDetail
        <anything>
          <nothing>Product/Organization/RegisteredDetail/anything/nothing</nothing>
        </anything>
      </RegisteredDetail>
    </Organization>
  </Product>
  <Some>
    <OtherPath>Some/OtherPath</OtherPath>
  </Some>
</tree>