Html 显示从json数据到卡的数组

所以，我在这里有点迷路了，我需要一些帮助。 我有一个来自服务器的json，其中包含我不知道的数据

基于此，我找到了一个解决方案，可以在此处以html显示数据，因此：

但问题是，每个“项”都是数组中的一个条目，因此如果我选择数组，它会将每一行作为一个项输出，我希望该项是每个结果的所有条目

以下是html：

<ng-container *ngFor="let item of singleArray | paginate: { itemsPerPage:411, currentPage: p} ">
         <!-- All the entries -->
         <div class="w3-container">

          <!-- Table view-->
          <table class="center">
             <tr *ngIf="!item.tag.includes('URL') && !item.tag.includes('linkChal')">
              <td><div class="col-xs-auto thick">{{item.tag.toLowerCase() | translate}}</div></td>
               <td class="tab">{{item.value}}</td>
               </tr>
               <tr *ngIf="item.tag.includes('URL')">
                        <td>Link da entrada: </td>
                        <td> <a href="{{item.value}}">- Ver mais -</a></td>
                </tr>
                <tr *ngIf="item.tag.includes('linkChal')">
                         <td>Link do Challenge: </td>
                         <td> <a href="{{item.value}}">- Challenge -</a></td>
                </tr>
           </table>

           <div style="background-color: #ff7d2a">
               <ul *ngIf=" item.tag.includes('---------')"><p>New Entry</p></ul>
               </div>
            </div>
 </ng-container>

以下是我的输出：

每一行都是数组中的一个条目，最大的问题是，如何将所有行/条目转换为“新条目”，并将单个条目转换为ngfor，并将数据显示到我已有的卡中……）

我曾尝试创建一个数组，并将singleArray推入其中（希望新数组的每个条目都是我想要的条目），在for（让j in res[I]）on.ts的末尾，但它只是重复了所有条目，创建了一组条目。。 在这里，在for的结尾，我试着用一些东西推送一个数组，然后用它（它给了我想要的数字项，但是我没有访问它们的结果…）

以前有人有过这个问题吗？ 提前谢谢

编辑：以下是singleArray的外观：

---

您在这里的最佳选择是遵循每门课的和

不要试图在视图中完成这一切，将格式化数据的责任分离出来，这样问题就会简单得多

• 创建一个新类来定义视图要使用的模型
• 让您的视图实现您控制的这个新的理想模型
  • 生成一些测试数据，使其看起来像您想要的
• 创建一个新类，该类的全部职责是将外部模型从api响应转换为这个新的内部模型
  • 可能有助于从响应中生成更好的外部模型，但在这种情况下可能没有多大用处

完成上述操作后，根据示例输出，将外部模型转换为内部模型应该相当简单。很难表达这一点，但假设连字符是项目分隔符，您可以简单地执行以下操作：

    const externalItems = // data from api
    const internalItems = [];
    let currentInternalItem = {};

    externalItems.forEach(item => {
     if (item.tag.startsWith('---------')) {
         internalItems.push(currentInternalItem);
         currentInternalItem = {};
     } else {
        currentInternalItem[item.tag] = item.value;
     }
    });

---

这将把数组重新组合成一个对象，您可以在视图中使用它。

我认为我太复杂了。。这里的目标是将来自JSON的内容显示到特定位置，如带有标题和内容的卡片，以便更好地显示结果

我有一个服务给我一个JSON，我永远不知道里面是什么，这取决于搜索词，可以带来很多信息。例如：

如果术语为“想法”：

如果术语为挑战：

我的.ts文件只是来自api的console.log文件

 ngOnInit() {
    var setting = {setting to connect the server..}
    enter code here
    $.ajax(settings).done((rest) => this.response(rest));
    }

response(res){

        console.log(res);
}

如何以我想要的方式显示该数据？

---

很抱歉写了这么长的文章，也很抱歉在主要问题上没有做到客观。

我假设我使用的是单一责任主体，因为每个模块都是自己的对象。ve:-我得到了检索服务器JSON的服务，我不知道其中包含什么。-我得到了.ts，它读取json并创建一个数组键值来推送每一项然后，我使用html以最好的方式显示它。我无法生成基于json的接口，因为我永远不知道里面有什么。。。我想把问题弄清楚。。因为“----”和etc是由我在.ts端添加的，用于分隔每个结果。好的，这使它更清晰一些。我给出的示例代码将更改，但主体将保持不变。在我给出的示例代码中，我迭代了一系列对象，并根据每个结果生成一个新对象。您可以生成一个“Card”对象数组，其中包含每张卡的所有标记/值对，而不是将所有内容都推到一个平面数组{tag，value}。然后在视图中，可以为每个卡对象生成一个卡视图。

 ngOnInit() {
    var setting = {setting to connect the server..}
    enter code here
    $.ajax(settings).done((rest) => this.response(rest));
    }

response(res){

        console.log(res);
}