How To Create Dynamic Json for Form set and get values and bind to display the values? - javascript

I am new to ionic 3 and creating a page without validation that redirect's to other page and display's the data and it's not happening please help me..!
Want's to create a dynamic json and want's to show on other page these data..!
public user = [
{
full_name:'',
phone:,
alt:,
pincode:,
address:' ',
locality:'',
landmark:' ',
city:'',
state:'',
country:'',
radio:''
}
];
how to set and get the values and show the data to other page regarding entered values in the form with the help of ionic 3

First of all you need to get data from inputs like this in .html file.
<ion-input placeholder="Name" type="text" [(ngModel)]="inputFieldValue"></ion-input>
Then in .ts file you have value like this.
public inputFieldValue;
console.log("--------inputFieldValue-------",inputFieldValue)
and after this you have to make a json object of that data like this.
let data = {
key:this.inputFieldValue
}
and pass it in the next page using NavController.
this.navCtrl.push(page_name_you_want_to_redirect,data)
and fetch it in the second page using NavParams
this.navParams.get("data")
Thats it!
You get your data in the second page wherever you want.
Hope it will help you!!

You cannot create an object without values or definitions, you must assign a value, at least "null":
public user = [ { full_name:'', phone:null, alt:null, pincode:null, address:' ', locality:'', landmark:' ', city:'', state:'', country:'', radio:'' } ];
Other cause of problems maybe the "Array"... why? do you need an array? or just an object? You are defining an Array of Objects!!! I would suggest you just do:
public user = {full_name:'', phone:null, alt:null, pincode:null, address:' ', locality:'', landmark:' ', city:'', state:'', country:'', radio:'' };
and then pass it using the NavCtrl that Mustafa told you...

Related

axios didn't return data with matching query string of parameter object but returns all the data in vanila JS

