How to extract json data and append by js for each split element?

Question

I have a json data as below:

Json Data

  {"APPLICABLE_DATE":"2016-01-11,2016-01-12,2016-01-13"} 

Here i am trying to split each date from json and trying to supply for HTML using append. How can i get each date and supply to my HTML

Html to Append

  <input type="text" name="l_date_'+index+'" value="'+available_dates.APPLICABLE_DATE+'" />

JS

 function AddDate_Row_For_Html(available_dates) 
 {
   //available_dates as Json data

   //How can i split dates and create above html 


 }

Answer 1

var x = {"APPLICABLE_DATE":"2016-01-11,2016-01-12,2016-01-13"};
var dates = x.APPLICABLE_DATE;
var date_arr = dates.split(",");

date_arr.forEach(function(el, index){

    $("#any_element").append("Element: " + el + " Index" + index);

});

1. Get the value corresponding to key APPLICABLE_DATE .
2. Use String.prototype.split() to split it by , and to get array of dates.
3. Iterate through this array using Array.prototype.forEach() and append the el to any element in its callback.

Answer 2

Let's complete your function in such way:

function addDate_Row_For_Html(available_dates) // assuming available_dates is raw json
{
     var dataObj = JSON.parse(available_dates);
     var date_arr = dataObj.APPLICABLE_DATE.split(',');

     date_arr.forEach(function(item, i){
        $("#container").append('<input type="text" name="l_date_'+(i+1)+'" value="'+item+'" />');

     });
}

addDate_Row_For_Html('{"APPLICABLE_DATE":"2016-01-11,2016-01-12,2016-01-13"}');