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.

Similar to: http://stackoverflow.com/questions/13272406/javascript-string-to-array-conversion — BobbyShaftoe, Sep 13 '14 at 02:45
I'm unable to reproduce your "unexpected number" error using `JSON.parse`. Can you provide a jsfiddle? — Alexander O'Mara, Sep 13 '14 at 02:51
@David, JSON.parse works fine here using html shown http://jsfiddle.net/js3qnae1/ — charlietfl, Sep 13 '14 at 02:52
@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 — Kevin, Sep 13 '14 at 02:53
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 — David, Sep 13 '14 at 02:55
@David put it in a fiddle , has already been shown that it can work — charlietfl, Sep 13 '14 at 02:56
@David which language renders the values inside `data-id=""` is it PHP? `data-id=""`? — Kevin, Sep 13 '14 at 02:58
exactly correct. Also, don't know how to include the datePicker library, so.. ya sorry. no fiddle — David, Sep 13 '14 at 02:58
Ghost's example will result in invalid HTML, since the JSON will contain full quotes. Is that exactly what you are doing? — Alexander O'Mara, Sep 13 '14 at 03:00
@David thats odd, should be working fine. anyway, i'l give a long shot: `data=""` — Kevin, Sep 13 '14 at 03:00
@AlexanderO'Mara perfectly acceptable to wrap attribute values in single quotes as shown in OP — charlietfl, Sep 13 '14 at 03:03
json.parse works. There was a bad database entry beginning the array with junk data. The php was trying to strip it out, but it resulted in a javascript error. — David, Sep 13 '14 at 03:04
@charlietfl Not sure I understand what you are saying, but `"`'s are fine for attribute wrapping, putting them unencoded inside an attribute using them (i.e. JSON encoded strings) causes problems. — Alexander O'Mara, Sep 13 '14 at 03:05

score 2 · Accepted Answer · answered Sep 13 '14 at 02:42

2

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

answered Sep 13 '14 at 02:42

Kevin

41,694
12
53
70

3

no need to use `JSON.parse()`, if use `jQuery.data()` will read it as array if it is valid JSON and parse it internally – charlietfl Sep 13 '14 at 02:43
Should have mention I already tried json.parse. It gives an "unexpected number" error – David Sep 13 '14 at 02:48
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 – David Sep 13 '14 at 02:51
@David what is the origin of that data anyway? is PHP echoing that?, as your question stands in the current posting, its working fine. – Kevin Sep 13 '14 at 02:52
@David You have `[]`'s in your example. Are they not present or something you want to remove? – Alexander O'Mara Sep 13 '14 at 02:53
@David thats a good point from Alexander, maybe append it after getting it thru .attr: `var availableDatesArray = '['+jQuery('.avail_dates').attr('data-id')+']';` – Kevin Sep 13 '14 at 02:55
Then the quotes aren't there – David Sep 13 '14 at 02:56

score 2 · Answer 2 · answered Sep 13 '14 at 02:42

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.

score 0 · Answer 3 · answered Sep 13 '14 at 02:44

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.

php output to javascript array with json

3 Answers3