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

#html #node.js #json #express #node-modules

#HTML #node.js #json #выразить #узлы-модули

Вопрос:

Я искал это в течение последних 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.."
    ]
  }
]

Помощь более чем приветствуется..

1. Сначала вы хотели бы преобразовать массив в какой-то массив токенов. Затем вы можете превратить это в строку.

2. Что вы пробовали? Пожалуйста, отредактируйте свой вопрос, чтобы включить код, который вы написали до сих пор.

Ответ №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-тег, но что, если дочерним элементом является сам другой тег? просто мы снова вызываем ту же функцию синтаксического анализа, однако в этом случае дочерним элементом может быть массив (несколько тегов) или один, основанный на том, что мы либо вызываем 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>``