I want to push the Field Names into the option value and the result into the text of a select. It should look like this:
<select id="ddl_fields">
<option value="RoleId">e407d28a</option>
<option value="RoleName">Sales</option>
</select>
This is the json object returned from the database:
"[{"RoleId":"e407d28a","RoleName":"Sales"}]"
This is the code and it pulls back a valid result:
function getFields(){
var the_id = $(".hid_ID").val();
var jsonText = JSON.stringify({ id: the_id });
$.ajax({
type: "POST",
url: "bc_Admin.aspx/getFields",
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d != "0") {
var obj = $.parseJSON(data.d);
//what needs to change???
$.each(obj, function (index, value) {
$('#ddl_fields')
.append($("<option value=" + value.id_Role + ">" + value.RoleName + "</option>"));
});
}
} //end success
});
}
Similar to this questions but need a JQuery solution.
How to get/list all field names of a JSON data with ExtJS?
Thanks!
Assuming that data.d is in the format you posted obj is an array and you want to iterate the object in the array and not the array itself.
$.each(obj[0], function (index, value) {
$('#ddl_fields')
.append($("<option value=" + index + ">" + value + "</option>"));
});
You have to iterate through the keys of the object, and use hasOwnProperty to make sure its a key of the object and not of its prototype.
var key, keys = [];
for (key in obj) {
if (obj.hasOwnProperty(key))
keys.push(key)
}
You'll want to loop through the object and use hasOwnProperty().
for (var i in inputData) {
if (inputData.hasOwnProperty(i)) {
console.log(i + " , " + inputData[i]);
}}
This example will just log to console key: value.
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
Just change
$.each(obj, function (index, value) {
to
$.each(obj[0], function (index, value) {
The problem is that you return an array in your json
Not sure if I understand, but here's what I would do to get what you want (I made also your code simplier):
function getFields(the_id){
$.ajax({
type: "POST",
url: "bc_Admin.aspx/getFields",
data: { id : the_id },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
for(var i = 0; i < data.length; i++){
console.log(i + ": " + data[i]);
}
},
error : function(s , i , error){
console.log(error);
}
});
}
Related
What ever I do, I keep getting the same error. The only thing I have found that might of helped is the JSON.parse, but I still get the same problem. console log gives data as [{"ID":"2","Name":"EAA2"}]
I split it into two functions as I didn't want to keep going back to the api everytime a user selects/de-selects an option.
I have also tried the following:
Changing vars to lets
Passing data.d from the update to the populate
function populateAvailableAuthorities() {
var list = $('#availableAA');
var data = JSON.parse($('#AAJSON').val());
var auths = $('#tbSelectedAA').val();
list.empty();
$.each(data, function (key, entry) {
if (!~auths.indexOf(entry.ID + ';')) {
list.append($('<option></option>').attr('value', entry.ID).text(entry.Name));
}
});
}
function updateListboxes() {
var teams = '';
let aa = $('#AAJSON');
aa.empty();
$('#cblTeams input:checked').each(function () {
teams += $(this).attr('value') + ',';
});
if (teams.length > 1) {
teams = teams.substr(0, teams.length - 1);
$.ajax({
type: "POST",
url: '<%# ResolveUrl("~/api/Authorities.asmx/FetchByTeam") %>',
data: '{teams: "' + teams + '"}',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
aa.val(JSON.stringify(data.d));
populateAvailableAuthorities();
}
});
}
}
It would seem that "over-stringifying" is an issue with JSON. If I doubled the JSON.parse or removed the JSON.stringify it all works correctly.
Annoying!!
While retrieving JSON array data using $.each method, I am able to get the array values, but apart from that it's showing 'NaN' values and showing the below error.
"Uncaught TypeError: Cannot use 'in' operator to search for '5' in Hello!"
Seems it's looping through all the objects not only array, if this is the case how can I get only array values and how can I get all the values(including and excluding array values).
one more query does this rawgit works for only method 'GET', because while using method 'POST' throwing error(403 (Forbidden)).
$.ajax({
method: 'GET',
url: 'https://rawgit.com/rajeshdesigner/testgit/master/colorsdata.json',
dataType: 'json',
success: function (data) {
$.each(data, function(index, obj){
$.each(obj, function(index, element) {
$('#show-data').append(element.key + element.value + '<br/>');
});
});
}
});
JSON:
{
"items": [
{
"key": "First",
"value": 100
},{
"key": "Second",
"value": 200
},{
"key": "Last",
"value": "Mixed"
}
],
"obj": {
"number": 1.2345e-6,
"enabled": true
},
"message": "Hello!"
}
It sounds like you only want to iterate data.items but you're iterating over everything. Try this:
$.each(data.items, function(index, obj) {
$('#show-data').append(obj.key + obj.value + '<br/>');
});
https://jsfiddle.net/rrsku4Lq/
The problem is when the second loop reaches "message": "Hello!", that is not a object to be looped again, so for that element only the first loop is needed.
To correct, just make an if statement to enter the second loop only in case obj is an Object.
I also changed the nested loop index name to index2.
$.each(data, function(index, obj){
// Only do nested loop if obj is Object
if (obj instanceof Object) {
$.each(obj, function(index2, element) {
$('#show-data').append(element.key + element.value + '<br/>');
});
}
});
If you're only interested in data.items, than you can use
$.each(data.items, function(index2, element) {
$('#show-data').append(element.key + element.value + '<br/>');
});
You have an unnecessary for loop. The response is one JSON object in your case. You simply need to iterate the data items. UPDATE: How you handle a response depends on what you want to accomplish. In practice, you'll generally know how to access the data you need from the response, but as others have suggested, you can iterate through the keys in the response object and check for types
var object = {
arr : [1,2,3],
nestedObject : { }
};
for (var key in object) {
console.log(key);
console.log('Is array? ' + Array.isArray(object[key]));
// Now you can handle the data based on it's type...
}
In this case, you could choose to expect the response to include a items key and iterate over that. (It's also good practice to validate that you can process the response)
$.ajax({
method: 'GET',
url: 'https://rawgit.com/rajeshdesigner/testgit/master/colorsdata.json',
dataType: 'json',
success: function(data) {
// data is your JSON object.
data.items.forEach(function(item) {
$('#show-data').append(item.key + item.value + '<br/>');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-data"></div>
Also, 403 indicates that the resource is blocked for the current user. Verify that your POST method is publicly accessible and that you are authorized to make the request.
You should parse the json first. And as #Jason P said, iterate data.items
$.ajax({
method: 'GET',
url: 'https://rawgit.com/rajeshdesigner/testgit/master/colorsdata.json',
dataType: 'json',
success: function (data) {
var parsedData = $.parseJSON(data);
$.each(parsedData.items, function(index, obj){
$.each(obj, function(index, element) {
$('#show-data').append(element.key + element.value + '<br/>');
});
});
}
});
You are looping through all the elements in the array. I think you need to loop through only 'items' element as only that element contains the 'key' and 'value' elements.
Even though you are doing that, you can check if the key and value element exists, and if it does, do whatever your code wants.
$.ajax({
method: 'GET',
url: 'https://rawgit.com/rajeshdesigner/testgit/master/colorsdata.json',
dataType: 'json',
success: function (data)
{
$.each(data, function(index, obj)
{
$.each(obj, function(index, element)
{
if(element.hasProperty('key') && element.hasProperty('value'))
$('#show-data').append(element.key + element.value + '<br/>');
});
});
}
});
$.ajax({
method: 'GET',
url: 'https://rawgit.com/rajeshdesigner/testgit/master/colorsdata.json',
dataType: 'json',
success: function (data) {
console.log(data.items);
$.each(data.items, function(index, element) {
$('#show-data').append(element.key + element.value + '<br/>');
});
}
});
I would like to two add property Id and ButtonId to the exisiting json result. I have pasted the below js code for reference and I would like to pass the jsonresult to MVC controller. As of now it returns null. please help to proceed. Thanks.
my final result should look like this
json{"Groups":{"Id":"2","ButtonId":"1142","1186","1189"},
{"Id":"3","ButtonId":"1171","1173","1174","1175","1176","1187"},
{"Id":"4","ButtonId":"1177","1178","1179"}} etc..
var btnlist = {Groups: {Id:"", ButtonId: ""}};
$.each($(".buttonData"), function (index, value) {
var values = value.id.split(':');
grpid = values[0].split('-')[1];
btnid = values[1].split('-')[1];
console.log('grpid=' + grpid + ' btnid=' + btnid);
if (typeof (btnlist['Groups'][grpid]) == 'undefined') {
btnlist['Groups'][grpid] = [];
}
btnlist['Groups'][grpid].push(btnid);
});
$.ajax({
type: "POST",
url: "#Url.Action("Home", "Menu")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(btnlist) ,
success: function (result) {
console.log('json' + JSON.stringify(btnlist));
console.debug(result);
},
error: function (request, error) {
console.debug(error);
}
});
This is the json result before pushing into the multidimensional array
The json result, where the properties Id and ButtonId is inserted behind.
null result passed to the controller
With assistance of my colleague, the desired output is as below. This is for other programmers who face similar issue with JSON array. Thanks.
var btnlist = [];
btngrps = $('.btn-sort-container');
$.each(btngrps, function(k, v) {
btnarr = {};
gid = $(this).attr('id');
grpid = gid.split('-')[1];
btnarr.Id = gid.split('-')[1];
btnobjs = $(v).find('.buttonData');
if (btnobjs.length) {
btnarr['btnId'] = [];
$.each(btnobjs, function(bk, bv) {
btnid = $(bv).attr('id').split('-')[2];
btnarr['btnId'].push($(bv).attr('id').split('-')[2]);
});
console.debug(btnarr);
btnlist.push(btnarr);
}
});
console.debug(btnlist);
Output on console
: http://i.stack.imgur.com/oJ3Dy.png
I am getting TypeError: field[i] is undefined from this:
function ObserverFetch() {
$.ajax({
type: "POST",
url: "Observer.aspx/ObserverFetch",
data: JSON.stringify({ id: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
$.each(data, function (i, field) {
alert(field[i].BidderName);
//$('#dvBids').text(field);
//$("#gvDetails").append("<tr><td>" + field.SrNo + "</td><td>" + field.BidderName + "</td><td>" + field.BidAmt + "</td></tr>");
});
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
}
});
}
This is what I get in field
[{"SrNo":4,"BidderName":"faisal","BidAmt":6000000.0000,"BidDate":"\/Date(1430199508063)\/"},{"SrNo":3,"BidderName":"arbaaz jalil","BidAmt":5000010.0000,"BidDate":"\/Date(1430199494083)\/"},{"SrNo":2,"BidderName":"arbaaz","BidAmt":500000.0000,"BidDate":"\/Date(1430199483530)\/"},{"SrNo":1,"BidderName":"shekhar1","BidAmt":5000.0000,"BidDate":"\/Date(1430199394957)\/"}]
$('#dvBids').text(JSON.stringify(data)); gives me :
{"d":"[{\"SrNo\":4,\"BidderName\":\"faisal\",\"BidAmt\":6000000.0000,\"BidDate\":\"\\/Date(1430199508063)\\/\"},{\"SrNo\":3,\"BidderName\":\"arbaaz jalil\",\"BidAmt\":5000010.0000,\"BidDate\":\"\\/Date(1430199494083)\\/\"},{\"SrNo\":2,\"BidderName\":\"arbaaz\",\"BidAmt\":500000.0000,\"BidDate\":\"\\/Date(1430199483530)\\/\"},{\"SrNo\":1,\"BidderName\":\"shekhar1\",\"BidAmt\":5000.0000,\"BidDate\":\"\\/Date(1430199394957)\\/\"}]"}
$.each(data.d , function (i, field) { gives me :
TypeError: invalid 'in' operand a
Bizarrely, the response from your server is a JSON object with a single property, d, which is a string containing the JSON for an array. If it's your server method generating that response, you probably want to adjust it so that data.d is an array, not a string.
To get those results and loop through them, you'll need to parse it, and then use field directly rather than via i:
var fields = JSON.parse(data.d);
$.each(fields, function(i, field) {
alert(field.BidderName);
});
or of course:
$.each(JSON.parse(data.d), function(i, field) {
alert(field.BidderName);
});
Side note: As the parsed version of data.d is an array, on any modern browser you can use Array#forEach rather than $.each, which has a slightly less-confusing argument list for the callback. (Array#forEach can be easily polyfilled on IE8 and earlier.)
JSON.parse(data.d).forEach(function(field) {
alert(field.BidderName);
});
Live Example of both:
var data = {
"d": "[{\"SrNo\":4,\"BidderName\":\"faisal\",\"BidAmt\":6000000.0000,\"BidDate\":\"\\/Date(1430199508063)\\/\"},{\"SrNo\":3,\"BidderName\":\"arbaaz jalil\",\"BidAmt\":5000010.0000,\"BidDate\":\"\\/Date(1430199494083)\\/\"},{\"SrNo\":2,\"BidderName\":\"arbaaz\",\"BidAmt\":500000.0000,\"BidDate\":\"\\/Date(1430199483530)\\/\"},{\"SrNo\":1,\"BidderName\":\"shekhar1\",\"BidAmt\":5000.0000,\"BidDate\":\"\\/Date(1430199394957)\\/\"}]"
};
snippet.log("Using $.each:");
$.each(JSON.parse(data.d), function(i, field) {
snippet.log(field.BidderName);
});
snippet.log("----");
snippet.log("Using forEach");
JSON.parse(data.d).forEach(function(field) {
snippet.log(field.BidderName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
The problem is that in var fiel you already have a each element of the array. The solutiobn is:
$.each( obj, function (i, field) {
alert(field.BidderName );
});
Consider the following Javascript. The JSON object I'm parsing has an array on it called History. Each object in the History (resp[0].History) array has a UniqueID property. How do I get at that UniqueID property for each object in the array please?
// Retrieve individual licence information.
function loadLicenceDetails(uniqueID) {
document.body.style.cursor = 'wait';
$('#loadingLicenceDiv').modal('show');
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/JadeLicensingWebService/default.asmx/GetLicenceDetails',
dataType: 'json',
data: '{"licenceHolder":"' + $.cookie("companyName") + '","uniqueID":"' + uniqueID + '"}',
success: function (data) {
resp = $.parseJSON(data.d);
$('#inputLicenceName').val(resp[0].LicenceName);
$('#licenceKeyInput').val(resp[0].LicenceKey);
$('#selectProductType').val(resp[0].Product);
$('#selectDuration').val(resp[0].Duration);
$('#startDateInput').val(resp[0].StartDate);
$('#expiryDateInput').val(resp[0].ExpiryDate);
$('#orderedByInput').val(resp[0].OrderedBy);
// How do I get at the History.UniqueID ?
$('#notesInput').val(resp[0].Notes);
$('#licenceInfoHeader').html('<strong>#' + uniqueID + '</strong> - ' + resp[0].LicenceName);
Assuming your JSON looks like:
{
"History": [
{
"UniqueId": "abc"
},
{
"UniqueId": "def"
},
{
"UniqueId": "ghi"
},
]
}
You can do this:
var ids = []; // Make an array to hold the IDs
// Iterate over History items
for (var i = 0; i < resp.History.length; i++) {
var item = resp.History[i];
ids.push(item.UniqueId); // Put each ID in the array
}
If that's not what your JSON object looks like, can you add a sample object to your question so it's clearer what you're asking?
Solved by using this:
$('#licenceHistoryText').val(resp[0].History[0].DateIssued);
Edit, final solution:
$.each(resp[0].History, function (i, obj) {
document.getElementById("licenceHistoryText").value += obj.DateIssued + ' - ' + obj.LicenceName + ' [' + obj.LicenceKey + ']\n';
});