Parsing JSON items using Angular

Question

I have a JSON object and I want to give the values of the properties to 4 of my variables using Angular, which are the following:

authorText : string;
titleText : string;
durationText : string;
genreText : string;

And here is the JSON:

"{"n":{  
   "_id":1101,
   "labels":[  
      "Song"
   ],
   "properties":{  
      "duration":"214000",
      "author":"Shawn Mendes",
      "genre":"pop",
      "title":"In My Blood"
   }
}
}"

I tried using this and similar solutions to this:

Object.keys(editData).forEach(function (key) {
  console.log(key);
  if(key === "author"){
     this.authorText = editData[key];
  }
  console.log( key , editData[key] );
});

But the key is always 0 for some reason.

EDIT Added the image of the JSON: The string I printed before was done as following : Saving it as global variable and then using JSON.stringify(temp1);.

I get this when I try to do it TS2339: Property 'n' does not exist on type 'any[]' — Richard
– Richard, Commented Nov 29, 2018 at 18:34
Your JSON looks malformed in that case. Please log the JSON to the console and add the exact structure of the JSON. Maybe add an image of the console log of editData to the question. — SiddAjmera
– SiddAjmera, Commented Nov 29, 2018 at 18:36
Looks like your objects is contained in an array. You would need to iterate through that array to access n, if you are sure it's a single object in that array you can just do editData[0].n.properties — penleychan
– penleychan, Commented Nov 29, 2018 at 18:44

SiddAjmera · Accepted Answer · 2018-11-29 18:47:41Z

You can use this:

const { duration, author, genre, title } = this.editData[0].n.properties;
this.song = {
    authorText: author,
    titleText: title,
    durationText: duration,
    genreText: genre
};

Here, we're destructuring the properties from the properties key and just assigning them to the song Object's keys one by one.

A better thing to do would be just to name the fields as duration, author, genre, and title. Then you can simply do something like this:

export interface Song {
  author: string;
  title: string;
  duration: string;
  genre: string;
}

And in your function:

this.song = { ...editData[0].n.properties };

Here, we're using the spread operator(...) to spread the properties object's keys and assign them to the song property on your Component Class.

Here's a Sample StackBlitz for your ref.

Indeed! :D I got some help from your stackblitz implementation though. Didn't took much time to just wrap the object around in an array. :)

DeborahK · Accepted Answer · 2018-11-29 18:40:32Z

You can just do this:

this.song = this.editData.n.properties;

I have a stackblitz demonstrating it here: https://stackblitz.com/edit/angular-udmdqr

The basic code is here:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{song.author}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  song: Song;
  editData = {
    "n": {
      "_id": 1101,
      "labels": [
        "Song"
      ],
      "properties": {
        "duration": "214000",
        "author": "Shawn Mendes",
        "genre": "pop",
        "title": "In My Blood"
      }
    }
  }

  constructor() {
    this.song = this.editData.n.properties;
  }
}

export interface Song {
  duration: string;
  author: string;
  genre: string;
  title: string
}

I edited the question because the n throws an error - TS2339: Property 'n' does not exist on type 'any[]'

Collectives™ on Stack Overflow

Parsing JSON items using Angular

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related