Develop Reference

Unable to bind json data (api result) to dropdown using jquery/js in MVC

I want to bind json data returned by API to dropdownlist.
but unable to fetch value id and name.
Json Format :
{
"categories": [
{
"categories": {
"id": 1,
"name": "CatOne"
}
},
{
"categories": {
"id": 2,
"name": "CatTwo"
}
}
]
}
I am returning JsonResult, using
return Json(responseData, JsonRequestBehavior.AllowGet);
and in Jquery call ,I am using
$.ajax({
type: "POST",
url: "/Home/City",
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
success: function (jsonObj) {
var listItems = "";
//here I want to get id and name
});
}
});

You can populate dropdown from your json like following.
var json = {
"categories": [
{ "categories": { "id": 1, "name": "CatOne" } },
{ "categories": { "id": 2, "name": "CatTwo" } }
]
}
$.each(json.categories, function () {
$('select').append('<option value="' + this.categories.id + '">' + this.categories.name + '</option>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

You can just stick a break point (or debugger; statement) inside your success callback. Then you can inspect your jsonObj and it'll tell you exactly what you need to know.
In this case, you should be able to iterate on jsonObj.categories, and your id and name properties will be accessible via jsonObject.categories[i].categories.id and jsonObject.categories[i].categories.name
So your success method will look something like:
for(var i = 0; i < jsonObj.categories.length; i++) {
var category = jsonObj.categories[i].categories;
var id = category.id;
var name = category.name;
}
I would also suggest formatting your json differently, as other answers have suggested.

Shopify Ajax API is not accepting properties

I am trying to pass three products through the shopify ajax api. It sends over the variant id and quantity but not the properties. the code is below. if I add request.properties to the Shopify.addItem function it stops after one item and gives me a pop saying that one item has been added to the cart. It does not add the other two items nor does it redirect. If I remove request.properties from the Shopify.addItem function it adds all three items to the cart but with no properties.
FINAL CODE Revised from #miglio code
var FreeTrial={
data:[],
ini:0,
total:0,
addItem:function(qty,id,properties,callback) {
var params = {quantity:qty,id:id};
if(properties != false){
params.properties = properties;
}
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
async:false,
data: params,
success: function(){
if(typeof callback === 'function'){
callback();
}
},
error: function(){}
});
},
recursive:function(){
FreeTrial.addItem(FreeTrial.data[FreeTrial.ini].qty,FreeTrial.data[FreeTrial.ini].id,FreeTrial.data[FreeTrial.ini].properties,function(){
//console.log(FreeTrial.data[FreeTrial.ini]);
FreeTrial.ini += 1;
if(FreeTrial.ini < FreeTrial.total){
FreeTrial.recursive();
}else{
//return false;
document.location.href = '/cart';
}
});
},
begin:function(){
/* SET YOUR ARRAY QTY's' ID's*/
FreeTrial.data = [
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": {
"recurring_price": "200.00",
"shipping_interval_frequency": "30",
"shipping_interval_unit_type": "days",
"subscription_id": "12599"
}
}
];
FreeTrial.total = FreeTrial.data.length;
FreeTrial.recursive();
}
}
FreeTrial.begin();

To add properties I use this function and work fine for me.
addItem=function(qty,id,properties,callback) {
var params = {quantity:qty,id:id};
if(properties != false){
params.properties = properties;
}
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: params,
success: function(){
if(typeof callback === 'function'){
callback();
}
},
error: function(){}
});
}
//Example :
var qty = 1;
var id = 123456;//variant_id
var properties: {
"recurring_price": "12",
"shipping_interval_frequency": "34",
"shipping_interval_unit_type": "56",
"subscription_id": "78"
}
//
addItem(qty,id,properties,function(){
console.log('done');
});
Well, I did this code for multiple items and a save in a gist:
multiple add to cart

