Question

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

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

但问题是每个“item”都是一个来自数组的条目，所以如果我需要数组，它会将每一行输出为一个项目，我希望该项目是每个结果的所有条目。

继承人 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推入其中（希望新数组的每个条目都是我想要的项目），在结尾处（让我们在res [i]中使用j） 在.ts上，但它只是重复创建一堆条目的所有条目.. 在这里，在那个结束时，我试图用一些东西推出一个数组，然后ngfor它（它给了我想要的数字项目，但后来我没有结果来访问它们。）

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

编辑：这是singleArray的样子：

Answer 1

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

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

创建一个新类来定义模型您希望使用视图
让您的视图实现您控制的新理想模型
- 生成一些测试数据，使其看起来像你想要的那样
创建一个新类，其全部职责是将外部模型从api响应转换为新的内部模型
- 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文件只是console.log来自api。

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

response(res){

        console.log(res);
}

我如何以我想要的方式显示数据？对于这篇长篇文章感到抱歉，并且主要问题没有成为目标。

显示从json数据到卡的数组

2 个答案: