Display Multidimensional array via ajax in laravel - ajax

Question

The form displays data from DB for the entry to be edited. One of the columns is a 2D Array and I do not know how to pass the data.
Tried the normal AJAX display codes
The data coming via COntroller is:
res.credential looks like
[
[
"Facebook","x11111111",
"q1111111","w11111111"
],
[
"Linkedin","x222222222",
"q222222","w222222222222"
],
[
"Twitter","x333",
"q3333333","w3333333"
]
]
The AJAX looks like:
$('.password-edit-btn').on('click', function (){
var client_sel = $(this).data('id');
if (client_sel) {
$.ajax({
type: "GET",
url: "/get_password_data?id="+client_sel,
success: function (res) {
if (res) {
console.log(res.credential);
$("#edit-password-client").empty();
$("#edit-password-client").append('<option>'+ res.client +'</option>');
$('#edit-password-remarks').val(res.remarks);
}
// The problematic area is below
if (res.credential) {
$.each(res.credential, function (key, value) {
console.log(value)
$(".add-hf-accounts").append()
});
}
}
});
}
});
Simply display the data in the div with class "add-hf-accounts".

Answer 1

$.each(res.credential, function (key, value) {
for(var i=0;i<value.length;i++)
{
if(i==0)
{
$(".add-hf-accounts").append('<h2>'+value[i]+'</h2>');
}
$(".add-hf-accounts").append('<li>'+value[i]+'<li>');
}
});
Try It...Will be Work Fine

Answer 2

Thanks a lot for the help guys.
The problem was in parsing. I had to use JSON.parse and then it worked beautifully. Below is the final working answer.
if (res.credential) {
$.each(JSON.parse(res.credential), function (key, value) {
$(".add-hf-accounts").append('<div class="hidden_event"><div class="form-group col-sm-2"><label>Account</label><select class="form-control" name="account[]"><option value="'+ value[0] +'"> '+ value[0] +'</option></select></div><div class="form-group col-sm-3"><label>URL</label><input type="text" class="form-control" placeholder="Accoutn URL" name="url[]" value="'+ value[1] +'"></div><div class="form-group col-sm-3"><label>Username</label><input type="text" class="form-control" placeholder="User Name" name="user[]" value="'+ value[2] +'"></div><div class="form-group col-sm-3"><label>Password</label><input type="text" class="form-control" placeholder="Password" name="password[]" value="'+ value[3] +'"></div><div class="form-group col-sm-1 acc-btn"> <br><button class="btn btn-danger remove " type="button"><i class="glyphicon glyphicon-remove"></i></button></div></div>');
});
}