使用JavaScript合并行

Question

这是“类别”模型：

var mongoose = require("mongoose");

var categorySchema = new mongoose.Schema({
    name:String,
    image:String,
    description:String,
    series: [
      {
         type: mongoose.Schema.Types.ObjectId,
         ref: "Series"
      }
     ]
});

module.exports= mongoose.model("Category",categorySchema);

这是系列模型

var mongoose=require("mongoose");
//making the schema
var seriesSchema = new mongoose.Schema({
    name:String,
    type:String,
    application:String,
    product:[{
        type: mongoose.Schema.Types.ObjectId ,
        ref:"Product"
    }]
});

module.exports=mongoose.model("Series",seriesSchema);

因此，每个类别都包含一些具有名称的应用程序系列以及数组中的应用程序和系列。

My table，这是原始代码：

<table class="table">
    <thread>
        <tr>
            <th scope="col" class="mytable">Series Name</th>
            <th scope="col" class="mytable">Series Application</th>
        </tr>
    </thread>
    <tbody>
        <% Category.series.forEach(function(series){ %>
        <tr>
            <td><strong><a href="/categories/<%=Category._id%>/series/<%=series._id%>/products"><%=series.name%></a></strong></td>
            <td><em><%=series.application%></em></td>
        </tr>
        <% }); %>
    </tbody>
</table>

我想合并具有相同内容的行。我尝试使用一个for循环，最终弄乱了整个new results：

<table class="table">
    <thread>
        <tr>
          <th scope="col" class="mytable">Series Name</th>
          <th scope="col" class="mytable">Series Application</th>
        </tr>
    </thread>
    <tbody>
        <% for(var i=1;i<series.length;i++){ %>
        <tr>
            <td><strong><a href="/categories/<%=Category._id%>/series/<%=series[i-1]._id%>/products"><%=series[i-1].name%></a></strong></td>
            <% var j=1;%>
            <% console.log(series[i]);%>
            <% if(series[i-1].application==series[i].application){ %>
                <% j++; %>
                <td rowspan="<%=j%>"><em><%=series[i-1].application%></em></td>
            <% } else { %>
              <td><em><%=series[i-1].application%></em></td>
            <% } %>
            <% j=0;%>
        </tr>
        <% }; %>
    </tbody>
</table>

Answer 1

据我所知，您实际上没有包含相同内容的行。它们 在第一栏中或在两者中都不同。无论如何，在我看来，如果第二行中的内容相等，您将尝试合并行。

如果可以松散第一列中的信息，则只需跳过整行。在呈现<tr> 之前，只需移动比较。别忘了无论如何都必须渲染第一行。例如：

<table class="table">
    <thread>
        <tr>
          <th scope="col" class="mytable">Series Name</th>
          <th scope="col" class="mytable">Series Application</th>
        </tr>
    </thread>
    <tbody>
        <% for(var i = 0; i < series.length; i++){ %>
            <% if(i < 1){ %>
            <tr>
                <td>
                    <strong>
                        <a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
                        </a>
                    </strong>
                </td>
                <td>
                    <em><%=series[i].application%></em>
                </td>
            </tr>
            <% } else if(series[i-1].application !== series[i].application){ %>
            <tr>
                <td>
                    <strong>
                        <a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
                        </a>
                    </strong>
                </td>
                <td>
                    <em><%=series[i].application%></em>
                </td>
            </tr>
            <% }; %>
        <% } %>
    </tbody>
</table>

另一种可能性是合并第一列的值。解决循环内部将变得模糊。在渲染它们之前，更容易组合信息 ，尽管您必须使用更多的额外JavaScript。 JS以这种方式更改结构，如果它们具有相同的应用程序，则它将第一列中的内容合并在一起（以下代码中的link）：

function mergeEqApplications (series) {
  return series.reduce(function (acc, s) {
    if (!acc.hasOwnProperty(s.application)) {
      acc[s.application] = {
        link: [{name: s.name, id: s._id}],
        application: s.application
      };
    } else {
      acc[s.application].link.push({name: s.name, id: s._id});
    }
    return acc;
  }, {});
}

function objToArray (obj) {
  return Object.keys(obj).map(function (key) { return obj[key]; });
}

function convert (series) {
  return objToArray(mergeEqApplications(series));
}

Category.series = convert(Category.series);

<table class="table">
    <thread>
        <tr>
          <th scope="col" class="mytable">Series Name</th>
          <th scope="col" class="mytable">Series Application</th>
        </tr>
    </thread>
    <tbody>
        <% Category.series.forEach(function (series) { %>
        <tr>
            <td>
                <strong>
                    <% series.link.forEach(function (info) { %>
                    <a href="/categories/<%= Category._id %>/series/<%= info.id %>/products">
                      <%= info.name %>
                    </a>
                    <% }); %>
                </strong>
            </td>
            <td>
                <em><%= series.application %></em>
            </td>
        </tr>
        <% }); %>
    </tbody>
</table>