Javascript - fetch

Question

Im quite new to programming and I'm stuck with a problem.

This is my code :

         fetch('https://feed.tunein.com/profiles/s9615/nowPlaying')
        .then(response => response.json())
        .then(data => console.log(data))

This is the response I get back :

{
  Header: { Title: 'Radio 1', Subtitle: 'BQL - Muza' },       
  Primary: {
    GuideId: 's9615',
    Image: 'http://cdn-radiotime-logos.tunein.com/s9615q.png',
    Title: 'Radio 1',
    Subtitle: 'Več dobre glasbe'
  },
  Secondary: {
    GuideId: 'o0',
    Image: 'http://cdn-radiotime-logos.tunein.com/s9615q.png',
    Title: 'BQL - Muza',
    Subtitle: 'Radio 1',
    FullScreen: true
  },
  Ads: {
    CanShowAds: true,
    CanShowPrerollAds: true,
    CanShowCompanionAds: false,
    CanShowVideoPrerollAds: false
  },
  Echo: {
    CanEcho: false,
    EchoCount: 0,
    TargetItemId: 's9615',
    Scope: 's9615',
    Url: '',
    FeedTag: 's9615'
  },
  React: {
    CanReact: false,
    TargetItemId: 's9615',
    Scope: 's9615',
    Url: 'https://api.radiotime.com/profiles/me/activities?itemToken=BgwMAAAAAAAAAAAAAAABjyUAAAEMAY8lAAABjyUAAA',
    Reactions: [ [Object], [Object], [Object], [Object], [Object] ]
  },
  Donate: { CanDonate: false },
  Share: { CanShare: true, ShareUrl: 'http://tun.in/selA9' },
  Follow: { Options: [ [Object], [Object] ] },
  Record: { CanRecord: false },
  Classification: {
    ContentType: 'music',
    IsEvent: false,
    IsOnDemand: false,
    IsFamilyContent: false,
    IsMatureContent: false,
    GenreId: 'g141'
  },
  Link: { WebUrl: 'http://www.radio1.si/' },
  Ttl: 18,
  Token: 'eyJwIjpmYWxzZSwidCI6IjIwMjAtMDQtMjRUMjM6NDA6MTAuNzIwNDY4OVoifQ'
}

So I'm trying to extract the current playing song which is stored in Secondary - Title. So how could i extract it?

Thank you for your help and also sorry about my english since it is not my first language!

Answer 1

Instead of console.log(data), access the title by using console.log(data.Secondary.Title)

You will probably then want to do something with the data instead of just log it to the console.

Answer 2

nested objects can be accessed as follows:

const exampleObject = { val0 : {val1: {val2:{val3:"val3"}}}}
const val3 = exampleObject.val0.val1.val2.val3

So, You can simply call :data.Secondary.Title

const data = {
  Header: { Title: 'Radio 1', Subtitle: 'BQL - Muza' },       
  Primary: {
    GuideId: 's9615',
    Image: 'http://cdn-radiotime-logos.tunein.com/s9615q.png',
    Title: 'Radio 1',
    Subtitle: 'Več dobre glasbe'
  },
  Secondary: {
    GuideId: 'o0',
    Image: 'http://cdn-radiotime-logos.tunein.com/s9615q.png',
    Title: 'BQL - Muza',
    Subtitle: 'Radio 1',
    FullScreen: true
  },
  Ads: {
    CanShowAds: true,
    CanShowPrerollAds: true,
    CanShowCompanionAds: false,
    CanShowVideoPrerollAds: false
  },
  Echo: {
    CanEcho: false,
    EchoCount: 0,
    TargetItemId: 's9615',
    Scope: 's9615',
    Url: '',
    FeedTag: 's9615'
  },
  React: {
    CanReact: false,
    TargetItemId: 's9615',
    Scope: 's9615',
    Url: 'https://api.radiotime.com/profiles/me/activities?itemToken=BgwMAAAAAAAAAAAAAAABjyUAAAEMAY8lAAABjyUAAA',
    Reactions: [ [Object], [Object], [Object], [Object], [Object] ]
  },
  Donate: { CanDonate: false },
  Share: { CanShare: true, ShareUrl: 'http://tun.in/selA9' },
  Follow: { Options: [ [Object], [Object] ] },
  Record: { CanRecord: false },
  Classification: {
    ContentType: 'music',
    IsEvent: false,
    IsOnDemand: false,
    IsFamilyContent: false,
    IsMatureContent: false,
    GenreId: 'g141'
  },
  Link: { WebUrl: 'http://www.radio1.si/' },
  Ttl: 18,
  Token: 'eyJwIjpmYWxzZSwidCI6IjIwMjAtMDQtMjRUMjM6NDA6MTAuNzIwNDY4OVoifQ'
}

console.log(data.Secondary.Title)

Warning:

Intermediate nulls can throw errors like "cannot read property Title of undefined". So, you have to handle that situation while accessing. For your case:

const title = data.Secondary?data.Secondary.Title:null
if(title){//do whatever}
else{//handle error}