We Keep Coding

JSON-data get undefined as result. How to get JSON-data?

I have a dataset with location-data. And in the GetLocation the data are transformed in a latitude and longitude value. That works fine. But when I returned to the html-page. The data is undefined. What is the reason? And how can I resolve this with JSon-data?
[HttpGet]
public JsonResult GetLocation(Dictionary<string, string> items)
{
var result = "{ 'latitude': '" + latitude + "', 'longitude': '" + longitude + "'}";
return Json(result);
}
in the html:
if (item.Location == null) {
$.ajax({
url: "#Url.Action("GetLocation", "Home")",
dataType: "json",
data: { items: item },
type: "GET",
success: (function (data) {
location = JSON.parse(data);
})
});
console.log("location:");
console.log(location);

You are double-encoding the JSON here. The Json() function in the action method is encoding the string as JSON, which means the Javascript will be receiving something like this (note the quotes around the entire thing):
"{ 'latitude': '50.69093', 'longitude': '4.337744'}"
You should instead do something like this:
return Json(new { latitude, longitude }, JsonRequestBehavior.AllowGet);
Now in your success function, you will be able to access the values:
success: (function (data) {
location = JSON.parse(data);
console.log(location.latitude);
})
Note also the addition of JsonRequestBehavior.AllowGet, see here for why that is needed.

Please change like below
in MVC return type:
return Json(new { result = result }, JsonRequestBehavior.AllowGet);
in JQuery AJAX
location = JSON.parse(data.result);

C# - Jquery : Pass regular params and list<KeyPairValue<string, string>> with $.post from view to controller

I try to pass 'regular' parameters type from an ajax call ($.post) from a view to a controller which is supposed to receive those parameters plus a List>.
I need this List cause those parameters will be different from model.types, and the method in the controller dispatch all params in a switch case to private methods.
I tried several jquery objects builds, JSON.stringify, the array with indexes in the string (I know I can't name columns explicitly... part of my question) which always ends in the List> to null in the backend method.
The 'params' are visible in xhr debug, but the parameter _options is always null (ref controller method).
Here is my vars and my ajax call :
function initDocumentsPreviewsActions() {
$('.documents-list-preview-action').on('click', function () {
if (xhrPreviewLoad != undefined)
xhrPreviewLoad.abort();
$('#documents-preview').html('<div class="general-form-message-loader"></div>');
documentCurrentIndex = $(this).data('btnindex');
setDatatableRowActive();
var documentType = $(this).data('documenttype');
var adherentRessourceId = $(this).data('adherentressourceid');
var annee = $(this).data('annee');
var echeancier = $(this).data('echeancier');
var destinataireid = $(this).data('destinataireid');
var destinatairetypeid = $(this).data('destinatairetypeid');
var emetteurid = $(this).data('emetteurid');
var emetteurmandatid = $(this).data('emetteurmandatid');
var trimestres = $(this).data('trimestres');
var params = [
{ '_annee': '' + annee + '', '_echeancier': '' + echeancier + '', '_trimestres': '' + trimestres + '' }
];
xhrPreviewLoad = $.ajax({
url: '/Documents/PreviewDocumentSingle',
data: {
_documentType: documentType,
_adherentRessourceId: adherentRessourceId,
_annee: annee,
_destinataireId: destinataireid,
_destinataireType: destinatairetypeid,
_emetteurId: emetteurid,
_emetteurMandatId: emetteurmandatid,
_echeancier: echeancier,
_options: JSON.stringify(params)
},
dataType: 'json',
type: 'POST'
}).done(function (documentPartialView) {
$('#documents-preview').html('<img src="' + documentPartialView.src + '"/>');
xhrPreviewLoad = undefined;
});
});
}
xhd Parameters in Firefox debugger :
_documentType AppelCotisation
_adherentRessourceId 836
_annee 2018
_destinataireId 11
_destinataireType Syndicat
_emetteurId 16289
_emetteurMandatId 5986
_echeancier False
_options [{"_annee":"2018","_echeancier":"False","_trimestres":"undefined"}]
Controller method :
[HttpPost]
public JsonResult PreviewDocumentSingle(string _documentType, int _adherentRessourceId, int _destinataireId, string _destinataireType, int _emetteurId, int _emetteurMandatId, List<KeyValuePair<string, string>> _options)
{
//(_options = null)
//some code
return JsonResult
}
I already have done this a long time ago but I cannot put a hand or my brain on it. I'm sure it's a little thing.
I expect to get ALL my parameters correctly or being suggested to declare another List of a different type in the backend (and how to formalize it in front), or Array... well... any help is good to come.
But I'd really like to keep mus ctor in the backend as it is.

I finally findout myself how to solve this simple problem by changing to a Dictionnaray instead of a List> in my controller's method parameters and build a simple js object like this :
var options = {};
options['_annee'] = annee;
options['_echeancier'] = echeancier;
options['_trimestres'] = trimestres;

Iterating over a ajax-returned list with $.each - Element is always null

I have the following C# code in my API-controller:
public JsonResult GetProjects()
{
List<ProjectItem> list = ProjectItem.Get();
return new JsonResult() {Data = list, JsonRequestBehavior = JsonRequestBehavior.AllowGet};;
}
I stepped through this code and found out that the list contains elements on this point. But in the Ajax-call I'm calling the code I try to iterate over the single elements with Jquery and try to use them. But the elements are always null.
Typescript Ajax-Call:
$.ajax({
url: "/api//MyControllerName",
type: "GET",
cache:false,
dataType: "json",
success: (result) => {
base.projects.removeAll();
$.each(result, (index: number, element: any) => {
//Here the element from the list should be used, but it is always null
});
});
}
});
What is wrong with this code?

