1

I am building a React app using the Last.fm API. They have used a # tag in the key for the artist image url's, see below. Unfortunately the # is crashing React. I have searched the web and can find nothing on how to escape this character. The "size" key works O.K.

image
:
Array(6)
0
  :
{#text: "https://lastfm- 
img2.akamaized.net/i/u/34s/4b89e84da385d17e6b46c489f46d4522.png",
 size: 
"small"}
1
:
{#text: "https://lastfm- 
img2.akamaized.net/i/u/64s/4b89e84da385d17e6b46c489f46d4522.png",
 size: 
"medium"}
 ..........................

The React code is below:

import React, { Component } from 'react';
import './App.css';
import Title from './components/Title.js';
import Form from './components/Form.js';
import Music from './components/Music.js';

const API_KEY = '.....';
//const SECRET = '......';

  class App extends Component {
     state = {
     name: undefined,
     bio: undefined,
     listeners: undefined,
     image: undefined,
     error: undefined
   }
getMusic = async (e) => {
e.preventDefault();
 const name=e.target.elements.artist.value;
 const api_call = await fetch(`http://ws.audioscrobbler.com/2.0/? 
 method=artist.getinfo&artist=${name}&api_key=${API_KEY}&format=json`)
 const data = await api_call.json();
 console.log(data);
 this.setState({
   name: data.artist.name,
   bio: data.artist.bio.summary,
   image: data.artist.image[1]#text,
   error: ""
  });
  }
  render() {
    return (
      <div className="App">
       <Title />
       <Form getMusic={this.getMusic}/>
       <Music name={this.state.name}
             bio={this.state.bio}
             image={this.state.image}
             error={this.state.error}
       />
      </div>
    );
  }
}

export default App;

Can anyone assist?

Sulthan
  • 128,090
  • 22
  • 218
  • 270
Geoffrey Whittaker
  • 11
  • 2
  • I am having a related problem using python. If I am getting data for more than one artist at a time, the API gives me the same URL and image for every size for every artist. If I just get one artist, there is no pound/hash symbol, however. – jotasprout Jun 02 '19 at 21:26

1 Answers1

3

Simply use the text identifier:

data.artist.image[1]['#text']

If you want to use the dot syntax, the key has to be a valid Javascript identifier.

Sulthan
  • 128,090
  • 22
  • 218
  • 270