在JavaScript中访问对象内部的数组时获取“未定义”

Question

I am trying to access time from given date.

Here is HTML

<input type="date" name="fromdate" id="fromdate" onchange="displaytimefromdate(this.value)" />
<div id="timepicker"></div>

Here is Javascript Code:

    var availableTime = {"2014-07-18":["Friday, 02:02:00 - 00:00:00","Friday, 01:01:00 - 01:01:00"],"2014-07-19":["Saturday, 02:02:00 - 00:00:00","Saturday, 01:01:00 - 01:01:00"],"2014-07-20":["Sunday, 02:02:00 - 00:00:00","Sunday, 01:01:00 - 01:01:00"]};

function displaytimefromdate(timefromdate) {
        jQuery('#timepicker').html('<div class="form-group"><div class="radio"><label><input class="form-control input-lg bg-darkBlue fg-white" type="radio" id="timepicker" name="timepicker" /></label>'+availableTime.timefromdate+'</div></div>');
}

Here is JsFiddle :- http://jsfiddle.net/rW73e/

Help would be appreciated.

Thanks

Answer 1

Take a look here:

http://jsfiddle.net/rW73e/2/

I have given a direct string value to timefromdate.

So,

availableTime[timefromdate];

works fine. It has no problem.

Your date object keys are limited to 2 or 3 values which you have included in the availableTime , which map directly to the time. Other dates are not mapped.

If you select other dates which are not present in the availableTime object, it will surely return undefined .

Answer 2

If I understand correctly you are trying to get a value from your json object.

Try:

availableTime[timefromdate] 

instead of:

availableTime.timefromdate

Hope this helps

Answer 3

With bracket notation it's working, however the the object you try to access defined as array.

var availableTime = {"2014-07-18":["Friday, 02:02:00 - 00:00:00","Friday, 01:01:00 - 01:01:00"],"2014-07-19":["Saturday, 02:02:00 - 00:00:00","Saturday, 01:01:00 - 01:01:00"],"2014-07-20":["Sunday, 02:02:00 - 00:00:00","Sunday, 01:01:00 - 01:01:00"]};

function displaytimefromdate(timefromdate) {
    jQuery('#timepicker').html('<div class="form-group"><div class="radio"><label><input class="form-control input-lg bg-darkBlue fg-white" type="radio" id="timepicker" name="timepicker" /></label>'+availableTime[timefromdate]+'</div></div>');
}

http://jsfiddle.net/rW73e/3/

If you want to use the entire block, you should rearrange the object as:

var availableTime = {"2014-07-18":["Friday, 02:02:00 - 00:00:00, Friday, 01:01:00 - 01:01:00"],"2014-07-19":["Saturday, 02:02:00 - 00:00:00, Saturday, 01:01:00 - 01:01:00"],"2014-07-20":["Sunday, 02:02:00 - 00:00:00, Sunday, 01:01:00 - 01:01:00"]};

http://jsfiddle.net/rW73e/4/

... or access the value within the array:

function displaytimefromdate(timefromdate) {
        jQuery('#timepicker').html('<div class="form-group"><div class="radio"><label><input class="form-control input-lg bg-darkBlue fg-white" type="radio" id="timepicker" name="timepicker" /></label>'+availableTime[timefromdate][0]+'</div></div>');

http://jsfiddle.net/rW73e/5/