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

Is there a reason you're storing array-syntax as the value of an attribute? — Sampson, Dec 04 '12 at 14:33
Is that the real code? The double quotes around the `[]` are going to break it. — Michael Berkowski, Dec 04 '12 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 04 '12 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, Dec 04 '12 at 14:35
This is neither a valid array nor a valid attribute on an element — Mark Schultheiss, Dec 04 '12 at 14:35
@wowzuzz Show us the actual code, copied and pasted. What you provided here would most definitely cause errors with the unescaped `"` characters. — Sampson, Dec 04 '12 at 14:35
This is not your actual code, it will just throw syntax errors. You take it from some HTML, post that HTML. — Shadow The GPT Wizard, Dec 04 '12 at 14:39
@wowzuzz This is your JavaScript. Where is your HTML showing the images attribute? — Sampson, Dec 04 '12 at 15:46

score 2 · Accepted Answer · answered Dec 04 '12 at 15:08

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

score 1 · Answer 2 · answered Dec 04 '12 at 14:38

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(',');

score 0 · Answer 3 · answered Dec 04 '12 at 14:33

0

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

answered Dec 04 '12 at 14:33

Slevin

4,268
12
40
90

1

You've also missed the point. it's a _string_ that takes the form of an array literal. – Michael Berkowski Dec 04 '12 at 14:34
I thought he mistyped the code, cause he actually spoke about an array :) – Slevin Dec 04 '12 at 14:40

Henrik Andersson · Answer 4 · 2012-12-04T14:48:34.830

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.

edited Dec 04 '12 at 14:48

answered Dec 04 '12 at 14:33

Henrik Andersson

45,354
16
98
92

2

You're missing the point. The value is a _string_ stored in an attribute called `images` – Michael Berkowski Dec 04 '12 at 14:34
Yeah, I hit the send button a bit too quick :) – Henrik Andersson Dec 04 '12 at 14:35

score 0 · Answer 5 · edited May 23 '17 at 12:33

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

edited May 23 '17 at 12:33

Community

1
1

answered Dec 04 '12 at 14:45

knownasilya

5,998
4
36
59

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 04 '12 at 14:50
How are you declaring your array? See this [MDN guide on arrays](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array). – knownasilya Dec 04 '12 at 15:29

Parsing Javascript Array

5 Answers5