Any POST to the endpoint url: '/cart/add.js', can include properties. If the properties are setup correctly, it works like a charm. You can assign as many properties to a variant as you want. Has been working for what, 5 years now? This function has been working for that long at least... no trouble.
addItemWithProperties: function(variant_id, quantity, properties, callback) {
var quantity = quantity || 1;
if(properties) {
var data = properties.join("&")+"&quantity="+quantity+"&id="+variant_id;
} else {
var data = "quantity="+quantity+"&id="+variant_id;
}
var params = {
type: "POST",
url: "/cart/add.js",
data: data,
dataType: "json",
success: function(line_item) {
if((typeof callback) === "function") {
callback(line_item)
} else {
Shopify.onItemAdded(line_item)
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.api.onError(XMLHttpRequest, textStatus)
}
};
$.ajax(params)
},

edit. I guess you could do the call manually
add to cart
Considering the Shopify.addItem() function is, straight off their API I'm not sure you can simply add a parameter like that.
My guess is that the extra parameter has the effect that the function doesn't run.

jquery Datatables using JSON

I am using datatables jQuery plugin to show the data nicely withing a table. I am making an ajax request on a click of a button which is then running a php script returning a JSON.
Here's how my code:
$('#searchInSugar').button().on('click', function (e) {
var searchTxt = $('#searchEntry').val();
var moduleName = $('#moduleSelect').val();
if (!searchTxt.trim() || searchTxt.length === 0) {
alert("Please provide some search text string..");
return false;
}
if (moduleName === "select") {
alert("Please select a module..");
return false;
}
$.ajax({
type: 'POST',
url: "fetch_records.php",
data: {"searchText": searchTxt,
"module": moduleName},
success: function (data) {
obj = JSON.parse(data);
$(document).ready(function () {
$('#dialog_entry_table').DataTable({
"info": false,
data: data,
columns: [
{"records": "id"},
{"records": "name"},
{"records": "account_name"}
]
});
});
},
error: function (exception) {
alert('Exeption:' + exception);
}
});
});
Here's the json that I get from the php script.
{
"next_offset":-1,
"records":[
{
"id":"a54e81f8-72b2-ae9b-d526-5608761a28e8",
"name":"Mr. James Smith",
"date_modified":"2015-09-27T23:52:29+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"b8ec2e0a-ade1-f70f-d722-56098e5c4370",
"name":"james bond",
"date_modified":"2015-09-28T22:50:56+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"4de93888-155c-7e59-9c4b-56058f1b7ce9",
"name":"Mr. James Bond",
"date_modified":"2015-09-28T01:50:49+00:00",
"account_name":"OSSG",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
}
]
}
Now, I ONLY WANT TO SHOW id, name and account_name IN THE TABLE, But I am having a hard time achieving this, could someone help/advise what I am doing wrong here.
This is the error I am getting:

Try:
var dt = [];
$.each(data.records,function(i,v) {
dt.push([v.id,v.name,v.account_name]);
});
$('#dialog_entry_table').DataTable({
"info": false,
data: dt,
columns: [
{"title": "id"},
{"title": "name"},
{"title": "account_name"}
]
});
jsfiddle: https://jsfiddle.net/bwqfq2gr/1/

Array not passing from Javascript to MVC

I'm trying to pass an array from javascript back into my MVC app. There is a console.log(selected) in the javascript and it outputs an array of data:
["<img src="https://owlexpress.kennesaw.edu/stugifs/open.gif">", "MATH 1190/01 - Calculus I", "84528", " 4.000", "Full Term", "40", "34", "6", "0", "0", "0", "Kennesaw Campus", "Classroom - 100%", "Mathematics & StatisticsRoom 108", "8:00 am - 9:10 amLecture", "Aug 17, 2015", "Dec 14, 2015", "Xiaohui Rebecca Shi (P)", ""]
But when the breakpoint in the controller hits I see that selectedClassesArray == null
Javascript:
$('#WatchButton').on('click', function (e) {
var selected = [];
$("tr.selected").each(function () {
$(this).find('td').each(function(){
selected.push($(this).html());
});
});
console.log(selected);
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
// I have tried setting data both ways with the same result:
//data: { selectedClassesArray: selected },
data: [selected],
traditional: true,
success: function (data) { alert("SUCCESS"); }
});
});
ViewModel:
public class SelectedClassesArray
{
public string[] arrayOfClasses { get; set; }
}
Controller ACtion:
//Had to set ValidateInput to false since one of the strings contains < (it errored without this)
[HttpPost, ValidateInput(false)]
public ActionResult watchClasses(IEnumerable<SelectedClassesArray> selectedClassesArray)
{ //Breakpoint here shows that selectedClassesArray is null
foreach (var item in selectedClassesArray)
{
Console.WriteLine(item.ToString());
}
return View();
}

Your action is expecting a List of arrays:
watchClasses(IEnumerable<SelectedClassesArray> selectedClassesArray)
You probably want to get only the array, which is in the view model:
watchClasses(SelectedClassesArray selectedClassesArray)
And what #taxicala said makes sense, try passing only the array, not an array inside another array:
data: { selectedClassesArray: selected }
The posted property name must match the view model parameter's name.

Did you try:
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
// I have tried setting data both ways with the same result:
//data: { selectedClassesArray: selected },
data: selected,
traditional: true,
success: function (data) { alert("SUCCESS"); }
});
Or perhaps the traditional serialization is failing:
$.ajax({
type: "POST",
url: "/ClassSearch/watchClasses",
// I have tried setting data both ways with the same result:
//data: { selectedClassesArray: selected },
data: { selectedClassesArray: selected },
traditional: false,
success: function (data) { alert("SUCCESS"); }
});

loading data in datatable on onchange event

I want to implement function in which data will be loaded into datatable after onChange event. So for that I am trying to implement code as below.
var viewdatatab = $('#dataTablesFeedback').dataTable({
"columns": [
{ "data": "resourceId" },
{ "data": "feedbackRecommendation" },
{ "data": "technicalSkillGaps" },
{ "data": "technicalAvgSkills" },
{ "data": "feedbackType" },
{ "data": "feedbackId" },
{ "data": "isNew" },
]
});
Which is creating my datatable layout and I am calling below function on dropdown change event is :
function loadFeedback(){
viewdatatabJS = $('#dataTablesFeedback').dataTable({
"processing" : true,
"retrieve" : true,
"ajax" : "/nhp/rest/feedback/viewFeedback",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "userName", "value":employeeId } ,
{ "name": "resourceId", "value":mentorDataJson[$('#dropDownId').val()].resourceId });
},
});
}
Where I am passing some parameter in aoData.push but my URL is not getting called.

I Solved the issue by simply implementing datatable properties. i wrote my code of datatable
var viewdatatab = $('#dataTablesFeedback').dataTable({
"columns": [
{ "data": "resourceId" },
{ "data": "feedbackRecommendation" },
{ "data": "technicalSkillGaps" },
{ "data": "technicalAvgSkills" },
{ "data": "feedbackType" },
{ "data": "feedbackId" },
{ "data": "isNew" },
]
});
in jsp document.ready(function()) and then on my request call of drop down change event i wrote below code on my javascript function.
$.ajax({
url : "",
type: 'GET',
contentType: "application/json",
data: {
'userName': value,
'resourceId' : value,
},
success: function(data) {
var table = $('#dataTablesFeedback').DataTable();
table.clear();
table.rows.add(data.data);
table.draw();
});
this way i first clear my datatable and then redraw it using my json which i got from my ajax call.
Thanks