I have a xaml document, with activities for workflow , such as while , forEach , if . I recursively went through this document, and as a result I have a javaScript object, whose properties are nodes of this xaml document, which are also objects (nested xaml nodes of the document). The object looks like this:

If:Object { Then:Object{ While:Object{ ... } } Else:Object{ ForEach:Object{ If:Object{ ... } } } }

I need to display this in the form of html with saving attachments for if, else, etc. blocks.

How it will look not so important, the main investment. For example:

 <div class="if"> <div class="then"> <div class="while> </div> </div> <div class="else"> <div class="forEach"> <div class="if"> </div> </div> </div> </div>
  • Give an example of a document that should be obtained from this object, please - Alexander
  • Added a simple example to the question text. - endovitskiiy

2 answers 2

Another option, with DOM elements, not a string:

 var data = { "If": { "Then": { "While": {} }, "Else": { "ForEach": { "If": {} } } } }; function render(obj) { return Object.keys(obj).reduce(function(acc, el) { var div = document.createElement('div'); div.className = el; div.appendChild(render(obj[el])); acc.appendChild(div); return acc; }, document.createDocumentFragment()); } document.body.appendChild(render(data)) 
 div { border: 1px solid black; } div div { padding-left: 20px; } .If::before { content: 'if'; } .Then::before { content: 'then'; } .Else::before { content: 'else'; } .While::before { content: 'while'; } .ForEach::before { content: 'for each'; }

  • Comments are not intended for extended discussion; conversation moved to chat . - Nicolas Chabanovsky ♦

Still not sure that I understood the essence of the question, but try the following code:

 var obj = { "if": { "then": { "while": { } } }, "else": { "foreach": { "if": { } } } } function walkObj(obj) { var out = ''; Object.keys(obj).forEach(function(el) { out += "<div class=\"" + el + "\">\n" + walkObj(obj[el]) + "\n</div>\n" }) return out; } console.log(walkObj(obj));
  • Thanks, it fits. - endovitskiiy 4:34 pm