i have an api endpoint https://countriesnode.herokuapp.com/v1/countries.
Now i am fetching all the countries by
axios.get('https://countriesnode.herokuapp.com/v1/countries')
it returns successfully. Besides I want to fetch single countries with the country code like 'BB' .and i am trying with params and my object is like below
axios.get('https://countriesnode.herokuapp.com/v1/countries',
{
params: {
code: codeId
}
but it returns all the data like above rather than showing a single country with the following code. I also want to extract only the currency and area code. I wanted to try like this, don't know it gonna work or not.
.then(axios.spread((object) => {
console.log('Currency: ', object.data.currency);
console.log('Area code: ', object.data.emojiU);
}));
please someone help me... It took me almose the hole day for this but not able to success.
As per your comment, if you want to get the data of a specific country, you only have to append the country code id to the URL:
const codeId = 'BB';
axios.get(`https://countriesnode.herokuapp.com/v1/countries/${codeId}`)
Would give you the data for Barbados.
If you want to access the currency attribute you can do so with the code:
const codeId = 'BB';
axios.get(`https://countriesnode.herokuapp.com/v1/countries/${codeId}`).then(function(response) {
const currency = response.data.currency;
});

x-editable submit additional "array" to the total AJax POST data

I'm trying to add an array of object to the post data of a group of bootstrap x-editable in my jsp page.
I recover the data from a table, and build an array of object. After do that, I need to append this array to the list of the other value posted by the editables in the page.
I've an html table with id="user" and this code recover data from it and build the array of object. This is my code, that works and produces the correct object:
function recover_data() {
console.log("Starting recover");
var beneficiary_list = [];
$('.lav').each(function() {
var obj = {'company': $(this).attr('id'), 'num':$(this).text() };
beneficiary_list.push(obj)
});
console.log(beneficiary_list); //output to check array produced
return beneficiary_list;
};
this function is what I call from a save button, that launch my global submit retrieving data from all editable in the page and adding in the "params" the array returned from recover_data(), in this way:
jQuery('#data a').editable('submit',{
url:'test/prove/data_received',
params: function(params) {
params.beneficiary = recover_data();
return params;
},
success:function(resp){ ... }
})
but testing with Postman (Chrome) the produced output to POST, is without the array. Are submitted only the "editables" data, but no "beneficiary" field with array of that values adding. The missing field must be like
"beneficiary": [0: company: "1", num: "22" ..etc..]
How can I "append" to the produced POST data from a group of editables an array of objects, like that I've show?
Looking to this page is possible
Question on github x-editable page
I don't understand why don't works...I follow the example written on second post from vitalets, he wrote:
editable({
...
params: function(params) {
params.checked = ... //get array of checked values
return params;
}
});
To Explain better what I need: I've a Java Controller (servlet) that receive a modelView object (POJO) with several fields (that came from other editables in the page) and a field "ArrayList beneficiary" where Beneficiary is a small object of two fields "company" and "num"
public Class Beneficiary{
private String company;
private String num;
//then get e set methods..
}
instead, my POJO is like:
import java.util.ArrayList;
import Beneficiary;
public class Module {
private Integer id;
private String titolo;
private String companyRating;
private ArrayList<Beneficiary> beneficiary;
//get e set methods
In the console I obtain the correct object for that voice
but not in the post object that is like
instead I need that the produced output "beneficiaries" field to POST url is something similar to this example (found on internet)
How can I obtain a list of that object from my JSP page when submit?
Someone can help me?
params is an option for editable object, while you are using it as options for ajax call.
Your code should look like:
$('#data a').editable({
url: "/post"
});
and then the submit() (note selector for all of your editable objects):
$('.editable').editable('submit', {
data: {beneficiary: recover_data()},
success:function(resp){ ... }
});
Working fiddle. Check your console to see logs

How to save each and every form input button actions into json file using eihter javascript or jquery or angularjs?

I wanted to save my all form inputs, each and every button action(for ng-clicked and non-ng-clicked including file uploads/urls, etc i.e. whatever I click, those values should be stored in json file/object i.e. for all <input type="button"> in my case), with the given sample structure either using javascript or jquery or angularjs(the sample structure is provided in Fiddle).Here I am getting the each action log at: console.log('User actions :', $scope.userActions);, but I need is the same action logs should be stored in a json file with the proper structure for my given all input types. How to achieve this ?
AngularJS supports two-way binding, which means you don't need to submit your data.
As I don't know enough about your specific use case I can't get it to fully function, but this should get you going:
Plunk
The main thing is that everything is stored in a scope variable (as JSON):
$scope.source = {
'testingwizard' : 'TestingWizard',
'firstTitle': 'First Title',
'nextstep': 'Sub',
'test': {
'uploadedurl': '/...abc.html',
'text': 'TEST'
},
'network':
{
'layer0': 'TestValue0',
'layer1': 'TestValue1',
'layer2': 'TestValue2',
'testdata': 'TESTDATA',
'number': '10'
},
'yesname': 'yes',
'Result': 'TestResult',
};
That is active as long as you are on that page, so you can do a $http put to a backend at any time (and have the values you expect).
PS: I've slightly changed the values in the Plunk (added new prefix) to prove that it's not the HTML providing the values.

Using read function of oData model in UI5

I am coding an UI5 App which consumes a given OData Service. Now I want to get the name of an account with a given account number and Display it in a table. As I can only access the account Name via /AccountInfoSet()/ShortText I tried to use a formatter function to map the account number.
Binding in View:
Formatter function in Controller:
numToNameFormatter : function(sNum){
var text = this.getView().getModel().read("/AccountInfoSet('" + sNum + "')", null, null, true,
function(oData, oResponse){
return JSON.stringify(oData);
},
function(){
alert("Read failed");
});
return text;
}
This should return the requested object as a string. The data is requested successfully, as I verified via an alert. The problem is, that I can't get the data out of the call back, as it ist asynchronous. How do I get the data.
Thanks in advance!
Not sure if your data model is set up like this, but would it be possible to expand your table set to also load the related AccountInfoSet's?
I mean, if your table holds for instance an array of Accounts, and each Account entry has a related AccountInfo, you could just fill your table with the following:
http://your.service/Accounts/?$expand=AccountInfo
You then bind the field in your table directly, without a formatter:
<TextField value="{AccountInfo/0/ShortText}">

I'm getting a "newItem() was not passed an identity for the new item" error while trying to add a new item to a JSON store

I've seen other posts in this site regarding the same issue and I've tried the solutions given. I've also visited the links that may offer a solution but I'm still stuck with the same error.
I'm using DOJO and something as simple as this won't even work
myStore.newItem({id: 'test', otherfield: 'otherinfohere'});
myStore.save();
Supposedly the "newItem() was not passed an identity for the new item" error appears when you haven't provided an identifier for the new item, which i have.
The whole purpose of this (Just in case anyone can provide a good idea or has done something similar before) is that i want to create a data grid that shows info from a particular store. The problem is, that in that store all the items may not have the same structure. For instance:
I may have a store that looks like this
{identifier: 'id',
label: 'name',
items: [
{ id:'1', name:'Ecuador', capital:'Quito' },
{ id:'2', name:'Egypt', capital:'Cairo' },
{ id:'3', name:'El Salvador', capital:'San Salvador' , additionalField: 'otherinfohere'},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', additionalField: 'otherinfohere'},
]}
This is possible because I'm the one constructing the store in a Spring Controller (I'm also using the Spring Framework) from information I have locally stored in a Berkeley DB. So what i need is a data grid with a dynamic layout because I don't want blank spaces to show in the view in the rows with lesser amount of fields, and i need to show all the info in the store at the same time, but i don't know how to do this.
I thought of doing it by creating a simple layout of only 1 field. In it I would load data from a store i create dynamically at runtime. The data in the store would be composed of HTML combined with the values coming from the original store so I could obtain something like this, which is inside an attribute of a JavaScript Object and let the browser parse it for me:
<div><span>id: originalID </span>....</div>
This of course is a simple example, the html layout i'm looking for is far more complicated, but i think that passing it as a string to an object might do the trick.
The problem is that i don't even know if that idea will work because i get that error whenever i try to add values to my secondary store.
rdb.modules.monitor.historicStore.fetch({onComplete: function(items, request){
for (var i = 0; i < items.length; i++){
var item = items[i];
var obj = new Object();
obj.id = rdb.modules.monitor.historicStore.getValue(item, "id");;
var html = "<div><span>";
html += rdb.modules.monitor.historicStore.getValue(item, "sql");
html += "</span></div>";
obj.html = html;
myStore.store.newItem(obj);
}
}});
In this context "historicStore" refers to the JSON store that has the values that i need to convert and add to "myStore" after i added some HTML.
I hope you got the main idea of what I'm trying to do. If anyone can help me we either of these problems i would really appreciate it. Thanks in advance
For the issue regarding store:-
"id" is mandatory for a store, if it is going to be used for a grid(datagrid, EnhancedGrid, etc. whatever). The items are handled only on basis of "id" attribute by the grid data structures.
Usually, id can be a loop variable/ auto incrementation, to avoid any cases like you have said. Before adding the store to the grid, ensure that all items have the id attribute. You can write a function which will loop through each item and check for this, else add an auto-incrementing value for the id attribute of that item.

Categories

Resources