1

I am a beginner programmer and I'm trying to create a dynamically populated playlist from files in a folder. I have found a result here Dynamically populate playlist with JSON from PHP in jPlayer. This would allow me to do what I need.

However, I want to understand why my method does not work. I"m able to get an array into javascript using the myPlaylist variable that looks like the following from console.log.

Array [
    ""title":"Song1","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song1.mp3"",
    ""title":"Song2","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song2.mp3"",
    ""title":"Song3","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song3.mp3"",
    ""title":"Song4","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song4.mp3"", 
    ""title":"Song5","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song5.mp3""
  ]

When I run this and jplayer playlist comes up in the browser it lists 5 items, but lists them all as undefined. Again, I"m sure I'm doing something stupid, but I can't figure out why they are all undefined.

Thanks in advance for your help!

Community
  • 1
  • 1
EngiNeer732
  • 55
  • 8

1 Answers1

0

In order to treat your playlist elements as objects, you need to wrap them with brackets instead of quotes. The final array output should look like this: 

[
    {"title":"Song1","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song1.mp3"},
    {"title":"Song2","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song2.mp3"},
    {"title":"Song3","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song3.mp3"},
    {"title":"Song4","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song4.mp3"},
    {"title":"Song5","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song5.mp3"}
]

Also, I'm not sure how you're preparing the file paths, but you should know that \ is an escape character in JavaScript. You have to either "escape the escape character" by using \\ instead, or else use the escape() and unescape() functions to convert the file paths.

apostl3pol
  • 874
  • 8
  • 15
  • Thanks for the help. However, it still doesn't work. It still shows as undefined. I have my array formatted as follows. Array [ "{"title":"Song1","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song1.mp3"}", "{"title":"Song2","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song2.mp3"}", "{"title":"Song3","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song3.mp3"}", "{"title":"Song4","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song4.mp3"}", "{"title":"Song5","artist":"Choir","mp3":"C:\xampp\htdocs\media\Song5.mp3"}" ] The leading and trailing " are only from console.log. Not there on alert – EngiNeer732 Nov 23 '14 at 20:21
  • I'd need to see the code that's generating the array to know more. Can you put it in a jsfiddle? – apostl3pol Nov 24 '14 at 00:54
  • The link is below. The array is generated using PHP. Then the array is passed into javascript using json_encode(). http://jsfiddle.net/EngiNeer732/2heh1cb8/ – EngiNeer732 Nov 24 '14 at 02:36
  • Okay. I don't have Windows so I can't test this further, but the problem appears to be with how you're constructing the file path, and also that you need to use `JSON.parse()`. See http://jsfiddle.net/2heh1cb8/3/ – apostl3pol Nov 25 '14 at 03:32
  • Sorry for the delay. I've been working on this but still can't seem to get it to work. I can't get the filename or the mp3 file path to populate. I assume I just need to re-write the php function that generates the array in javascript. Also, I thought jplayer playlist accepts JSON formatted arrays as shown in this post. http://stackoverflow.com/questions/8393273/dynamically-populate-playlist-with-json-from-php-in-jplayer Thanks again for your help! I may just have to punt and write it in javascript. Just stubborn and can't understand why this doesn't work when the log format looks good. – EngiNeer732 Nov 26 '14 at 04:39