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

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

• javascript
• jquery
• arrays

• Is there a reason you're storing array-syntax as the value of an attribute? – Sampson Commented Dec 4, 2012 at 14:33
• Is that the real code? The double quotes around the [] are going to break it. – Michael Berkowski Commented Dec 4, 2012 at 14:33
• Yes, its the real code. I've been going through someone else's code trying to problem solve a few issues. – wowzuzz Commented Dec 4, 2012 at 14:34
• 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. – Michael Berkowski Commented Dec 4, 2012 at 14:35
• 1 @wowzuzz Show us the actual code, copied and pasted. What you provided here would most definitely cause errors with the unescaped " characters. – Sampson Commented Dec 4, 2012 at 14:35

5 Answers 5

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 ma-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"]

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

Don't put that kind of string in the attribute, you could just put a ma 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(',');

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.

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);