How to grab data from JSON array and put into a listview?

Question

Hi i am new to javascript programming, i am making a dropdown list view(picker view) in jquery mobile, for the data to be in that picker view i created a json array. the problem is that i need the code for when i click on a particular list view it should run a js function which grabs the data from the json array and put that in the picker(list) view. my html code is:

<form method="get" name="datarange">
  <div data-role="fieldcontain">
     <select id="number" name="day you need" onclick="dayLoad();">
       <option value="select-value" selected="selected" >--Select Day--</option>
       <option value="01">/* here i want my data from array "day"/*</option>
       <option value="02">/* here i want my data from array "day"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="time" name="time you need">
       <option value="select-value" selected="selected">--Select Time--</option>
       <option value="101">/* here i want my data from array "Time" /*</option>
       <option value="102">/* here i want my data from array "Time"/*</option>
       <option value="103">/* here i want my data from array "Time"/*</option>
       <!--  etc. -->
       <option value="116">/* here i want my data from array "Time"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="pid" name="pid you need">
       <option value="select-value" selected="selected">--No PID allocation found--</option>
       <option value="301">/* here i want my data from array "pid"/*</option>
       <option value="302">/* here i want my data from array "pid"/*</option>
     </select>
  </div>
  <div data-role="fieldcontain">
     <select id="jus" name="justification you need">
       <option value="select-value" selected="selected">--Select Justification--</option>
       <option value="201">Project Work</option>
       <option value="202">Client Call</option>
       <option value="203">Team Meeting<option>
       <option value="204">Others</option>
     </select>
  </div>
</form>
<div id="display" class="rss-box"></div>

In my js file:

var day=[
       {"dayTime" : "Today-Drop"},
       {"dayTime" : "Tomorrow-Pick up"}];  
var time=[
        {"PM" : "3:00 PM"},
        {"PM" : "4:00 PM"},
        {"PM" : "7:30 PM"},
        {"PM" : "9:00 PM"},
        {"PM" : "10:15 PM"},
        {"PM" : "11:00 PM"}];

var Pid=[
        {"pidno" : "7813"},
        {"pidno" : "8133"},];


function dayLoad(){//i need the code to put in this function which grabs the data from array and gonna put into the listview}

Answer 1

If you're inserting the correctly as explained by some of the other answers the problem may still be that jquery mobile is not modifying the dom so that it renders according to jquery mobile stylesheets. This happens because jquery mobile only does this kind of transformation when the page is loaded.

However jquery mobile does provide a method to modify content that has been inserted into the dom by a javascript function. This method is trigger('create'). You need to select the element that has been inserted into the dom with $ and then call trigger in the following way:

$("css selector for the element").trigger('create')

Applied to the day dropbox this would be done like this:

$("#number").trigger('create')

Answer 2

Something like:

function appendNodes( target, data, key ) {
    var div = document.getElementById(target);
    for (var i = 0; i < data.length; i++ ) {
        var option = document.createElement("option");
        option.appendChild( document.createTextNode(data[i][key]) )
        option.value = i;
        div.appendChild(option);
    }
}

function dayLoad(){
    appendNodes( "number", day, "dayTime" );
    appendNodes( "time", time, "PM" );
    appendNodes( "pid", Pid, "pidno" );
}

Answer 3

Just iterate throught your data, json (JavaScript Object Notation) is javascript:

function dayLoad() {
    for (var key in day) {
        $('#number').append($("<option/>", {
            value: key,
            text: day[key].dayTime
        }));
    }
}

or in jQuery fluent style:

function dayLoad() {    
    $.each(day, function (key, value) {
        $('#number')
            .append($("<option></option>")
            .attr("value", key)
            .text(value.dayTime));
    });
}

I didn't understand why you are using onclick event, maybe you should take a look at jquery ready method . Initialization may look like this:

$(document).ready(function () {        
            dayLoad();        
    });

[UPDATE see @Calavoow comment] for mobile use $(document).bind('pageinit'), not $(document).ready()