如何将 JSON 转换为带有相关标签的富 HTML [关闭]答案

【问题标题】：How to convert JSON to rich HTML with relevant tags [closed]如何将 JSON 转换为带有相关标签的富 HTML [关闭]
【发布时间】：2020-05-14 22:07:43
【问题描述】：

我正在与需要自己的特定 CMS 来发布博客的慈善机构合作。我已经设置了运行良好并输出 JSON 的 QuillJS。

如何将 JSON 数据转换回带有相关标签的 HTML？我也需要显示 HTML 标签，例如“<p>Hello</p>”。我可以通过 php mysql 获取 JSON 数据，但不知道如何显示标签。

例如我如何转换以下内容

JSON

{
   "time" : 1589493865899,
   "blocks" : [
       {
           "type" : "header",
           "data" : {
               "text" : "Editor.js",
               "level" : 2
           }
       },
       {
           "type" : "paragraph",
           "data" : {
               "text" : "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
           }
       }
   ],
   "version" : "2.17.0"
}

到

HTML

<html>
<h2>EditorJS</h2>
<p>Hey. Meet the new Editor. On this page you can see it in action — try to edit this text.</p>
</html>

非常感谢您的帮助！

【问题讨论】：

大概你需要从每个项目中读取“类型”值，并决定它是什么类型的 HTML 元素，然后回显它的标签。 TBH有点不清楚你卡在哪里了。你真的尝试过什么吗？
@ADyson 如果不清楚，真的很抱歉。我不知道从哪里开始，也找不到任何好的信息，所以甚至不知道是否可能。请给我一个例子好吗？
是的，这当然是可能的。首先，您需要将 JSON 解析为 PHP 对象，以便您可以使用它。你已经走到那一步了吗？
@ADyson 我已经在 MYSQL 中获得了上述 JSON 并将其存储在 PHP 变量中，但这是我所拥有的
好的，接下来你需要遍历变量的“blocks”属性。您知道如何在 PHP 中访问对象（或关联数组，取决于您如何解码）的属性吗？你知道如何写一个 foreach 循环吗？

标签： php html json wysiwyg quill

【解决方案1】：

这是一个完整的解决方案。 cmets中提到了每个步骤：

<?php
$jsonData = '{
   "time" : 1589493865899,
   "blocks" : [
       {
           "type" : "header",
           "data" : {
               "text" : "Editor.js",
               "level" : 2
           }
       },
       {
           "type" : "paragraph",
           "data" : {
               "text" : "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
           }
       }
   ],
   "version" : "2.17.0"
}';

//decode the JSON
$data = json_decode($jsonData);

//loop through the blocks
foreach ($data->blocks as $block)
{
    $start = "";
    $end = "";

    //detect the element type and set the HTML tag string
    switch ($block->type)
    {
        case "header":
            $start = "<h2>";
            $end = "</h2>";
            break;
        case "paragraph":
            $start = "<p>";
            $end = "</p>";
            break;
    }

    //output the final HTML for that block
    echo $start.$block->data->text.$end;
}

演示：http://sandbox.onlinephpfunctions.com/code/ab862de1113d8744bc2d9463f7a7df2496491110

【讨论】：

我非常感谢您的时间和耐心。我会得到一些教训，希望不会再打扰你！
没问题。希望您学到了一些东西并获得了解决方案。如果答案有帮助，请记住将其标记为“已接受”（单击答案旁边的勾号，使其变为绿色）。谢谢！

【解决方案2】：

所以你需要先对 JSON 进行解码，以便 php 可以将其用作数组并通过 foreach 循环显示。

$someJSON = '{
    "time" : 1589493865899,
    "blocks" : [
        {
            "type" : "header",
            "data" : {
                "text" : "Editor.js",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
            }
        }
    ],
    "version" : "2.17.0"
 }';

现在我们解码并显示

$someData = json_decode($someJSON, true);
//--> Create an empty variable to hold the display text... 
$output = null;
//--> Run foreach loop, we can see the associative keys in the array, this gives
//--> us everything we need to pull the data out and display it properly... 
//--> loop through the converted arrays first child 'blocks' and get the values
foreach ($someData['blocks'] as $value) {
        //--> If the 'type' === 'header' wrap value -> ['data'] -> ['text'] in <h2> tag
        if($value['type'] === "header"){
            $output .= '<h2>'.$value['data']['text'].'</h2>';
        }
       //--> If the 'type' === 'paragraph' wrap value -> ['data'] -> ['text'] in <p> tag
        if($value['type'] === "paragraph"){
            $output .= '<p>'.$value['data']['text'].'</p>';
        }
    }

在您的 HTML 输出中，php 标记中的变量显示$output 中保存的串联 HTML

    <html>
        <div id="my_id">
            <span class="my_class">
                <?=$output?> or <?php echo $output; ?>
            </span>
        </div>
    </html>

http://sandbox.onlinephpfunctions.com/code/e8fdb5b84af5346d640e92e6788e5c2836b9ad07

【讨论】：

记住你需要的一切都在你的数组中......你的关联键和值对就在那里，只需构建你的逻辑循环并在它们的父/子级别中查找特定的嵌套值。 array = $parent[first_child_key][second_level_child_key][third_level_child_key]...等...
您在此处使用的 JSON 与问题中的不同。这是有原因的吗？
你是正确的戴森，我更正了代码...
再次感谢戴尔！根据类型为标题和级别为 2 构造
标记的最佳方法是什么？
developer.mozilla.org/en-US/docs/Web/HTML/Element/… 在这里阅读标题标签的基础知识......虽然如果你想要一个简单的标题，你可以将它包装在 <div>Header</div> 标签中，然后根据需要设置它的样式。但在你的情况下，我认为你想要一个二级标题标签 - > <h2>content</h2>

标记的最佳方法是什么？