How to get array of objects in javascript from an array of dictionaries in python?

user_13652942 0
Viewed 178

I'm trying to use an array of dictionaries in python as arguement to a custom dash component and use it as array of objects

in python :

audioList_py = [
    {
        "name": "random",
        "singer": 'waveGAN\'s music',
        "cover":
          'link_1.jpg',
        "musicSrc":
          'link_1.mp3',
    },
    {
        "name": "random",
        "singer": 'waveGAN\'s music',
        "cover":
          'link_2.jpg',
        "musicSrc":
          'link_2.mp3',
    },

 ... etc
]

in Javascript:

audioList1_js = [
        {
            name: "random",
            singer: 'waveGAN\'s music',
            cover:'link_1.jpg',
            musicSrc: 'link_1.mp3',
        },
        {
            name: "random",
            singer: 'waveGAN\'s music',
            cover: 'link_2.jpg',
            musicSrc: 'link_2.mp3',
        },

     ... etc
    ]

Here is snippet of javascript code of the dash custom component:

export default class MusicComponent extends Component {
    render() {
      const {id, audioLists} = this.props;
        return (
            <div>
                <h1>{id}</h1>
                <ReactJkMusicPlayer audioLists={audio_list}/>,
            </div>
        );
    }
}

MusicComponent.defaultProps = {};

MusicComponent.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    audios: PropTypes.array,
    id: PropTypes.string,

};

And using the generated component in python:

app = dash.Dash(__name__)
app.layout = html.Div([
    music_component.MusicComponent(audios=audioList_py),
    html.Div(id='output'),
    ... etc
])

But I got :

TypeError: The `music_component.MusicComponent` component (version 0.0.1) received an unexpected keyword argument: `audios`Allowed arguments: id

What I am doing wrong ?

Any help or advice will be appreciated, Thanks a lot.

custom-component plotly-dash reactjs javascript
2 Answers

Make sure you run npm run build after you make a change to your custom React component. With those proptypes you shouldn't get that error. If I remove the audios proptype I can reproduce that error.

Besides that you pass a value to the audios property:

music_component.MusicComponent(audios=audioList_py)

but you try to retrieve audioLists from props:

const {id, audioLists} = this.props;

Change this to:

const {id, audios} = this.props;

Demo

export default class MusicComponent extends Component {
    render() {
        const {id, audios} = this.props;
        return (
            <div>
                <h1>{id}</h1>
                <ReactJkMusicPlayer audioLists={audios} />
            </div>
        );
    }
}

MusicComponent.defaultProps = {};

MusicComponent.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,

    audios: PropTypes.array,
};
user_90983500

Issue fixed, I should run : npm run build:backends to generate the Python, R and Julia class files for the components, but instead I was executing npm run build:js and this command just generate the JavaScript bundle (which didn't know about the new props).

And set the audios property in the component to be like so:

MusicComponent.defaultProps = {audios: audioList1};

MusicComponent.propTypes = {
    id: PropTypes.string,
    audios: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired
};
user_136529420
Related