Question

我在js数组中存储了一组json数据。

let data = [{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
},
{
"name":"Jack",
"age":35,
"cars":[ "Ferrari", "Mercedes", "Volkswagen" ]
}];

我在EJS中有部分内容：

<% for(var i=0; i < data.length; i++) { %>
<div class="col-md-4 col-sm-4 fh5co-item-wrap">
<a href='data' rel="modal:open" class="fh5co-listing-item">
    <img src="images/img-1.jpg" class="img-responsive">
    <div class="fh5co-listing-copy">
        <h2><%= data[i].name%></h2>
    </div>
</a>
</div>
<% } %>

这将显示“我的所有列表”，这是可以的，但是当我单击“特定项”以仅显示该对象的JSON数据时，我想这样做。这是我的模态部分：

<div id="data" class="data" >
<% for(var i=0; i < data.length; i++) { %>  
<p><%= data.[i].name%></p>
<p><%= data.[i].age%></p>
<% } %>
</div>

这是我的index.js expressjs路由：

app.get('/data', function (req, res) {
res.render('pages/data' ,{ data: data})
})

现在它显示了我的部分，但列出了每个对象。因此要澄清一下：我想单击列表项以仅模式显示该对象的数据。

希望我很清楚。问什么不是。

谢谢。

Answer 1

将路线更改为

app.get('/data/:name', function (req, res) {
   const mydata = data.filter((d) => {
        return d.name === req.params.name;
    })[0];
   res.render('pages/data' ,{ data: mydata})
})

将模式更改为

<div id="data" class="data">
   <p><%= data.name%></p>
   <p><%= data.age%></p>
</div>

将您的链接显示EJS更改为

<% for (var i = 0; i < data.length; i++) { %>
  <div class="col-md-4 col-sm-4 fh5co-item-wrap">
    <a href='data/<%=data[i].name%>' rel="modal:open" class="fh5co-listing-item">
      <img src="images/img-1.jpg" class="img-responsive">
      <div class="fh5co-listing-copy">
        <h2><%= data[i].name %></h2>
        <pre class="json-data"><%= JSON.stringify(data[i]) %></pre>
      </div>
    </a>
  </div>
<% } %>

单击div

1 个答案: