Blank when passing data to bootsrap modal with ajax

Question

I need help in passing data to modal bootstrap with ajax in Codeigniter

modal bootstrap has blank input when i passing data to modal. I know my ajax work because if i passing static data, modal is showing it. But if i passing data from GET, modal input always blank

I am new in ajax so i think my JSON parsing is wrong or something.

Model :

public function getEditContent($table,$field,$key)
{
    return $this->db->get_where($table, array($field => $key))->result();
}

Controller :

public function Test()
{
    $this->load->library('Datatables');

    $this->_header();
    $this->load->view('Front/v_test',$data);
    $this->_footer();
}

public function testdata()
{
    $data['result'] = $this->Model->getEditContent('arsip','idsurat','1');
    echo json_encode($data);
}

View :

<div class="col-xs-12 col-sm-12">
	<!-- Button HTML (to Trigger Modal) -->
	<a href="javascript:void(0)" onclick="openModal()">
		<span class="glyphicon glyphicon-pencil"></span></a>
</div>

<!-- Modal HTML -->
<div id="form-content" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>Input Data Surat Keluar</h3>
			</div>
			<div class="modal-body">
				<?php echo form_open('Tambah/insert_suratkeluar'); ?>
				<div class="form-group">
					<label for="inputEmail">No Surat</label>
					<input type="text" class="form-control" name="nosurat" placeholder="No Surat" id="nosurat">
				</div>
				<div class="form-group">
					<label for="tglkirim">Tanggal Kirim</label>
					<div class='input-group date' id='datetimepicker1'>
						<input type='text' class="form-control" name="tglkirim" placeholder="Masukkan Tanggal Kirim" />
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
				</div>
				<script type="text/javascript">
					$(function ()
						{
							$('#datetimepicker1').datetimepicker(
								{
									format: 'YYYY/MM/DD'
								});
						});
				</script>
				<div class="form-group">
					<label for="inputPassword">Alamat</label>
					<input type="text" class="form-control" name="alamat" placeholder="Alamat" id="alamat" value="">
				</div>
				<div class="form-group">
					<label for="notelp">No Telp</label>
					<input type="text" class="form-control" name="notelp" placeholder="No Telp" value="">
				</div>
				<div class="form-group">
					<label for="inputPassword">Email</label>
					<input type="email" class="form-control" name="email" placeholder="Email" value="">
				</div>
				<div class="form-group">
					<label for="inputPassword">Nama Perusahaan</label>
					<input type="text" class="form-control" name="nmusaha" placeholder="Nama Perusahaan" value="">
				</div>
				<div class="form-group">
					<label for="inputPassword">Deskripsi</label>
					<input type="text" class="form-control" name="deskripsi" placeholder="Deskripsi" value="">
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">Submit</button>
					<a href="#" class="btn" data-dismiss="modal">Cancel</a>
				</div>
				<?php echo form_close(); ?>
			</div>
		</div>
	</div>
</div>

Jquery :

function openModal()
{
    $.ajax(
        {
            url:"testdata/",
            type : 'GET',
            dataType : 'json',
            success:function (result)
            {
                $('#nosurat').val(result.nosurat);
                $('#alamat').val("Test Alamat");
                $('#form-content').modal('show');
            },

        });

}

JSON i get in firebug :

Answer 1

If you check response, it is returned object consisting property result of array. So you can reach wanted value by passing appropriate key:

$('#nosurat').val(result[0].nosurat);