0

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
PythonKiddieScripterX
  • 440
  • 2
  • 14
  • check this out : [Best way to convert string to array of object in javascript?](https://stackoverflow.com/questions/3473639/best-way-to-convert-string-to-array-of-object-in-javascript) – debugger Sep 18 '22 at 19:32
  • I already tried this and it failed. I should have put that into my post. I will do that now. I am sorry. – PythonKiddieScripterX Sep 18 '22 at 19:46
  • Yes you should also post what you have tried so far – debugger Sep 18 '22 at 19:50
  • 1
    Parsing it won't work because it's not valid JSON. – Andy Sep 18 '22 at 19:53
  • @debugger - I apologize, it totally slipped my mind that I tried this but this was the first thing I tried from a google search and it didn't work so I went on to try other things. I updated the post to show the error. Thanks for idea so far. However, I believe Andy is right - This isn't a Valid JSON, although I am not sure why. I could just make this a get/post request instead of injecting the code into the template, but I figured I can give it an attempt. – PythonKiddieScripterX Sep 18 '22 at 19:57
  • 1
    Instead of manipulating data I prefer to find an alternate way. – debugger Sep 18 '22 at 20:00
  • You are right - I will write another way to do this and give an answer for this situation in particular. I could just use a get request instead. I think the fetch() should do the trick. (But I am open for any ideas) Thanks! – PythonKiddieScripterX Sep 18 '22 at 20:03

2 Answers2

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
})
PythonKiddieScripterX
  • 440
  • 2
  • 14
-1

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

Example:

JSON.parse(All_song)
// returns an array
ProgramProdigy
  • 45
  • 6