I am returning JSON from my controller to AJAX success response. The JSON look likes:
{
"success": false,
"errors": {
"ConfirmPassword": [
"'Confirm Password' and 'Password' do not match.",
"Password does not meet the criteria.",
"The Confirm Password must be at least 6 characters long."
],
"Password": [
"Password does not meet the criteria.",
"The Password must be at least 6 characters long."
]
}
}
Now I wan to display data in div tag with formatting. I have tried :
$('#info').append(JSON.stringify(data));
but this is just a dump of whole string, which doesn't look nice in my view. Any idea how to do it.
Ajax call :
$.ajax({
type: 'POST',
url: '/Dashboard/UpdatePassword/',
data: $("#password-update-form").serialize(),
success: function (data) {
if (data.success) {
//alert("test");
}
else {
$('#info').append(JSON.stringify(data));
}
Thanks for all replies. I managed to sorted it.
success: function (data) {
if (data.success) {
alert("test");
}
else {
console.log(JSON.stringify(data.errors))
for (var prop in data.errors) {
//alert(prop + " is " + data.errors[prop]);
$('#val-form').append('<p>'+data.errors[prop]+'<p>');
}
Related
I'm trying to get a simple value out of my json string. It seems to be harder than I thought. How can I reach for example the 'name' of the first ModuleAction object in the following JSON (the first array is called 'data'):
[
{
"ModuleController":{
"id":"3"
},
"ModuleActionModuleController":[
{
"id":"4",
"module_action_id":"1",
"module_controller_id":"3",
"ModuleAction":{
"id":"1",
"name":"Overzicht",
"action":"index"
}
},
{
"id":"5",
"module_action_id":"2",
"module_controller_id":"3",
"ModuleAction":{
"id":"2",
"name":"Detail",
"action":"view"
}
}
]
}
]
Here's my best attempt:
data[0].ModuleActionModuleController[0].id
But I've got the error:
add:93 Uncaught TypeError: Cannot read property '0' of undefined
at Object.success (add:93)
at j (jquery-2.1.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.1.0.min.js:2)
at x (jquery-2.1.0.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-2.1.0.min.js:4)
Any idea what I'm doing wrong? :)
EDIT
Here's the ajax function that returns the data JSON string:
$(function() {
$('#PageModuleId').on('change', function(){
var formData = $('#PageAddForm').serialize();
// POST to server
$.ajax({
type: 'POST',
url: '<?php echo $this->here; ?>',
dataType: 'text',
data: formData,
success: function(data){
console.log(data[0].ModuleActionModuleController[0].ModuleAction.name);
}
});
});
});
How can I reach for example the 'name' of the first ModuleAction
object in the following JSON?
It appears to me that you are just missing the next child element: ModuleActionModuleController.ModuleAction.name
$(document).ready(function() {
var obj = jQuery.parseJSON( '{"ModuleController":{"id":"3"},"ModuleActionModuleController":[{"id":"4","module_action_id":"1","module_controller_id":"3","ModuleAction":{"id":"1","name":"Overzicht","action":"index"}},{"id":"5","module_action_id":"2","module_controller_id":"3","ModuleAction":{"id":"2","name":"Detail","action":"view"}}]}' );
//alert( obj.ModuleActionModuleController[0].ModuleAction.name );
document.body.innerHTML = obj.ModuleActionModuleController[0].ModuleAction.name;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This works for me:
var JSON = {
"data": [
{
"ModuleController":{
"id":"3"
},
"ModuleActionModuleController":[
{
"id":"4",
"module_action_id":"1",
"module_controller_id":"3",
"ModuleAction":{
"id":"1",
"name":"Overzicht",
"action":"index"
}
},
{
"id":"5",
"module_action_id":"2",
"module_controller_id":"3",
"ModuleAction":{
"id":"2",
"name":"Detail",
"action":"view"
}
}
]
}
]
};
alert(JSON.data[0].ModuleActionModuleController[0].ModuleAction.id);
I am tried to get the data from my file using ajax in select2.js. I want to get data according the value which I entered in my textbox and append that value in my dropdown using select2. I tried for that but it didn't give the result according my search keyword how to solve these problem.
Here is my input box on HTML:
<input type="text" id="Address1" name="Address1" >
Javascript Code
<script>
$("#Address1").select2({
tags: [],
ajax: {
url: 'ajaxhandler.php',
dataType: 'json',
type: "POST",
// quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (term) {
}
}
});
</script>
ajaxhandler.php
<?php
$CITIES = array("Ahmedabad", "Mumbai", "USA", "Canada", "Pune");
echo json_encode($CITIES); exit;
?>
Data format for Select2.js (version 4) is:
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
]
}
See: https://select2.org/data-sources/formats
So you need to processResults received form server like below:
processResults: function (data) {
return {
results: $.map(data.items, function(obj, index) {
return { id: index, text: obj };
})
};
},
Here is a fiddle: http://jsfiddle.net/beaver71/cwb9r23b/
I'm getting a serialized JSON body from our API like the below example: '
{
"_embedded": [
{
"id": 1,
"vulnerable": false,
"systemId": "something",
"friendlyName": "a friendly name"
},
]
}
How to show just the key/value friendlyName? I'm using axios to get the response. This is my code:
axios.get(BASE_URL + 'household/list',{
headers: { Authorization: AuthStr },
transformResponse: axios.defaults.transformResponse.concat((data) => {
console.log(data) // this should now be JSON
})
}).then(({ data })=> {
this.setState({
data: houses.friendlyName
});
})
.catch((err)=> {
console.log(err);
});
I think I'm supposed to transform the data, but I don't know how. Thanks for any help.
Edit: This is how the response is shown in console:
_embedded:
0:
friendlyName: "a friendly name"
id: 1
systemId: "GE8BP2IACH7"
vulnerable: false
So, how do I deserialize it?
axios.get(BASE_URL + 'household/list',{
headers: { Authorization: AuthStr },
}).then(function (response) {
this.setState({data:response._embedded.friendlyName})
})
.catch(function (error) {
console.log(error);
});
i could not able to parse my nested json data and i tried in many ways but i could not succeed. any help is appreciated.
Here is my json output looks like:
[
{
"task": {
"locator": "FGWESD",
"subtask": [
{
"work": {
"number": "1145",
"id": "0",
"status": true,
"gate": "N\/A",
},
"sequenceNumber": "0",
"id": "0"
},
{
"work": {
"number": "1145",
"id": "0",
"status": true,
"gate": "N\/A",
},
"sequenceNumber": "0",
"id": "0"
}
],
"connectTime": "0",
"id": "0"
}
}
]
Here is my model:
Ext.define('MyApp.model.MyModel',{
extend:'Ext.data.Model',
xtype:'myModel',
config:{
fields:[
{name:'number',mapping:'work.number'},
{name:'id',mapping:'work.id'},
{name:'locator',mapping:'task.locator'},
{name:'gate',mapping:'work.gate'}
]
}
});
Here is the store:
Ext.define('MyApp.store.StoreList', {
extend:'Ext.data.Store',
config:{
model:'MyApp.model.MyModel',
storeId: 'id_Store',
// added the url dynamically inside the controller
proxy:{
type:'ajax',
reader:
{
type:"json",
rootProperty: 'subtask'
},
method: 'POST',
actionMethods: {
create : 'POST',
read : 'POST', // by default GET
update : 'POST',
destroy: 'POST'
},
headers :{
"Content-Type" :'application/xml',
'Accept':'application/json'
}
}
}
});
Here is my controller code :
Ext.define('MyApp.controller.LoginController', {
extend: 'Ext.app.Controller',
requires: ['Ext.data.proxy.Rest'],
config: {
// My code is too long to add here so am adding store loading when user taps login button
},
getDetails: function(){
var segmentStore = Ext.create('MyApp.store.StoreList');
var url = 'http://localhost:8080/apps';
segmentStore.getProxy().setUrl(url.trim());
segmentStore.load({
scope:this,
callback: function(records, operation, success){
if(success){
console.log('records: ',records);
console.log('records: '+records.length); // prints here 1
console.log('locator: '+records[0].getData().locator);
// prints FGWESD
console.log('locator: '+records[0].getData().number);
//prints undefined
//
}
}
}
)
},
});
Can any one please help me out. how can i get Values of number, gate, id and status?
What are the necessary changes have to be made in model, store and controller ?
Please help me out in resolving ? Thanks.
As I wrote in a comment, I don't think you can achieve that without manually parsing the data and loading it to the store. So the getDetails function should look like this:
getDetails: function(){
var segmentStore = Ext.create('MyApp.store.StoreList');
Ext.Ajax.request({
url: 'http://localhost:8080/apps',
success: function(response){
var responseObj = Ext.decode(response.responseText);
var task = responseObj[0].task;
var locator = task.locator;
var subtasks = [];
Ext.each(task.subtask, function(subtask) {
subtasks.push({
number: subtask.work.number,
id: subtask.work.id,
gate: subtask.work.gate,
locator: locator
});
});
segmentStore.setData(subtasks);
}
});
}
Also, when using this method you should remove the mapping from your model, and you can get rid of the proxy definition of the store. Also, I'm not sure why you want to create the store in the "getDetails" and not define it in the 'stores' config of the controller, but maybe you have your reasons..
I didn't run the code, so there maybe errors, but I hope you get the idea.
I think the root property of your store should be:
rootProperty: 'task.subtask'
I am using Jquery validation in a form and also an Ajax function in a .on(submit) code.
The problem is even when the validation is wrong the .on(submit) function still runs.
Is there any type of "if validation success" code to add to the validation code to put the .on(submit) code in so it will only run when the form is correct and validated?
this is the .on(submit) function
$('#valform').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo MAXINBOUND_PLUGIN_URL ?>/php/localProxy.php",
data: $('#valform').serialize(),
success: function (response) {
alert('Great!');
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
});
and this is the validation code
$("#valform").validate({
invalidHandler: function(form, validator) {
success: function (response) {
var errors = validator.numberOfInvalids();
if (errors) {
$("#error-message").show().text("Please correct the required field(s)");
} else {
$("#error-message").hide();
}
},
messages: {
agree: {
required: ""
},
phone1: {
required: ""
},
address1: {
required: ""
},
},
rules: {
agree: {
required: true,
},
phone1: {
required: true,
phoneUS: true
},
Address1: {
required: true,
addr: true,
},
},
});
You can use submitHandler to do ajax calls. So it will call only after passing all validations.
$("#valform").validate({
submitHandler: function(form) {
//do ajax call
}
})
You can use the jquery valid() method to check if the submitted form is valid. Something like this...
if ($("#valform").valid()) {
// do your ajax stuff
}
Please note that valid() will work only when the validate() is called on the form prior to it.
Hope this helps!