How to output JSON to HTML?

Question

JavaScript

I build a flowchart in the online editor, the editor returns a json file
How can it be displayed in html?
Guys please tell me for a week I can not find a solution

spoiler

{"blocks":
  [
    {"x":40,"y":30,"text":"","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":610,"y":110,"text":"Отец","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":470,"y":210,"text":"Сын","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":1110,"y":280,"text":"Отец","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":990,"y":350,"text":"Сын","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":730,"y":210,"text":"Сын","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":860,"y":210,"text":"Жена","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":790,"y":280,"text":"Доч","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":20,"y":-80,"text":"","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":730,"y":110,"text":"Мать","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":460,"y":20,"text":"Дед","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":590,"y":20,"text":"Бабуля","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":770,"y":20,"text":"Дед","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1},
    {"x":910,"y":20,"text":"Бабуля","width":100,"height":40,"type":"Блок","isMenuBlock":false,"fontSize":14,"textHeight":14,"isBold":false,"isItalic":false,"labelsPosition":1}],
  "arrows":[
    {"startIndex":2,"endIndex":5,"startConnectorIndex":1,"endConnectorIndex":3,"nodes":[{"x":520,"y":210},{"x":660,"y":210},{"x":680,"y":210}],"counts":[1,1,1]},
    {"startIndex":1,"endIndex":2,"startConnectorIndex":2,"endConnectorIndex":1,"nodes":[{"x":610,"y":130},{"x":610,"y":210},{"x":540,"y":210},{"x":520,"y":210}],"counts":[1,1,1,1]},
    {"startIndex":1,"endIndex":9,"startConnectorIndex":1,"endConnectorIndex":3,"nodes":[{"x":660,"y":110},{"x":660,"y":110},{"x":680,"y":110}],"counts":[1,1,1]},
    {"startIndex":9,"endIndex":1,"startConnectorIndex":3,"endConnectorIndex":1,"nodes":[{"x":680,"y":110},{"x":680,"y":110},{"x":660,"y":110}],"counts":[1,1,1]},
    {"startIndex":9,"endIndex":3,"startConnectorIndex":1,"endConnectorIndex":3,"nodes":[{"x":780,"y":110},{"x":1040,"y":110},{"x":1040,"y":280},{"x":1060,"y":280}],"counts":[1,1,1,1]},
    {"startIndex":4,"endIndex":3,"startConnectorIndex":0,"endConnectorIndex":3,"nodes":[{"x":990,"y":330},{"x":990,"y":280},{"x":1040,"y":280},{"x":1060,"y":280}],"counts":[1,1,1,1]},
    {"startIndex":6,"endIndex":5,"startConnectorIndex":3,"endConnectorIndex":1,"nodes":[{"x":810,"y":210},{"x":800,"y":210},{"x":780,"y":210}],"counts":[1,1,1]},
    {"startIndex":7,"endIndex":5,"startConnectorIndex":0,"endConnectorIndex":1,"nodes":[{"x":790,"y":260},{"x":790,"y":210},{"x":780,"y":210}],"counts":[1,1,1]},
    {"startIndex":10,"endIndex":11,"startConnectorIndex":1,"endConnectorIndex":3,"nodes":[{"x":510,"y":20},{"x":520,"y":20},{"x":540,"y":20}],"counts":[1,1,1]},
    {"startIndex":1,"endIndex":11,"startConnectorIndex":0,"endConnectorIndex":3,"nodes":[{"x":610,"y":90},{"x":610,"y":60},{"x":520,"y":60},{"x":520,"y":20},
      {"x":540,"y":20}],"counts":[1,1,1,1,1]},{"startIndex":12,"endIndex":13,"startConnectorIndex":1,"endConnectorIndex":3,"nodes":[{"x":820,"y":20},{"x":840,"y":20},
        {"x":860,"y":20}],"counts":[1,1,1]},{"startIndex":9,"endIndex":12,"startConnectorIndex":0,"endConnectorIndex":1,"nodes":[{"x":730,"y":90},{"x":730,"y":60},
          {"x":840,"y":60},{"x":840,"y":20},{"x":820,"y":20}],"counts":[1,1,1,1,1]}],"x0":0,"y0":100}

Answer 1

https://ru.stackoverflow.com/questions/671886/%D0%...