2

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

8
  • Is there a reason you're storing array-syntax as the value of an attribute?
    – Sampson
    Dec 4, 2012 at 14:33
  • Is that the real code? The double quotes around the [] are going to break it. 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
    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. 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
    Dec 4, 2012 at 14:35

5 Answers 5

2

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

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(',');
0
for (var i = 0; i < images.length; i++) {
    var image = images[i];
}
2
  • 1
    You've also missed the point. it's a string that takes the form of an array literal. Dec 4, 2012 at 14:34
  • I thought he mistyped the code, cause he actually spoke about an array :)
    – Slevin
    Dec 4, 2012 at 14:40
0

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.

2
  • 2
    You're missing the point. The value is a string stored in an attribute called images Dec 4, 2012 at 14:34
  • Yeah, I hit the send button a bit too quick :) Dec 4, 2012 at 14:35
0

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); 
2
  • 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'
    – wowzuzz
    Dec 4, 2012 at 14:50
  • How are you declaring your array? See this MDN guide on arrays. Dec 4, 2012 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.