使用ajax从json读取和显示值

Question

我正在尝试使用 ajax 函数从通过 post 方法接收到的 .json 文件中的数据获取到外部服务器，并将其全部显示在 html 上（标签和数据）。 我可以获取 json 数据并通过控制台日志显示它，但是我无法对其进行迭代，或者只是在 html 端显示。

我尝试创建一个公共数组并将响应推送给它，创建一个函数等。但看起来 ajax 函数在它之后加载，并且根本没有数据，然后我尝试连接一个带有我在控制台上获得的值的字符串，但没有成功。

我什至无法获得实际数据，只有标签。我在这里有点困惑。有人能帮我吗？

这是我的代码以及它在控制台上显示的内容。

component.hmt：

<ul>
   <li>{{res}}</li>
</ul>

component.ts

public res = "";
ngOnInit() {

let settings = {
          "async": true,
          "crossDomain": true,
          "url": "ip/to/api",
          "context": this,  //added this
          "method": "POST",
          "data": "\"dataApi\"",
      };

$.ajax(settings).done(function (response) {
console.log(response);
this.res = response; //added this
       for(let i in response)
       {
           //console.log(i);
           this.res += i + " - ";
           for(let j in response[i])
           {
               //console.log(j);
               this.res += j + " : \n ";
               for(let t in response[i][j])
               {
                   //console.log(t);
                   this.res += t +"\n";
               }
           }
       }
       console.log(this.res);
       return this.res;

   });
  }
}

这是 console.log 上的输出： 问题是在控制台日志上我可以获取所有标签：数据，但我永远无法获取要显示的 res 字符串上的数据。

Console.log(response) : 我需要显示的所有数据。

this.res : 没有任何数据的标签。

提前致谢！！

编辑：这是 {{res | json}} 在 html 端：

{“挑战”：[{“挑战.Closed”：假， "Challenge.EndSubmissionDate": "2010 年 2 月 13 日星期六 00:00:00 GMT", “Challenge.Title”：“net.Partner”、“Challenge.CompositeId”： "Id=3_Tenant=103", "Challenge.Code": "2010/001"....

我有 json 之类的基于文本的..我想要例如：

Challenge.Closed : false
....
Idea.id: 4
...

并访问一些我知道存在的标签，比如 id.. 我必须映射它吗？

Answer 1

试试这个：

你所要做的就是循环响应

.HTML

<div  class="div1">
  <ul class="r " *ngFor="let res of responseList.challenges">
    <li>
     {{res.closed}} 
    </li>
  </ul>
</div>

.TS

public responseList = "";
ngOnInit() {

let settings = {
          "async": true,
          "crossDomain": true,
          "url": "ip/to/api",
          "method": "POST",
          "data": "\"dataApi\"",
      };

    $.ajax(settings).done() = (res) => this.response(res);

response(res){
    console.log(res);
      this.responseList = res;
    }

Answer 2

您应该在这里使用 $.ajax() context 对象，例如：

let settings = {
          "async": true,
          "crossDomain": true,
          "url": "ip/to/api",
          "context": this,
          "method": "POST",
          "data": "\"dataApi\"",
      };

Answer 3

所以我认为我很接近，我知道 {{res | json }} 我可以打印 json 文件中的所有数据和标签，包括花括号等。 （它就像一个 json 文件到文本）

但我只需要打印实体：标签和值。请记住，我不知道 json 文件中的内容。这是我目前所拥有的：

public entity = [];
public cont = [];

.创建并排列并推送所有实体：

this.res = response;
for(let i in response)
{
   //array with entities inside json
   this.entity.push(i);
}
return this.res;

在 html 方面我可以得到：

<!-- all the data from json-->
     <ng-container>
       <li>{{res}}</li>
     </ng-container>

<!-- all the Challenges or whatever comes after res --- res.HERE-->
      <ng-container>
        <li>{{res.Challenges | json}}</li>
      </ng-container>


<!-- or (example with Ideas)-->
      <ng-container *ngFor="let x of res.Ideas">
         <li>{{x | json}}</li>
      </ng-container>


<!-- print all the entities that come in the json 
(challenges, Ideas, whatever.. that goes with res.HERE)-->
       <ng-container *ngFor="let i of entity">
         <li>{{i}}</li>
       </ng-container>

所以，我可以得到entities，每个实体都有自己的属性，例如实体Challenges：

Challenge.Closed
Challenge.EndSubmissionDate
Challenge.Title
etc..

但是我怎样才能访问每个属性的值呢？使用我发布的 html，我可以获得评论中的内容，因此我可以迭代每个实体，例如：

<!-- json file has 2 entities -->
    <ng-container *ngFor="let i of entity">
        <!-- trying to print res.Challenges and res.Ideas -->
         <ng-container *ngFor="let jsn of res.i">
             <li>{{jsn | json}}</li>
         </ng-container>
    </ng-container>

但是，没有成功。我不明白我该如何解决它！ 使用我之前发布的 for 循环：

for(let i in response)
{
  this.cont.push(i);
    for(let j in response[i])
    {
      this.cont.push(j);
          for(let t in response[i][j])
          {
            this.cont.push(t);
          }
    }
}

我已经在html端打印了：

最好的办法是获取每个“entity.attribute”的值，而不仅仅是像我这样的标签（显示在图像上）

Answer 4

更接近解决方案，我找到了检索值的方法，例如实体挑战：

this.responseList.Challenges["0"]["Challenge.Code"]

给我挑战码。

但除了挑战之外，它可以是任何东西，那就是实体的名称，例如想法：

this.responseList.Ideas["0"]["Idea.Code"]

给我idea代码。

如果我想知道每个实体的名称：

this.responseList
 >{Challenges: Array(13), Ideas: Array(1)}

测试是在控制台上使用调试器在以下代码中的“for循环”中进行的：

html - 我只是打印挑战，但我不知道我有什么实体.. 它可以是我的想法，或其他..

<ul *ngFor="let res of responseList.Challenges">
   <li> {{res | json}} </li>
</ul>

Component.ts

public entity = [];         //has the entity names ideias, challenges whatever...
public responseList = "";   //the json that comes from the server

ngOnInit() {

   let settings = {
       "async": true,
       "crossDomain": true,
       "url": "ip/to/api",
       "method": "POST",
       "data": "\"dataApi\"",
   };

   $.ajax(settings).done((rest) => this.response(rest));

}

 response(res){

this.responseList = res; //the json file with allt he information

      for(let i in res)
      {
         //array with all entities inside json
         this.entity.push(i);
      }

      debugger;
}

根据这些信息，我必须在 .ts 中使用 for 循环和数组工作，然后在 .html 上打印结果，对吗？有人可以帮我吗？

已编辑解决方案

如果我可以在控制台上打印这些值，我也可以使用我之前的 for 循环来打印它们：

component.ts： for（让我进入水库） { for(让 j 在 res[i] 中) { this.singleArray.push({ 标签： 我, 值：值 });

         for(let t in res[i][j])
         {    
             this.singleArray.push({
             tag: t,
             value: this.responseList[i][j][t]
         });

         if(t.split(".",2)[1] === "CompositeId")
         {
          this.singleArray.push({
          tag: "URL:",
          value: this.moduleName + "/" + t.split(".",2)[0] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]
          });
        }
     }
   }
}

用那个'for循环'我可以得到标签和值： 在 html 端打印它们：

html

<ng-container *ngFor="let item of singleArray">
   <li>
     {{item.tag}} - {{item.value}}
   </li>
   <a *ngIf="item.tag.includes('URL')"> <a href="{{item.value}}"><li>- LINK -</li></a></a>
</ng-container>