Parsing Javascript Array

Question

I have an array as a attribute on a link.

Here is the array

images="["one.jpg","two.jpg"]"

How would I parse through this array and have it read back to me one.jpg,two.jpg?

This is what I am doing now and it is giving me an error back. I don't believe json parsing is whats needed here.

var imgs = $("#"+number).attr("images");
var imgList = jQuery.parseJSON(imgs);

EDIT: ACTUAL CODE

var number = $(this).attr("data-id");
var url = $("#"+number).attr("url");
$(".portfolio-url").html("<h3 class='pacifico'>url</h3><p><a href='http://"+url+"' target='_blank'>"+url+"</a></p>");
var cli = $("#"+number).attr("client");
$(".portfolio-client").html("<h3 class='pacifico'>client</h3><p>"+cli+"</p>");
var pgs = $("#"+number).attr("pages");
pgs = pgs.replace(/\[/g,"");
pgs = pgs.replace(/\]/g,"");
pgs = pgs.replace(/\"/g,"");
var pages = new Array();
pages = pgs.split(",");
var img = $("#"+number).attr("images");
img = img.replace(/\{/g,"");
img = img.replace(/\}/g,"");
img = img.replace(/\"/g,"");
var images = new Array();
images = img.split(",");
var portSkills = "<h3 class='pacifico'>skills</h2>";
portSkills += "<p>";
for (i=0;i<pages.length;i++) {
if (pages[i] != "Clients") {
var finalPage = "";
for (j=0;j<pages[i].length;j++)
{
var ch = pages[i].charAt(j);
if (ch == ch.toUpperCase()) {
finalPage += " ";
}
finalPage += pages[i].charAt(j);
}
portSkills += finalPage+"<br />";
}
}
portSkills += "</p>";
$(".portfolio-skills").html(portSkills);
var imgs = $("#"+number).attr("images");
var imgList = jQuery.parseJSON(imgs);

Basically, its looping through parameters

• Sampson: Is there a reason you're storing array-syntax as the value of an attribute?
• Michael Berkowski: Is that the real code? The double quotes around the [] are going to break it.
• wowzuzz: Yes, its the real code. I've been going through someone else's code trying to problem solve a few issues.
• Michael Berkowski: Start by changing either the outer or the inner quotes to single quotes. Then, you can retrieve the attribute value (your code is correct), and then you can parse the JSON into an array. Once the quoting is fixed, your method should work as you have already attempted it.
• Sampson: @wowzuzz Show us the actual code, copied and pasted. What you provided here would most definitely cause errors with the unescaped " characters.

Answer 1

I'd encourage you to modify your attribute-value format to something along these lines:

<div id="one" data-images="file1.jpg,file2.jpg">Foo, Bar</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Note here I'm using a valid data- attribute, and the value of this attribute is just a list of comma-separated filenames. No need to place [ or ] in this value in order to get an array.

Now, to get your array:

var images = $("#one").data("images").split(",");

Which results in the following array:

["file1.jpg", "file2.jpg"]

Answer 2

for (var i = 0; i < images.length; i++) {
 var image = images[i];
}

• Michael Berkowski: You've also missed the point. it's a string that takes the form of an array literal.
• Slevin: I thought he mistyped the code, cause he actually spoke about an array :)

Answer 3

Don't put that kind of string in the attribute, you could just put a comma separated string instead. (And you could use data attribute.)

For example:

<a id="foo" data-images="one.jpg,two.jpg">foo</a>

then you could get it by:

var imgList = $('#foo').data('images').split(',');

Answer 4

For starters:

images = ["one.jpg", "two.jpg"]; is an array, yours is invalid.

to have it read back to you

for(image in images)
 console.log(images[image]);

or the jQuery way

$.each(images, function(index){
 console.log(images[index]);
});

if its a String that you need to split then but that is of course if the string looks like this

var img = '["one.jpg", "two.jpg"]';
var images = img.replace(/\[|\]|"| /g,'').split(',');

this will give you an array parsed from a string that looks like an array.

• Michael Berkowski: You're missing the point. The value is a string stored in an attribute called images
• Henrik Andersson: Yeah, I hit the send button a bit too quick :)

Answer 5

Give the join() method a try:

images.join();
=> "one.jpg,two.jpg"
images.join(", ");
=> "one.jpg, two.jpg"

Edit: To declare your Array:

var images = ["img1", "img2", "img3"];

or

var images = new Array("img1", "img2", "img3");

Then you can use the join() method, and if that still doesn't work, try the following:

// should be true, if not then you don't have an Array
var isArray = (images instanceof Array); 

• wowzuzz: When I do this it gives me the error code in developer tools. Uncaught TypeError: Object ["Equipment-L.jpg","Equipment-web2-L.jpg","EquipmentL.jpg"] has no method 'join'
• knownasilya: How are you declaring your array? See this MDN guide on arrays.