Json manipulation TypeScript Angular 2

Question

I come from a Python Background and recently started programming using TypeScript and Angular2. I want to know how to obtain keys from a JSON object using TypeScript. I have a response like so:

response.text()

I pass this object to a function

removeMetaData (my_data: string){
    //(Various manipulation)...etc
}

i have read that I can call a json() method instead of text(). If I do that, what is the type I should use for my_data?

Then, If my JSON looks like this:

{
    "count": 100,
    "next_page": "http://www.test.com/users/?page=2", 
    "prev_page": "http://www.test.com/users/?page=3", 
     "results":[
     {
          "username": "johnny"
     },
     Etc....

     ]

How do I parse that? I've read I might have to use an interface but I don't understand how.

In python it's just response["next_page"] to get the key of a dictionary, then I can assign that value to a variable within the class. That is exactly what I'm trying to achieve within a component.

Thank you.

ADDITION

list() {
    this.requestService.get(this.api_path)
    .subscribe(
    response => this.populate(response.json()),
    error => this.response = error.text()
    )

}

populate(payload: object) {
    this.count = payload.count;
    this.next = payload.next;
    this.previous = payload.previous;
   *payload.results => this.users = payload.results;******
}

Ravinder Kumar · Accepted Answer · 2016-07-12 09:12:49Z

2

Declare an interface which will be used as value object.

export interface IPage
{
 count:number;
next_page:string;
prev_page:string;
results:Array<any>;
...
...
}

var my_data:IPage;

Now assign parsed json value to my_data and access all the properties with '.' operator i.e. my_data.count, my_data.results.

Feel free to throw any question.

answered Jul 12, 2016 at 9:12

Ravinder Kumar

7521 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Rosales Over a year ago

I like your answer, but I want to understand what I'm doing, can you tell me what is wrong with the line marked with stars?

Ravinder Kumar Over a year ago

If 'results' is available in your parsed JSON and 'users' is declared in your class then it is absolutely fine. Just keep in mind that 'users' should have right datatype to accept value from 'results'. If you are using arrow function then it should be like: (payload.results) => this.users = payload.results;

basarat · Accepted Answer · 2016-07-12 07:56:33Z

1

If I do that, what is the type I should use for my_data?

Its just a javascript object.

As an example if you json looks like:

{
  "foo": {
   "bar": "bas"
  }
}

Then in the parsed json (in variable someObj) the value someObj.foo.bar would be bas 🌹

answered Jul 12, 2016 at 7:56

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

Json manipulation TypeScript Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related