convert string array object into array object - Javascript

Question

I have a flask route where I am trying to pipe a list_object [{}] into a template. It works but the data comes out as a string on the front end. How can I convert the string back into a array_object so I can do stuff with it?

Here is the flask route: app.py

@app.route('/vgmplayer')
def vgmplayer():
    musicdata = music.query.order_by(func.random()).first()
    musicimgdata = musicimages.query.filter_by(gamealbum = musicdata.gamealbum).order_by(func.random()).first()
    if musicimgdata == None:
        musicimgdata = "https://media.idownloadblog.com/wp-content/uploads/2018/03/Apple-Music-icon-003.jpg"
    else:
        musicimgdata = musicimgdata.gameart
    musicobject = [{
    "name": musicdata.gametrackname,
     "path": musicdata.gamelink,
     "img": musicimgdata,
     "album": musicdata.gamealbum,
     "artists": musicdata.artists,
     "platform": musicdata.platform,
     "year": musicdata.year,
     "genre": musicdata.genre
    }]
    print(musicobject)
    return render_template("musicplayer.html",rvgm = musicobject)

but when I get back the template: musicplayer.html

<script type="text/javascript">
      function grvgm(){
        All_song = "{{ rvgm|safe }}"
        return All_song
      }
    </script>

it comes in a string:

Example data:
All_song = grvgm()
"[{'name': '10 - M Stage Jungle B', 'path': 'https://vgmsite.com/soundtracks/zhuzhu-pets-quest-for-zhu-20…-nds-gamerip/ebulpznnyw/10%20-%20M%20Stage%20Jungle%20B.mp3', 'img': None, 'album': 'ZhuZhu Pets - Quest for Zhu', 'artists': None, 'platform': 'DS', 'year': '2011', 'genre': None}]" 

I would need the list_dict to not have the qoutes at the end so that the javascript can treat it as an array.

EDIT: I forgot to mention that I tried:

function grvgm(){
        All_song = "{{ rvgm }}"
        All_song = JSON.parse(All_song)
        return All_song
      }

SyntaxError: JSON.parse: expected property name or '}' at line 1 column 3 of the JSON data

Answer 1

Turns out the string was not a valid json format as @Andy pointed out. I had to use a different method. Instead of piping the list_dict into the template, I used a get request to get the list_dict into the front end so I can do stuff with it.

app.py

@app.route('/grvgm', methods=['GET'])
def grvgm():
    musicdata = music.query.order_by(func.random()).first()
    musicimgdata = musicimages.query.filter_by(gamealbum = musicdata.gamealbum).order_by(func.random()).first()
    if musicimgdata == None:
        musicimgdata = "https://media.idownloadblog.com/wp-content/uploads/2018/03/Apple-Music-icon-003.jpg"
    else:
        musicimgdata = musicimgdata.gameart
    musicobject = [{
    "name": musicdata.gametrackname,
     "path": musicdata.gamelink,
     "img": musicimgdata,
     "album": musicdata.gamealbum,
     "artists": musicdata.artists,
     "platform": musicdata.platform,
     "year": musicdata.year,
     "genre": musicdata.genre
    }]
    print(musicobject)
    musicobject = json.dumps(musicobject)
    return musicobject

musicplayer.js

async function load_track(index_no){
    fetch('/grvgm')
    .then(response => response.json())
    .then(All_song => {
        console.log(All_song)
        // stuff goes here
})

Answer 2

By using the JSON.parse() method, you can easily parse the string.

Example:

JSON.parse(All_song)
// returns an array