打印 JSON 字符串并使用 HTML 和 CSS 对其进行格式化

Posted 2023-03-07

【中文标题】打印 JSON 字符串并使用 HTML 和 CSS 对其进行格式化

【英文标题】：Printing a JSON string and formatting it with HTML and CSS

【发布时间】：2020-03-26 11:34:11

【问题描述】：

我正在尝试打印和格式化我从数据库中获取的 json 代码，并使用我的 ejs 文件和 CSS 打印它。现在我只是在看一个 JSON 字符串，我不知道如何格式化，有人知道我应该做什么吗？我正在制作一个 Event Planner Web 应用程序。

我要做的是让用户创建一个帐户并登录，然后一旦他们登录，他们就可以查看已经创建的事件的详细信息。正如您从屏幕截图中看到的那样，您可以看到 json 字符串，但我希望能够将其转化为一些有意义的设计，而不仅仅是随机的元素字符串。

当前输出：

body 
  background-color: #FEF5DF;


.container1 
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.pinimg.com/564x/6f/5a/b1/6f5ab1b470beeeeaf285bb451c63ac8f.jpg");
  background-color: black;
  background-size: cover;
  cursor: pointer;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;


.overlay1 
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 2fr 1fr;
  background: rgba(77, 77, 77, .9);
  color: #FEF5DF;
  opacity: 0;
  transition: all 0.5s;
  font-family: 'Playfair Display', serif;


.items1 
  padding-left: 20px;
  letter-spacing: 3px;


.head1 
  font-size: 30px;
  line-height: 40px;
  transform: translateY(40px);
  transition: all 0.7s;
  hr1 
    display: block;
    width: 0;
    border: none;
    border-bottom: solid 2px $bg;
    position: absolute;
    bottom: 0;
    left: 20px;
    transition: all .5s;
  


.price1 
  font-size: 22px;
  line-height: 10px;
  font-weight: bold;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s;
  .old 
    text-decoration: line-through;
    color: lighten(rgb(77, 77, 77), 40%);
  


.cart1 
  font-size: 12px;
  opacity: 0;
  letter-spacing: 1px;
  font-family: 'Lato', sans-serif;
  transform: translateY(40px);
  transition: all 0.7s;
  i 
    font-size: 16px;
  
  span1 
    margin-left: 10px;
  


.container1:hover .overlay1 
  opacity: 1;
  & .head 
    transform: translateY(0px);
  
  & hr 
    width: 75px;
    transition-delay: 0.4s;
  
  & .price 
    transform: translateY(0px);
    transition-delay: 0.3s;
    opacity: 1;
  
  & .cart 
    transform: translateY(0px);
    transition-delay: 0.6s;
    opacity: 1;
  

<h1 class="mt-4">Dashboard</h1>

<p class="lead mb-3">Welcome
  <%= user.name %>
</p>


<a href="/users/logout" class="btn btn-secondary">Logout</a>

<br>
<br>
<br>


<ul>
  <% for(var i=0; i<data.length; i++)  %>
    <li>
      <%= data[i] %>

        <div class="event_age"></div>

        <div class="container1">
          <div class="overlay">
            <div class="items"></div>
            <div class="items head">
              <p> </p>
              <hr>
            </div>

            <%= data[i].comments %>
              <div class="items price">
                <p class="old"> </p>
                <p class="new"> </p>
              </div>

          </div>
        </div>
    </li>
    <%  %>
</ul>

【问题讨论】：

也许json不适合这个，比如说，如果你使用标准的XML，你可能会为自己节省很多工作；虽然你可以让它与 javascript 一起工作。或者你是说你想让它看起来像 json 只是打印得很漂亮？

<pre><%= JSON.stringify(data[i], null, 2) %></pre>

【参考方案1】：

在这种情况下，我认为 JSON 不是您的问题。您正在使用 EJS，它是一个 JavaScript 模板库。因此，您必须使用 html 并在模板中插入所需的数据，如下所示：

<ul>
  <% for(var i=0; i<data.length; i++)  %>
  <li>
    <div>Location: <%= data[i].location %></div>
    <div>Name: <%= data[i].name %></div>
    <div>Event type: <%= data[i].event_type %></div>
    <div>Number of guests: <%= data[i].no_of_guests %></div>
    <div>Event age: <%= data[i].event_age %></div>
    <div>Drinks: <%= data[i].drink %></div>
    <div>Date: <%= data[i].date %></div>
    <div>Comments: <%= data[i].comments %></div>
    <div>Assets: <%= data[i].Assets %></div>
  </li>
  <%  %>
</ul>

如果你想玩弄这段代码，我在这里创建了一支笔：https://codepen.io/yvesgurcan/pen/ZEYzgyj。但是，我必须将 HTML 放入 JavaScript 文件中。您应该能够将此代码直接添加到项目中的 HTML 文件中。

确保您阅读了 EJS 的文档。你会在这里找到很多信息：https://ejs.co/#docs

希望对你有帮助！