Okay, found the solution to my problem myself:
I tried to iterate over the result, but I have to iterate over the Data-Property of the result.
With this code it works:
$.each(result.Data, (index: number, element: any) => {
//Element is defined
}

ASP.NET / Ajax - How do you pass a parameter in your call?

I am trying to filter down my results and can't figure out how to set up the ajax query to work properly with the select2 drop down. From what I can tell you are supposed to use data, but that is not passing just the value in and filtering down my call.
Here is my ajax:
$('#e1').select2({
placeholder: "Select an ingredient...",
minimumInputLength: 2,
ajax: {
url: "../api/IngredientChoices",
data: 'mi',
dataType: "json",
quietMillis: 500,
data: function (term, page) {
return {
q: term,
page_limit: 10,
page: page
};
},
results: function (data, page) {
var more = (page * 10) < data.length;
console.log(more);
console.log(data);
return { results: data, more: more };
},
formatResult: function (post) {
markup = '<strong>' + post.text + '</strong>';
}
}
});
Here is my controller:
public List<Models.IngredientChoices> Get(string param)
{
var choices = (from i in _context.IngredientItems_View(param)
select new Models.IngredientChoices
{
id = i.ItemID,
text = i.ConcatName,
});
return choices.ToList();
}
The ajax call returns all values currently.

you have a duplicate member data: on your ajax - you should only have one.
EDIT: just a SWAG but perhaps you need a class:
class myparam {
string q ;
int page_limit;
int page;
}
//decorate for JSON
public List<Models.IngredientChoices> Get(myparm param)
{
var choices = (from i in _context.IngredientItems_View(param.q)

The answer, as #jmordyk said was that my q: term did not match my parameter in c#. I changed this line:
public List<Models.IngredientChoices> Get(string param)
to be:
public List<Models.IngredientChoices> Get(string q)

asp.net mvc3 return multiple json list

Im asp.net mvc3 c# code returns json list like this:
return Json(new { name = UserNames, imageUrl = ImageUrls });
UserNames and ImageUrls are both List<string> types
And this is my javascript
function StartSearch(text) {
$.ajax({
url: '/Shared/Search',
type: 'POST',
data: { SearchText: text },
dataType: 'json',
success: function (result) {
$.each(result, function (i, item) {
alert(result[i].name);
});
}
});
}
How I can get names and ImageUrls?
Thanks

Access name as a property of result like this result.name[i]
Essentially, result will contain name and imageUrl which are both arrays, just like you have defined in your anonymous type, so your code should be modified like this to display an alert for each name in the name array
function StartSearch(text) {
$.ajax({
url: '/Shared/Search',
type: 'POST',
data: { SearchText: text },
dataType: 'json',
success: function (result) {
$.each(result.name, function (i, item) {
alert(item);
});
}
});
}
as $each iterates over the items in the name array, it will pass the item to the second parameter of your call back, i.e. item.
so
$.each(result.name, function (i, item) {
alert(item);
});
will popup each name.
Notes:
You may want to change the properties on your anonymous type to reflect that they are a collection:
return Json(new { UserNames = UserNames, ImageUrls = ImageUrls });
this way it will make more sense when you iterate over them in your success function.
As AlfalfaStrange pointed out, I didn't demonstrate how you might access both arrays. Which made me think, what is the relationship between user names and image urls?
Is this a list of images for a user? Maybe what you should consider is creating a specific model for this. For instance, UserDisplayModel:
public class UserDisplayModel
{
public string UserName {get;set;}
public string ImageUrl {get;set;}
}
In your controller return a list of UserDisplayModels. If this is the case, you'll have to rethink why they are two separate lists in the first place. Maybe ImageUrl should be a field on the User table.
So now, when you're returning a single list, e.g.
List<UserDisplayModel> users = //get users from db
return Json(new { Users = Users});
you can iterate them in one go in js code:
$.each(result.Users, function (i, item) {
alert(item.Name);
alert(item.ImageUrl);
});

This alerts the value of Name from each record of each list.
$.each(result, function (i, item) {
for (var x = 0; x < result.FirstList.length; x++) {
alert(result.FirstList[x].Name);
alert(result.SecondList[x].Name);
}
});
This assumes your Json response if formed correctly. Like this:
return Json(new { FirstList = results, SecondList = otherResults }, JsonRequestBehavior.AllowGet);
But as a side note, I see other problems with your code that you need to address
You're actually not performing a POST, you're searching based on input. Change POST to GET in your Ajax call
Change your action return line to allow for the get and make sure your are returning a JsonResult.
Naming conventions for C# method parameters call for Pascal-casing. Use a lowercase letter for first character
public JsonResult Search(string searchText) {
....
return Json(new { name = UserNames, imageUrl = ImageUrls }, JsonRequestBehavior.AllowGet);
}