How do I load multiple json arrays based on ng-route? - javascript

I'm fairly new to angular and I am wondering if there is a way I can load multiple json arrays into my app. Basically, I have a json document that contains data that looks kinda like this example.
It has multiple arrays within the same file. I was thinking that maybe I could loop through them and load the data, but I'm not sure.
{
'title': 'myApp',
'data1': [
{
'listname': 'name1',
'id': '1'
},
{
'listname': 'name2',
'id': '2'
},
],
'data2': [
{
'listname': 'name1',
'id': '1'
},
{
'listname': 'name2',
'id': '2'
},
],
'data3': [
{
'listname': 'name1',
'id': '1'
},
{
'listname': 'name2',
'id': '2'
},
]
}
I found a service to load the data like this.
app.factory('grabData', ['$http', function($http) {
return {
get: function(callback) {
$http.get('data/names.json').success(function(data) {
callback(data);
});
}
}
}]);
My controller looks like this below and I don't want to load each data like this. Is there a way I can switch the arrays based on the route instead of loading it one by one? As you can see below, this is not the best way I am doing it.
grabData.get(function(data){
$scope.thedata = data;
$scope.myTotal1 = data.data2.length;
$scope.myList1 = data.chapter1;
$scope.myTotal2 = data.data2.length;
$scope.myList2 = data.data2;
$scope.myTotal3 = data.data3.length;
$scope.myList3 = data.data3;
$scope.myTotal4 = data.data4.length;
$scope.myList4 = data.data4;
});
You see where this is going. data5, data6, etc.
I have my routes set up and if I could somehow load them based on the routes I have, then that would work good, I suppose.

Related

How to fiddle an easy OnDemandList (dgrid)?

I have tried to create a very simple jsfiddle to test an OnDemandList (sitepen/dgrid). But it does not render any rows. Does anybody have an idea what I have done wrong? Is it that a simple dstore/Memory does not offer methods like fetchRange? The jsFiddle can be found here: http://jsfiddle.net/rbeqqr2g/25/
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},
{
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
},
{
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/master'
}
]
}, [
'dgrid/OnDemandList',
'dstore/Memory',
'dojo/dom',
], function(OnDemandList, Memory, dom) {
var data = [
{ id: 1, name: 'Peter' },
{ id: 2, name: 'Paul' },
{ id: 3, name: 'Mary' }
];
var store = new Memory({
data: data
});
var list = new OnDemandList({
collection: store,
minRowsPerPage: 5,
noDataMessage: "Keine Daten vorhanden",
renderRow: function (object, options) {
console.log("Zeile wurde gerendert.")
var div = document.createElement('div');
div.appendChild(document.createTextNode(object.name));
return div;
}
}, dom.byId('list'));
list.startup();
});
You're using the most recent dstore, but an old dgrid. The < 1.x versions of dgrid did not support dstore, you can use a regular dojo/store/Memory instead. In dgrid < 1.x, you also needed a store property instead of collection.
require({
...
}, [
'dgrid/OnDemandList',
//'dstore/Memory',
'dojo/store/Memory', // < --- regular dojo/store
'dojo/dom',
], function(OnDemandList, Memory, dom) {
...
...
var list = new OnDemandList({
//collection: store,
store: store, // <--- store property
...
}, dom.byId('list'));
list.startup();
});
http://jsfiddle.net/rbeqqr2g/28/
Alternatively, unless you're stuck with dgrid 0.3.x, you can also simply use the modern dgrid:
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
//location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},

selectize.js and vue.js 2 ajax loaded optons

I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry
I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.

How to properly compile html form data into JSON object

I have a form which collects some information (asset cost, asset description, shareholders, and how much each of the shareholders own). I want to compile all this information in a JSON object and post it. When I collect the data and JSON.stringify() it, it looks like this:
[ { name: '1', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' },
{ name: '3', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' } ]
I want to clean this data up before posting so it looks like this:
{
"asset_desc": "boat",
"asset_cost": "100",
"org_id": 2,
"share_holders": {
"1": "50",
"2": "50"
}
}
I am running jQuery. Does jQuery have some built-in helpers that would make the cleaning up of this data simple? The function I'm using to get the data like this in the first place is:
formdata = $('#addpurchaseform');
data = JSON.stringify(formdata.serializeArray());
Is there a better way to do this so that my data is in a cleaner state? Am I even thinking about this correctly (I am new to web development)?
Not sure if this matters, but the receiving end of this is Python / Django so I figured it would be better if I sent a clean JSON object rather than trying to parse / clean the mess after it was received.
If you're looking for a jQuery plugin, then try this:
https://github.com/marioizquierdo/jquery.serializeJSON

Need help in AngularJS deep filtering

So, I've been trying to filter an select with another based on this informations came from a web service:
{
sections: [
{
st_id: '1',
st_nm: 'name1',
blocks: [
{
bl_id: '1',
bl_nm: 'block1'
}
]
},
{
st_id: '2',
st_nm: 'name2',
blocks: [
{
bl_id: '2',
bl_nm: 'block2'
},
{
bl_id: '2-1',
bl_nm: 'block2-1'
}
// ... and so on
]
}
// ... and so on
]
}
I tried a lot of things and combinations, but I'm really new in Angular and nothing works. I need filter the second select, and fill with the "blocks" information, with the "st_nm" field selected in the first select element.
I'm grateful for your answers!
I think I know what you're trying to do here and here's my suggestion:
<select id="st_select" ng-model="st_selected" ng-options="sect.st_nm for sect in sections">
<select id="blocks_select" ng-model="block_selected" ng-options="block.b1_nm for block in st_selected.blocks">

Specify id label for data loaded from array

Is it possible to load fully custom set of data into select2? I mean I can customize the option text property, can I also do it for id?
The code below works perfect
var dummy = [
{ id: 1, Name: "opt1" },
{ id: 2, Name: "opt2" }
];
$("#myselect").select2({
data: { results: dummy, text: "Name" },
formatSelection: function (item) { return item.Name; },
formatResult: function (item) { return item.Name }
});
However, my data incoming has the id property in caps. It surely would be possible for me to rename these objects' properties iterating through the received data set, yet the amount of data is pretty large and I certainly do not want to slow this simple load down. I'd also love to have these object properties stay.
Long story short, my data is like
var dummy = [
{ ID: 1, Name: "opt1" },
{ ID: 2, Name: "opt2" }
];
Is it possible to define an alternate id key?
yes, there is an option called id
Function used to get the id from the choice object or a string
representing the key under which the id is stored.
$("#myselect").select2({
id: 'ID',
data: { results: dummy, text: "Name" },
formatSelection: function (item) { return item.Name; },
formatResult: function (item) { return item.Name }
});

Categories