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

Question

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

基于此，我找到了一个在 SO 上显示 html 数据的解决方案： https://stackoverflow.com/a/50352965/9721446

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

这里是 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>

Ts：

for(let i in res)
        {

            //array with entities from json
            this.entity.push(i);

            for(let j in res[i])
            {
                let val = Number(j)+1;
                this.cont.push(i +"  - nº: " + val );
                this.singleArray.push({
                    tag: i,
                    value: val
                });

                for(let t in res[i][j])
                {
                    this.test.push(t);
                    this.cont.push(t +" - "+ this.responseList[i][j][t]) ;

                    if(t.split(".",2)[1] === "CompositeId")
                    {
                        this.test.push("URL:");
                        //Get the id
                        this.cont.push(this.moduleName + "/" + t.split(".",2)[0] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]);
                        //debugger;
                        this.singleArray.push({
                            tag: "URL:",
                            value: this.moduleName + "/" + t.split(".",2)[0] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]
                        });
                    }
                    else if(t.split(".",2)[1] === "Challenge")
                    {
                        this.singleArray.push({
                            tag: "linkChal",
                            value: this.moduleName + "/" +t.split(".",2)[1] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]
                        });
                    }
                    else {
                        this.singleArray.push({
                            tag: t,
                            value: this.responseList[i][j][t]
                        });
                    }

                }
                this.test.push("\n");
                this.cont.push("\n");
                this.singleArray.push({
                    tag: "---------\n",
                    value: "--------\n"
                });

                 //it ends an item here 
            }
        }

这是我的输出：

每一行都是数组中的一个条目，最大的问题是，如何将所有行/条目转换为“新条目”并将单个项目制作为 ngfor 并将数据显示到卡片中我已经有了..)

我试图创建一个数组并将 singleArray 推入其中（希望该新数组的每个条目都是我想要的项目），在 for(let j in res[i]) 的末尾 在 .ts 上，但它只是重复了所有条目，创建了一堆条目.. 在这里，在最后，我尝试用一​​些东西推送一个数组，然后 ngfor 它（它给了我想要的数字项目，但是我没有结果来访问它们..）

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

编辑：这是 singleArray 的样子：

Answer 1

您最好的选择是关注每个班级的single responsibility principal 和separate the concerns。

停止尝试在视图中执行所有这些操作并分离出格式化数据的责任，问题看起来会简单得多。

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

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

    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;
     }
    });

这会将数组重新组合成一个可以在视图中使用的对象。

Answer 2

我认为我太复杂了。这里的目标是将来自 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);
}

如何以我想要的方式显示这些数据？ 很抱歉这篇文章很长，并且在主要问题上没有客观。