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

Question

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.

bas · Accepted Answer · 2021-07-06 08:50:22Z

2

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,
};

edited Jul 6, 2021 at 8:50

answered Jul 6, 2021 at 8:38

bas

15.2k7 gold badges27 silver badges70 bronze badges

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

1 Comment

mhannani Over a year ago

Thank you man, the issue is resolved ! I should run npm run build:backends.

mhannani · Accepted Answer · 2021-07-06 14:26:59Z

0

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
};

edited Jul 6, 2021 at 14:26

answered Jul 6, 2021 at 14:20

mhannani

5131 gold badge6 silver badges23 bronze badges

3 Comments

bas Over a year ago

npm run build works also, because npm run build runs npm run build:js && npm run build:backends.

mhannani Over a year ago

Unfortunately, It didn't for me. from package.json: "build:js": "webpack --mode production" , and

"build:backends": "dash-generate-components ./src/lib/components music_component -p package-info.json --r-prefix '' --jl-prefix ''"

, thank you again for the quick reaction.

mhannani Over a year ago

My bad I was executing: build:js not build 🧓🏼

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related