Question

我试图从通过post方法收到的.json文件中获取数据到外部服务器，使用ajax函数并将其全部显示在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（响应）：我需要显示的所有数据。

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

提前致谢!!

编辑：这是{{res |的输出jtml}}在html方面：

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

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

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

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

Answer 1

So i think i am close, i know that with {{res | json }} i can print all the data and tags, including curly braces etc from the json file. (its like a json file to text)

But i need to print only the entity: tags and values. keep in mind that i neves know what comes on the json file. Here's what i have so far:

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

.Created and array and pushes all the entities:

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

the on the html side i can get:

<!-- 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>

so, i can get the entities, each entity has its own attributes, for example to entity Challenges:

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

but how can i acess the values to each attribute? with the html i've posted i can get what's inside the coments, so i could iterate each entity like:

<!-- 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>

but, no success. i don't see how can i solve it! with that for loop i've posted earlier:

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

I've printed on the html side:

the best thing was to get the values for each "entity.attribute" and not only the tags like i have (showed on the image)

Answer 2

离解决方案更近一点，我找到了重新审视价值观的方法，例如实体挑战：

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

给了我挑战码。

但不是挑战，它可以是任何东西，它是实体的名称，例如Ideas：

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

给了我想法代码。

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

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

测试是在控制台上使用调试器在＆＃39; 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;
}

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

编辑解决方案

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

<强> component.ts： for（让我在res） { for（让我们在res [i]中） { this.singleArray.push（{ 标签：我，价值：val }）;

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

用循环＆＃39;循环＆＃39;我可以得到标签和价值：在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>

Answer 3

试试这个：

您所要做的就是循环回复

<强> .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 4

你应该在这里使用$ .ajax（）context对象，如：

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

使用ajax从json读取和显示值

4 个答案: