php output to javascript array with json

Question

I have a project that spits out a json_encode string of date items.

Looks like this:

<input type="hidden" class="avail_dates" data-id='["12-9-2014", "7-9-2014"]' />

I've tried different things, but because of this project it has to be there, I can't simply do an ajax call and return the json_encode stuff.

So, I need to get the data-id into a javascript array somehow for a datePicker.

Using this works, but it's hard coded:

var availableDates = ["9-9-2014","5-9-2014","7-9-2014"];

Using this doesn't do anything:

var availableDatesArray = jQuery('.avail_dates').attr('data-id'); 
//alerting gives ["9-9-2014","5-9-2014","7-9-2014"]

Is there a way to convert the string into an array that works?

I can change the way the data gets into the data-id, or the way jquery interacts with the element, but I can't add a separate ajax query just for this, it has to come from that data-id.

var availableDates = ["9-9-2014","5-9-2014","7-9-2014"]; 
function dates(date){
 dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
 console.log(dmy+' : '+(jQuery.inArray(dmy, availableDates)));
 if (jQuery.inArray(dmy, availableDates) != -1) {
 return [true, "","Available"];
 } 
 else {
 return [false,"","unAvailable"];
 } 
 return;
}
jQuery('#myDates').datepicker({
changeYear: true,
maxDate: '0',
changeMonth: true,
dateFormat: "mm/dd/yy",
yearRange: '2014:2030',
beforeShowDay: dates, 
onSelect: function(dateText) {
}
});

EDIT: Should have mention I already tried json.parse. It gives an "unexpected number" error.

EDIT 2: I added the function I'm trying to pass the data too for jQuery datePicker.

• BobbyShaftoe: Similar to: stackoverflow.com/questions/13272406/…
• Alexander O'Mara: I'm unable to reproduce your "unexpected number" error using JSON.parse. Can you provide a jsfiddle?
• charlietfl: @David, JSON.parse works fine here using html shown jsfiddle.net/js3qnae1
• Kevin: @David, well most likely there is some missing piece you're not telling us, as it stands, using your example, using JSON.parse, and .data will work just fine
• David: see edits, I added the functions I'm using to pass it to. When it's hard coded it works fine, dymanically not at all. json.parse gives an error

Answer 1

Yes you can, use JSON.parse. Like this:

var availableDatesArray = jQuery('.avail_dates').attr('data-id'); 
availableDatesArray = JSON.parse(availableDatesArray);
console.log(availableDatesArray);

Or much better suggestion of @charlie

var availableDatesArray = jQuery('.avail_dates').data('id'); // much better

• charlietfl: no need to use JSON.parse(), if use jQuery.data() will read it as array if it is valid JSON and parse it internally
• David: Should have mention I already tried json.parse. It gives an "unexpected number" error
• David: Doesn't work. Formats as "9-9-2014,5-9-2014,7-9-2014", apparently I need the brackets and double quotes for this function to work
• Kevin: @David what is the origin of that data anyway? is PHP echoing that?, as your question stands in the current posting, its working fine.
• Alexander O'Mara: @David You have []'s in your example. Are they not present or something you want to remove?

Answer 2

Just use JSON.parse.

Example:

var availableDatesArray = JSON.parse(jQuery('.avail_dates').attr('data-id'));

If you prefer, you can use jQuery.parseJSON.

Example:

var availableDatesArray = jQuery.parseJSON(jQuery('.avail_dates').attr('data-id'));

This is actually how jQuery itself parses JSON in AJAX responses.

Answer 3

Unless I'm misunderstanding your question, you just need to use JSON.parse:

var availableDatesArray = JSON.parse(jQuery('.avail_dates').attr('data-id'));

jQuery('.avail_dates').attr('data-id') is just going to return a string (the contents of the 'data-id' attribute. JSON.parse will actually create a JavaScript object from it.