Read and Display values from json using ajax

Question

Im trying to get data from a .json file that is recieved via post method to a external server, using ajax function and display it all on html (tags and data). I can get the json data and display it via console log, however im not able to iterate over it, or simply display in on the html side.

I've tryed to create a public array and push the response to it, create a function, etc.. but looks like ajax function loads after it, and there's no data at all, then i've tried to concat a string with the values that i get on console, but no success.

I can't even get the actual data, only the tags. Im a little bit confused here. Can some one help me?

Here's my code and what it displays on console.

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;

   });
  }
}

Here's the output on console.log: the thing is that on console log i can get all the tags : data, but i can't never get the data on res string to display.

Console.log(response) : All the data i need to display.

this.res : the tags without any data.

Thanks in advance!!

Edit: Here's the output of {{res | json}} on html side:

{ "Challenges": [ { "Challenge.Closed": false, "Challenge.EndSubmissionDate": "Sat Feb 13 00:00:00 GMT 2010", "Challenge.Title": "net.Partner", "Challenge.CompositeId": "Id=3_Tenant=103", "Challenge.Code": "2010/001"....

I have the json like text based..i want for example:

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

and access some of the tags that i know that exists, like id.. Do i have to map it?

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

A little closer to the solution, i've found the way to retrive the values, for example to entity Challenge:

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

gives me the challenge code.

But instead of challenge it can be whatever, that's the name of entity, for example Ideas:

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

gives me the idea code.

if i want to know the names of each entity:

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

The test was made on console with a debugger in the 'for loop' inside the code that follows:

html - Im just printing Challenges, but i neves knwo what entity i have.. it can me Ideas, or other..

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

Based on that information, i have to work inside .ts with for loops and arrays and the just print the result on .html, right? Can somebody help me with that?

Edited for solution

If i could print the values on the console, i can print them too with my previous for loop:

component.ts: for(let i in res) { for(let j in res[i]) { this.singleArray.push({ tag: i, value: 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]
          });
        }
     }
   }
}

with that 'for loop' i can get the tag and the value: to print them on html side:

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

try this:

all you have to do is to loop through response

.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

You should use the $.ajax() context object here like:

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