Convert array as string to array in JavaScript

Question

I have a string variable songs, with the following content from a streaming log file:

[{'url':'https://open.spotify.com/track/0TLAptKgYxe7F0KewWH6X6','title':'I Need A Forest Fire','album':'The Colour In Anything','artist':'James Blake, Bon Iver','coverUrl':'https://i.scdn.co/image/7b8f132a8a91d46cce43b42bd0916f16708c8358','date':'May 21, 2016 at 04:41PM'}, 
{'url':'https://open.spotify.com/track/3cBV8V9zlYNraydyF8NpBY','title':'Dress','album':'Sylvan Esso','artist':'Sylvan Esso','coverUrl':'https://i.scdn.co/image/d64189ee29314326a188f1a334dfd20c085dfb7e','date':'May 22, 2016 at 06:53PM'}, 
{'url':'https://open.spotify.com/track/6W3CjUdc26sI1Y7cmelM5A','title':'Stutter','album':'Good Future','artist':'EMEFE','coverUrl':'https://i.scdn.co/image/10669383f3ca6f90b6692e2da9b6601f020078ff','date':'May 23, 2016 at 12:57AM'}, 
{'url':'https://open.spotify.com/track/1GxNPd5r7D1zChEMuMhue0','title':'Only','album':'Dawn','artist':'RY X','coverUrl':'https://i.scdn.co/image/281bc0be895562e7146b361931330ec5a586d1ba','date':'May 24, 2016 at 01:55AM'}]

