Разбор массива JSON с тегами HTML для вывода простого HTML

Question

Я гуглял по этому поводу последние 2 дня. Я не мог сделать это идеально.

Полагаю, это относится или может быть сделано некоторыми шаблонизаторами, но .. Мне не удалось найти этот так называемый движок.

У меня есть JSON array, и я хотел бы проанализировать его или преобразовать в обычный HTML для вывода в браузер.

[
  {
    "tag": "figure",
    "children": [
      {
        "tag": "div",
        "attrs": {
          "class": "fiwrapper"
        },
        "children": [
          {
            "tag": "img",
            "attrs": {
              "src": "/media/images/5cbd41bd7c566057f5e6a875.jpeg"
            }
          }
        ]
      },
      {
        "tag": "figcaption",
        "children": [
          ""
        ]
      }
    ]
  },
  {
    "tag": "p",
    "children": [
      {
        "tag": "br"
      }
    ]
  },
  {
    "tag": "figure",
    "children": [
      {
        "tag": "div",
        "attrs": {
          "class": "fiwrapper"
        },
        "children": [
          {
            "tag": "img",
            "attrs": {
              "src": "/media/images/5cbd45286c7210581c5563ba.jpeg"
            }
          }
        ]
      },
      {
        "tag": "figcaption",
        "children": [
          ""
        ]
      }
    ]
  },
  {
    "tag": "p",
    "children": [
      {
        "tag": "br"
      }
    ]
  },
  {
    "tag": "p",
    "children": [
      "Cool Stuff.."
    ]
  }
]

Помощь более чем ценится.

Answer 1

Все, что вам нужно сделать, это рекурсивный синтаксический анализатор, который будет анализировать json сверху вниз.

вот синтаксический анализатор, чтобы сделать это в javascript, и ту же логику можно перевести на любой другой язык, какхорошо.

const getAttrMap = (attr) => attr ? Object.keys(attr).reduce((acc, curr) => `${acc} ${curr}="${attr[curr]}"`, '') : '';

function parseArr(arr) {
    return arr.map(curr => parser(curr)).join('\n');
}

function parser(obj) {    
    if (typeof obj === 'object') {
        if (!obj.children) {
            return `<${obj.tag} ${getAttrMap(obj.attrs)}/>`
        }
        return `<${obj.tag} ${getAttrMap(obj.attrs)}>${
            obj.children instanceof Array ? parseArr(obj.children) : parser(obj.children)}</${obj.tag}>`;
    }
    if (!obj) {
        return '';
    }
    return obj;
}

// usage
parseArr(inputJson);

Пояснение

Если мы знаем, как перевести один блок, мы можем перевести каждый блок рекурсивно.Для анализа одного блока логика проста:

<${obj.tag} ${getAttrMap(obj.attrs)}>CHILD</${obj.tag}>

Это преобразует объект в тег HTML, но что если CHILD сам является другим тегом?просто, мы снова вызываем ту же функцию парсера, однако в этом случае CHILD может быть массивом (несколькими тегами) или единичным, на основе которого мы называем parseArr или parser.В тех случаях, когда дочерние элементы не указаны, мы просто возвращаем пустую строку.

Вывод

<figure ><div  class="fiwrapper"><img  src="/media/images/5cbd41bd7c566057f5e6a875.jpeg"></img></div>
<figcaption ></figcaption></figure>
<p ><br ></br></p>
<figure ><div  class="fiwrapper"><img  src="/media/images/5cbd45286c7210581c5563ba.jpeg"></img></div>
<figcaption ></figcaption></figure>
<p ><br ></p>
<p >Cool Stuff..</p>``