I am working on a application which is nicely modularized using requirejs. One of the modules called data service is in charge of providing other modules with data. Pretty much all get* methods of this module return javascript script objects in the the following format:
res = {
totalRows: 537,
pageSize: 10,
page: 15,
rows: [
{
id: 1,
name: 'Angelina'
...
},
{
id: 2,
name: 'Halle'
...
},
{
id: 3,
name: 'Scarlet'
...
},
{
id: 4,
name: 'Rihanna'
...
},
{
id: 5,
name: 'Shakira'
...
},
....
//10 rows
{
id: 10,
name: 'Kate'
...
}
]
}
Is it possible to initialize the data table by providing it with rows for the current page, current page number, page size and the total number of records or pages so that it "knows" which page is currently being displayed as well as the number of available pages. Which in turn would allow the DT to build the pager correctly allowing the user to navigate to other pages in which case we would make another call to data service module to retrieve data from the database for the selected page.
Related
I am working with Reactjs/Nextjs and i am fetching data from "comments.js"
in this file right now data is statically displaying,Here is my current data
export const books = [
{
id: 1,
title: "Things fall apart",
},
{
id: 2,
title: "Fairy tails",
},
...
]
I want to know that how can i convert this "static" data to "dynamic"(from server or database/mysql) ?
I'm trying to figure out the best way for my Redux Store to handle lists. Right now it looks like this:
Store = {
users: [],
posts: [],
lists: [],
}
My problem with this, is the list array. Essentially it's a store for paginated lists of a specific resource, so for example:
lists: [
{
id: 'users/43/posts',
items: [25, 36, 21]
}
]
Since I am using the url as the id, my component that shows a user's list of posts will know exactly which list to display. Now someone has told me that, this is a very very bad idea. And I just want some advice on what could be better. Another approach suggested was this:
users: [{
id: 2,
posts: [
{
url: 'users/2/posts',
items: [13, 52, 26],
}
]
}]
So what I don't understand, how does Redux know where to save this list? Do I have to specify in the action arguments where to save it?
Thank you for your advice.
Well, technically, anything works if you make it work! The second approach looks more mature, though. You don't want to use URLs as ID. IDs should be numbers or special sequence of characters+numbers. When your application grows, you'll want to normalize your data i.e. store the IDs in a separate array and transform the array of objects into an object with keys as ID.
Example from Normalizr
[{
id: 1,
title: 'Some Article',
author: {
id: 1,
name: 'Dan'
}
}, {
id: 2,
title: 'Other Article',
author: {
id: 1,
name: 'Dan'
}
}]
can be normalized to -
{
result: [1, 2],
entities: {
articles: {
1: {
id: 1,
title: 'Some Article',
author: 1
},
2: {
id: 2,
title: 'Other Article',
author: 1
}
}
}
}
When your application grows, you'll have multiple reducers and sub-reducers. You'll want to slice a specific portion of your state-tree and so on. For that reason someone might have advised you to store your state in a different manner.
But again, anything works if you make it work! Good luck!
I would like to generate this array in a JavaScript file
var sports = [{ id: 1, value: "Baseball" },
{ id: 2, value: "Soccer" },
{ id: 3, value: "Basketball" },
{ id: 4, value: "Volleyball" },
{ id: 5, value: "Tennis" },
{ id: 6, value: "Running" },
{ id: 7, value: "Swimming" },
{ id: 8, value: "Tournament"}];
I have started with:
var sports = db.Sports;
But now I am stuck on how to include this in a JavaScript file. Does .net have embedded JavaScript file like Rails do?
You'll need to just retrieve the data and serialize it into javascript. If those two are the only columns, you can do a straight serialization with JavaScriptSerializer or JSON.NET. If not, you'll need to convert them, maybe something like (using JSON.NET):
var x = db.Sports.Select(s => new { id = s.id, value = s.value }).ToArray();
string json = JsonConvert.SerializeObject(x);
Once you have this JSON string, you can dump it onto a page however you want, or write it directly to the response.
If you need to know a specific way to do this part, we'd need more details (WebForms or MVC, inside a page or a separate javascript resource, etc.)
EDIT:
Adding it to the view once it's in the ViewBag is straightforward. Inside your script on the view:
var sports = #Html.Raw(ViewBag.Sports);
// or if you're not using Razor:
var sports = <%= ViewBag.Sports %>;
Since ViewBag.Sports is already properly serialized, you don't need to worry about quotation marks or brackets.
I have a Backbone Collection of Models that have different data coming in on page load than when it's fetched.
For example, the attributes coming in on page load are:
[{ name: 'cat', color: 'yellow' },
{ name: 'dog', color: 'brown' },
{ name: 'fish', color: 'orange' }]
Then, on fetch() (or otherwise updated from the server while the page lives, the data looks like:
[{ name: 'cat', current: 5, total: 100 },
{ name: 'dog', current: 6, total: 50 },
{ name: 'fish', current:7, total: 25 }]
How can I update the Backbone Collection with the new data while retaining the old data? IDs are not assigned from the server (name is guaranteed unique).
I ended up going with this. This will update the properties for models that exist while also removing models that did not come in and adding new ones.
Backbone.Collection.prototype.update = function(col_in){
var self = this,
new_models = [];
_(col_in).each(function(mod_in) {
var new_model = self._prepareModel(mod_in),
mod = self.get(new_model.id);
if (mod) {
new_models.push(mod.set(mod_in, {silent:true}));
} else {
new_models.push(mod_in);
}
});
this.reset(new_models);
};
Note the use of _prepareModel this is important so that the Models can be identified via whatever "id" property is used in the Backbone Model object.
I am trying to use the StoreSeries with Dojo in order to create charts. However when I try to create the array by:
new StoreSeries(store, { query: { site: 1 } }, "value");
Then the javascript stops running and cannot continue to render the chart.
This is all the script that I think might be relevant - ask if you need to see any more.
function setupWeekElectricBar(Chart, theme, ClusteredColumns, Columns, Tooltip, Highlight, Observable, Memory, StoreSeries)
{
var data = [
{ id: 1, value: 5, site: 1 },
{ id: 2, value: 2, site: 1 },
{ id: 3, value: 3, site: 1 },
{ id: 4, value: 1, site: 1 },
{ id: 5, value: 3, site: 1 },
{ id: 6, value: 1, site: 1 }
];
// Create the data store
// Store information in a data store on the client side
var store = Observable(new Memory({
data: {
identifier: "id",
label: "Users Online",
items: data
}
}));
var result = new StoreSeries(store, { query: { site: 1 } }, "value");
//function does not get past here (checked using alert())
}
require([
// Require the basic chart class
"dojox/charting/Chart",
// Require the theme of our choosing
"dojox/charting/themes/Tufte",
// Charting plugins:
// We want to plot Pie and ClusteredColumns charts
"dojox/charting/plot2d/Pie",
"dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/Grid",
// Retrieve the Legend, Tooltip, and MoveSlice classes
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/action2d/Highlight",
// We want to use Markers
"dojox/charting/plot2d/Markers",
// We'll use default x/y axes
"dojox/charting/axis2d/Default",
"dojo/parser",
"dojo/store/Observable",
"dojo/store/Memory",
"dojox/charting/StoreSeries",
"dijit/dijit", // loads the optimized dijit layer
"dijit/Calendar",
// Wait until the DOM is ready
"dojo/domReady!"
], function(Chart, theme, Pie, ClusteredColumns, Columns, Grid, Tooltip, MoveSlice, Highlight, Observable, Memory, StoreSeries) {
setupWeekElectricBar(Chart, theme, ClusteredColumns, Columns,Tooltip, Highlight, Observable, Memory, StoreSeries);
}
});
Fixed by moving
"dojo/store/Observable",
"dojo/store/Memory",
"dojox/charting/StoreSeries",
further up.