How do I convert it to an actual array in JavaScript? I tried JSON.parse() but it failed. Is it because the values are in single-quotes and not double-quotes? (I don't have control over the streaming data file.)

• Avinash Raj: replace single quotes with double quotes (str.replace(/'/g, '"')) and then try JSON.parse
• linktoahref: JSON.parse(JSON.stringify( <Your string> ));

Answer 1

You can use eval()

var songs = `[{'url':'https://open.spotify.com/track/0TLAptKgYxe7F0KewWH6X6','title':'I Need A Forest Fire','album':'The Colour In Anything','artist':'James Blake, Bon Iver','coverUrl':'https://i.scdn.co/image/7b8f132a8a91d46cce43b42bd0916f16708c8358','date':'May 21, 2016 at 04:41PM'}, 
{'url':'https://open.spotify.com/track/3cBV8V9zlYNraydyF8NpBY','title':'Dress','album':'Sylvan Esso','artist':'Sylvan Esso','coverUrl':'https://i.scdn.co/image/d64189ee29314326a188f1a334dfd20c085dfb7e','date':'May 22, 2016 at 06:53PM'}, 
{'url':'https://open.spotify.com/track/6W3CjUdc26sI1Y7cmelM5A','title':'Stutter','album':'Good Future','artist':'EMEFE','coverUrl':'https://i.scdn.co/image/10669383f3ca6f90b6692e2da9b6601f020078ff','date':'May 23, 2016 at 12:57AM'}, 
{'url':'https://open.spotify.com/track/1GxNPd5r7D1zChEMuMhue0','title':'Only','album':'Dawn','artist':'RY X','coverUrl':'https://i.scdn.co/image/281bc0be895562e7146b361931330ec5a586d1ba','date':'May 24, 2016 at 01:55AM'}]`;
var res = eval(songs);
console.log(res);

Refer the following question : Why is using the JavaScript eval function a bad idea?

---

Or replace all single quote with double and then parse it using JSON.parse()

var songs = `[{'url':'https://open.spotify.com/track/0TLAptKgYxe7F0KewWH6X6','title':'I Need A Forest Fire','album':'The Colour In Anything','artist':'James Blake, Bon Iver','coverUrl':'https://i.scdn.co/image/7b8f132a8a91d46cce43b42bd0916f16708c8358','date':'May 21, 2016 at 04:41PM'}, 
{'url':'https://open.spotify.com/track/3cBV8V9zlYNraydyF8NpBY','title':'Dress','album':'Sylvan Esso','artist':'Sylvan Esso','coverUrl':'https://i.scdn.co/image/d64189ee29314326a188f1a334dfd20c085dfb7e','date':'May 22, 2016 at 06:53PM'}, 
{'url':'https://open.spotify.com/track/6W3CjUdc26sI1Y7cmelM5A','title':'Stutter','album':'Good Future','artist':'EMEFE','coverUrl':'https://i.scdn.co/image/10669383f3ca6f90b6692e2da9b6601f020078ff','date':'May 23, 2016 at 12:57AM'}, 
{'url':'https://open.spotify.com/track/1GxNPd5r7D1zChEMuMhue0','title':'Only','album':'Dawn','artist':'RY X','coverUrl':'https://i.scdn.co/image/281bc0be895562e7146b361931330ec5a586d1ba','date':'May 24, 2016 at 01:55AM'}]`;
var res = JSON.parse(songs.replace(/'/g, '"'));
console.log(res);

Answer 2

Replace all single quotes with double and use JSON.parse() like this:

var str = "[{'url':'https://open.spotify.com/track/0TLAptKgYxe7F0KewWH6X6','title':'I Need A Forest \ Fire','album':'The Colour In Anything','artist':'James Blake, Bon\ Iver','coverUrl':'https://i.scdn.co/image/7b8f132a8a91d46cce43b42bd0916f16708c8358','date':'May 21, 2016 at 04:41PM'}, \
{'url':'https://open.spotify.com/track/3cBV8V9zlYNraydyF8NpBY','title':'Dress','album':'Sylvan Esso','artist':'Sylvan Esso','coverUrl':'https://i.scdn.co/image/d64189ee29314326a188f1a334dfd20c085dfb7e','date':'May 22, 2016 at 06:53PM'}, \
{'url':'https://open.spotify.com/track/6W3CjUdc26sI1Y7cmelM5A','title':'Stutter','album':'Good Future','artist':'EMEFE','coverUrl':'https://i.scdn.co/image/10669383f3ca6f90b6692e2da9b6601f020078ff','date':'May 23, 2016 at 12:57AM'}, \
{'url':'https://open.spotify.com/track/1GxNPd5r7D1zChEMuMhue0','title':'Only','album':'Dawn','artist':'RY X','coverUrl':'https://i.scdn.co/image/281bc0be895562e7146b361931330ec5a586d1ba','date':'May 24, 2016 at 01:55AM'}]";
str = str.replace(/'/g, '"');
var strJson = JSON.parse(str);
console.log(strJson);

Try Fiddle

Answer 3

javascript eval will do the work.

var str = "[{'url':'https://open.spotify.com/track/0TLAptKgYxe7F0KewWH6X6','title':'I Need A Forest Fire','album':'The Colour In Anything','artist':'James Blake, Bon Iver','coverUrl':'https://i.scdn.co/image/7b8f132a8a91d46cce43b42bd0916f16708c8358','date':'May 21, 2016 at 04:41PM'},{'url':'https://open.spotify.com/track/3cBV8V9zlYNraydyF8NpBY','title':'Dress','album':'Sylvan Esso','artist':'Sylvan Esso','coverUrl':'https://i.scdn.co/image/d64189ee29314326a188f1a334dfd20c085dfb7e','date':'May 22, 2016 at 06:53PM'},{'url':'https://open.spotify.com/track/6W3CjUdc26sI1Y7cmelM5A','title':'Stutter','album':'Good Future','artist':'EMEFE','coverUrl':'https://i.scdn.co/image/10669383f3ca6f90b6692e2da9b6601f020078ff','date':'May 23, 2016 at 12:57AM'},{'url':'https://open.spotify.com/track/1GxNPd5r7D1zChEMuMhue0','title':'Only','album':'Dawn','artist':'RY X','coverUrl':'https://i.scdn.co/image/281bc0be895562e7146b361931330ec5a586d1ba','date':'May 24, 2016 at 01:55AM'}]"
eval(str)

Another way of doing it

var f = new Function('return ' + str );
var arr = f();

You can check this SO thread for the difference between eval and new Function

• Redu: @AxelH That's a function constructor where the first argument represents the body of the function to be generated. It's kind of an eval() operation in different toilet..
• Kinaan Khan Sherwani: updated answer with the link to eval and Function discussion