In my application, I need to make POST requests with this information:
"data": [
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Title","Type":"String","Value": "INPUT VALUE GOES HERE"}"
},
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Director","Type":"String","Value": "INPUT VALUE GOES HERE"}"
},
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Year","Type":"String","Value": "INPUT VALUE GOES HERE"}"
}
]
I have directives that are simply input elements that will get the data to be placed in the "INPUT VALUE GOES HERE" spots.
My question is, can I pre-pend all of this information into the ng-model of my directives so that when I submit my POST request, I can do something like this:
function submitRequest(input){
var dataToSend = [ input.movieTitle, input.movieDirector, input.movieYear];
return $http({
method: 'POST',
data: dataToSend
})
}
The input is a $scope variable that holds the form data collected by all three different directives
I am just unsure how to go about building long query strings like these.
You can set dataToSend to be that data array and just have the values be the appropriate input values. See the code below:
function submitRequest(input){
var dataToSend = [
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Title","Type":"String","Value": input.movieTitle}"
},
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Director","Type":"String","Value": input.movieDirector}"
},
{
"type": "Search",
"thing": "{"Table":"Movie","Field":"Year","Type":"String","Value": input.movieYear}"
}
];
return $http({
method: 'POST',
data: dataToSend
})
}
So I ended up doing what rkho suggested and did this:
var query = {
requestId: "xxxx",
method: "search",
include: "title, director, year"
}
function submitRequest(data) {
query.data = [];
for(var i = 0; i < data.length; i++) {
var queryData = {
data: {
table: data[i].table || "default",
field: data[i].field || "default",
type: data[i].type || "default",
value: data[i].value
}
}
queryData["data"] = angular.toJson(queryData["data"]);
query.data.push(queryData);
}
return $http({
method: 'POST',
url: 'URL GOES HERE',
data: query
})
}
This way, it's a little more dynamic.
Related
I have a data variable holding an object like this:
{
"details": {
"id": 10,
"name": John Doe,
"hobbies": [{
"id": 1,
"name": "Football"
},
{
"id": 2,
"name": "Badminton"
},
{
"id": 3,
"name": "Running"
}
],
"dob": 1989-12-31
}
}
I retrieve it using this AJAX request:
$.ajax({
type: 'POST',
url: "{{ route('askdata') }}",
dataType: 'json',
data: { 'id': $('#member_id').val(), },
success: function(data) {
$('#id').val(data.details.id);
$('#name').val(data.details.name);
$('#dob').val(data.details.dob);
$('#hobbies').val(JSON.stringify(data.details.hobbies, ['name']));
}
});
I get a value in the hobbies input like this:
[{"name":"Football"},{"name":"Badminton"},{"name":"Running"}]
How can I change this to get the values like Football, Badminton, Running?
Your current logic is building a JSON string from the hobbies array. To get the output you want you can use map() to build an array of the hobby names which you can then join() together to form a single string:
let data = {"details":{"id": 10,"name": 'John Doe',"hobbies": [{"id": 1,"name": "Football"},{"id": 2,"name": "Badminton"},{"id": 3,"name": "Running"}],"dob": '1989-12-31'}}
$('#hobbies').val(data.details.hobbies.map(o => o.name).join(', '));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="hobbies" size="25" />
Also note that your data object is missing some quotes around the name and dob properties, but I assume that was just a typo in the question otherwise you'd get no output at all.
The best solution is :
$.ajax({
type: 'POST',
url: "{{ route('askdata') }}",
dataType: 'json',
data: { 'id': $('#member_id').val(), },
success: function(data) {
const { details: {id, name, dob, hobbies} } = data
$('#id').val(id);
$('#name').val(name);
$('#dob').val(dob);
$('#hobbies').val(JSON.stringify(hobbies.map(hobby => {
return {name: hobby.name}
})));
}
});
In the controller I need to receive two parameters (detail and test), one is a List of a custom objects, the other is a string, I'm able two pass only one parameter (list of objects) when pass both I receive null values in the controller.
Resulting Json to controller:
[{
"detail": [{
"tag": "PIC330_620%2F_.PV_Out%23Value",
"color": "%2331c63e"
}, {
"tag": "A330_10%2F_.FbkFwdOut%23Value",
"color": "%238edeed"
}, {
"tag": "TIC330_603%2F_.PV_Out%23Value",
"color": "%23e8ea62"
}, {
"tag": "TI330_600%2F_.PV_Out%23Value",
"color": "%23f7cbb4"
}, {
"tag": "TIC311_602%2F_.MV%23Value",
"color": "%23ef935d"
}, {
"tag": "TIC311_602%2F_.PV_Out%23Value",
"color": "%23f28a9b"
}, {
"tag": "TIC310_600%2F_.MV%23Value",
"color": "%2385f968"
}, {
"tag": "TIC310_605%2F_.PV_Out%23Value",
"color": "%2308d687"
}],
"test": "lolo"
}]
//Generate list of objects
function getViewDetail() {
var details = [];
var tag;
var color;
var detail;
$('.tagContainer').each(function (i, obj) {
tag = $(this).find('.tag_label').text();
color = $(this).children('.colorpicker').val();
detail = { tag: encodeURIComponent(tag), color: encodeURIComponent(color) };
details.push(detail);
});
return details;
}
// Call Ajax
function sendParameters(){
var details = getViewDetail();
var list = [];
list.push({ detail: details, test: 'lolo' });
list = JSON.stringify(list);
console.log(list);
jQuery.ajax({
url: '#Url.Action("SaveView", "Batch")',
async: false,
data: list,
contentType: 'application/json',
dataType: 'json',
type: 'POST',
success: function (result) {
if (!result.success) {
showErrorMessage(result.title, result.message);
}
else {
showSuccessMessage(result.title, result.message);
}
}
});
}
//In the controller (abbreviated)
public JsonResult SaveView(IEnumerable<Detail> detail, string test)
{}
//class
public class Detail
{
string _tag;
string _color;
public string tag { get => _tag; set => _tag = value; }
public string color { get => _color; set => _color = value; }
}
Try this:
data = { detail: details, test: 'lolo' };
data = JSON.stringify(data);
And send it through ajax:
data: data,
Your action's signature is expecting two parameters, detail and test. What you were passing was a list of object with two properties detail and test on it. Got the difference ? In short your posting object should be like:
{
"detail": [...],
"test": "lolo"
}
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.
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.
now I encounter a problem. I want to use ajax to show a datatable via using data coming from sql server database. Current state is I have used ajax to call a Handler.ashx to connect sql server and convert the data to json (using newtonsoft.json). In ajax, all json data has been recevied from Handler.ashx and stored in a variable "msg" which could be successfully showed on page. I want to put this "msg" into a datatable but failed all the time. I tried almost all methods online to set the datatable but still give different errors. I want to create a datatable in js and fill in my json data. But the result is either null or no data available in table.
Here is the codes and json data looks like.
js:
$(document).ready(function () {
$("#eventsButton").click(function () {
$.ajax({
type: "POST",
url: "../Handler.ashx",
//contentType: "application/json",
data: { postcode: $("#eventsPostcodeTextbox").val() },
cache: false,
success: function (msg) {
//for (var i in msg) {
// $("#eventGrid").append(msg[i]);
//}
//var jsonStr = JSON.stringify(msg);
document.getElementById("result").innerHTML = msg;
$('#eventtable').dataTable({
//"paging": false,
//"searching": false,
//"retrieve": true,
//"bProcessing": true,
//"data": msg.data,
//"datatype": "JSON",
//"ajax": "HandlerAll.ashx",
//"aaData": JSON.parse(msg),
//"ajax":
//"dataSrc":virtualTable
//"aoColumns": [
// { "mData": "ID" },
// { "mData": "FESTIVAL" },
// { "mData": "SUBURB" },
// { "mData": "POSTCODE" },
// { "mData": "WEBSITE" },
// { "mData": "DESCRIPTION" }
// ]
});
},
error: function (data) {
alert("Server error.");
}
})
});
});
json data (the size depends on the search condition, the table columns should have "ID","Festival" and so on, but no "virtualTable"):
{ "virtualTable": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] }
Since you get a JSON as reponse, I would try to convert it to JSON object, take the virtualTable part that it is a set of records in JSON and convert it to an array to add it to my table.
$(document).ready(function () {
$("#eventsButton").click(function () {
$.ajax({
type: "POST",
url: "../Handler.ashx",
// dataType: "json",
data: { postcode: $("#eventsPostcodeTextbox").val() },
success: function (msg) {
var jdata = $.parseJSON(msg);
jdata = jdata.virtualTable;
if (jdata.length != 0) {
var array_data = [];
var temp_array = [];
$(jdata).each(function(key, value) {
temp_array = [];
temp_array = [value.ID,
value.FESTIVAL,
value.SUBURB,
value.POSTCODE,
value.WEBSITE,
value.DESCRIPTION
];
array_data[array_data.length] = temp_array;
});
$('#eventtable').dataTable().fnAddData(array_data);
$('#eventtable').dataTable().fnDraw();
},
error: function (data) {
alert("Server error");
}
SOLUTION
Use the code below to initialize the table:
$('#eventtable').dataTable({
data: msg.virtualTable,
columns: [
{ data: "ID" },
{ data: "FESTIVAL" },
{ data: "SUBURB" },
{ data: "POSTCODE" },
{ data: "WEBSITE" },
{ data: "DESCRIPTION" }
]
});
DEMO
See this jsFiddle for code and demonstration.