I'm new to KendoUI, trying to populate a KendoUI grid with JSON data which is fetched from mongoDB as BsonDocument lsit and returned as JSON string,
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "WebService.asmx/GetJson",
dataType: "json",
data: {
q: "data"
}
}
},
schema: {
data: "statuses"
}
});
$("#grid").kendoGrid({
dataSource: ds
});
I tried this one, grid is not binding to me, was I'm doing wrong, how to bind my data to grid, pls help me waiting for kind reply.
note: Grid should not be defined structure with column fields, based on Json string grid structure has to changed.
I think you're probably trying to do too many things at once if you're new to KendoUI. Try just binding the grid to some static data (hard coded into the web page) that looks exactly like the data from MongoDB first... You should be able to extract this from MongoDB easily enough using something like MongoVue.
Once you're sure the data itself is in the right format and the grid is configured to use this properly, then try setting up a remote url or web service to fetch the data and make sure that the data retrieved from the remote url is what you're expecting.
Finally, when you have both of those pieces of the puzzle in place, you should look at hooking the KendoUI grid up to the remote web service.
Related
I am sending some data to my api by post and when it successfully submitted, it will return some data and I want to access the response data.
This is what I've got from my component :
this.http.post(this.restProvider.restApiUrl+'saveDraft', draftData, options)
.subscribe(data => {
console.log(data["_body"]);
}, error => {
console.log("Oooops!");
});
The console.log(data["_body"]); will resulting this data :
{"status":"ok","data_id":"2","statusMsg":"Saved as draft"}
What I'm trying to do now is to access the value of data_id but I'm not really sure how to get it inside my component. I thought it can be accessed by something like data["_body"]["data_id"]
I think data is an object. Try this:
console.log(data._body.data_id);
console.log(data["_body"].data_id);
Finally, I solved the issue by changing the console.log(data["_body"]); to console.log(data.json().data_id);
I refer to this discussion Angular 2: How to access an HTTP response body? and tried to apply the JSON and it works.
In my app I'm reading data from a JSON file and creating a model from it like this
var myModel = new sap.ui.model.JSONMOdel("pathToJson");
I have 300 values but I only want to read 50, is there a way to do that. I know I can use $top and $skip to select a specific set of values using OData. The API provides the function myModel.loadData() which contains a parameter oParameters but I don't know what I can pass in. Does anyone know if this possible?
The JSON model is a client-side model. This means that all the data is loaded at once with a single request. In the standard implementation, it has no methods for reading paged JSON contents (with top / skip or any other name you might give them).
You have said that you have a JSON file that you are loading. So such a paging does not even make sense from a technical point of view. This is because you cannot (easily) load a portion of a static file with client-only code (especially JSON, which is not valid if you are reading a fragment of it).
If you actually just want to store a segment of the file in the model, you can simply read the whole file with jQuery.ajax and then slice the array.
If you actually have a RESTful web service, then the paging mechanism should be part of this service (e..g it should have some path or query parameters for specifying the paging parameters). This service should return a valid JSON document for each call. On the client side, you can use such a service with the help of some functions (e.g. in the controller):
onInit: function () {
this.setModel(new JSONModel([])); // initially an emty array
},
//call this method when you want to read a page
onReadDataPage: function (iTop, iSkip) {
// use jQuery.ajax or jQuery.get to read a "page" of data; e.g.
jQuery.ajax({
url: "your service path",
data: {
top: iTop,
skip: iSkip || 0
},
success: this.onDataReceived.bind(this)
});
},
onDataReceived: function (aData) {
var oModel = this.getModel();
oModel.setData(oModel.getData().concat(aData);
}
If you want to use this in combination with a List with the growing feature, then you will need to create a new type of model - which is not trivial.
I have an API endpoint at /movies/:movie_id/actors.
I'm trying to use Ember Data to fetch this endpoint. I'm not interested in modelling movies at this point, just actors. My route looks like this:
this.route('actors', { path: '/movies/:movie_id/actors' });
My actor model is plain:
DS.Model.extend({
name: DS.attr("name")
})
In my actors route, I have:
model: function(params) {
// params contains movie_id
return this.store.findAll('actor')
}
This will cause Ember to send a request for /actors. How can I tell Ember to send a request to /movies/:movie_id/actors instead?
My JSON is being returned in the format { "movies": [ { … } ] } and I'm using the DS.ActiveModelAdapter, if that's at all relevant. I'm using Ember 2.0.
DS.Store doesn't work around "path" concept. It's more of a data bucket, which - when supplemented - can take burden of working with provider (fetch/update/create/cache etc.) off developer. In your case it looks similar to this:
ActiveModelAdapter, which you're using right now is using specific convention for accessing and isn't compatible with your data provider. So, what options do you have?
Customize ActiveModelAdapter by overriding pathForType or buildURL methods (note - links are for RESTAdapter, since ActiveModelAdapter subclasses it)
Choose more compatible adapter or even write your own
Don't use adapter - fetch the data through AJAX and feed it to store directly using push()/pushPayload()
I have a large mongoDB database set up and am trying to create a website where a user can use a searchbar to query the database remotely and have the results posted on the site (strictly read-only).
I have experience with databases for data analysis, but have never created a website for querying results.
I'm don't have any experience with web development and don't know what platforms (PHP? node.js?) to use.
Thanks in advance.
There are the following steps to the problem:
Create the front-end, which will consist of HTML, CSS, and Javascript. Beginners often find it easiest to work with jQuery and jQuery UI, because they are well-documented and contain plugins for almost all possible scenarios (they should not, however, be used to create large complex applications!). Bootstrap or Foundation can help you with the HTML / CSS.
Create a (probably) JSON API, which the front-end can communicate with to submit searches and retrieve results. You could use PHP, Python, Ruby, or many other languages to do this. For a simple site like the one you're describing, it's more a matter of preference than anything else.
Translate the search request from the front-end into the MongoDB query APIs, and return the results through the API. You will use a MongoDB client library compatible with whatever language you have chosen.
Depending on your needs, you may be able to eliminate (2) by using an existing REST API for MongoDB.
Note that if you just want to make MongoDB data accessible via searching / charting, then you may be able to avoid coding altogether by leveraging SlamData, an open source project I contribute to. SlamData lets you use Google-style search (or more advanced SQL) to query MongoDB and get the results back in tabular or chart form.
I am doing such in nodejs.
In my server side app I have connection via mognoose like:
var mongoose = require('mongoose');
mongoose.connect('mongodb://yourhost/database');
Next you need to have your model to your database
var YourDBVarName = mongoose.model('collectionName', {
yourfields1 : type,
yourfields2 : type,
yourfields3 : type
...
});
Then I make GET for it
var express = require('express');
var app = express();
app.get('/dblisting', function(req,res){
YourDBVarName.find({ yourfieldsX: 'value'}, function(err, data) {
if(err) {
res.send(err.message);
}
else{
res.send(data);
});
});
Then simply you make some GET with $.ajax to yournodeserver.com/dblisting and in response you recive your collection filtered as in
{ yourfieldsX: 'value'}
Ofcourse you may do just {} so you get all your stored data.
SLee
If you want know about retrieving data from mongoDB, you can use my github https://github.com/parthaindia/CustomMongo .Use getByCondition() method which requires collection name and a Map . The Map can be your queries in form of key value pair,Key being the column name. I use this method when I write search Query for the web development. The java code gives you a Json. Write a Servlet to post your Json to WEB UI.
This is an example to show how to post the retrieved data using Js ,"server_base_url + /server/FetchData" would be your Service URL.The data you has to be appended to a table . Or a span ,depends on what you actually want.The below code appends data
function getdata() {
$.get(server_base_url + "/server/FetchData", {
}).done(function (data) {
$.each(data, function (index, value) {
alert("The Index" + index + "The Value" + value);
$("#11table1").append("<tr><td id='dynamicid1" + index + "'>" + value + "</td></tr>");
});
});
}
This function can be used for defining table
function defineTable() {
$("#mainDivID").text("").append("<div id='contpanel' class='contentpanel'>");
$("#contpanel").append("<div id='rowid11' class='row'>");
$("#rowid11").text("").append("<div id='row11table1' class='col-md-12'>");
$("#row11table1").text("").append('<br /><br /><center><h5 class="lg-title mb5" style="background-color:#428BCA;height:20px;color:#fff;padding-top:4px;"><b>Heading</b></h5></center>');
$("#row11table1").append("<div id='table11id1' class='table-responsive'>");
$("#table11id1").append("<table id='11table1' class='table table table-bordered mb30' >");
$("#11table1").append("<thead><tr><th>Index</th><th>Value</th></tr></thead>");
}
I am trying to import data from mongodb into jade template, in order to show them in graph. I am using chart.js inline script, in order to render data on graph. So data from Mongodb is on the page, and I can access it like this:
each city in cities
p #{city.name}
And here is how I pass data to page:
exports.index = function(req,res){
var cities = City.find({}).limit(20);
cities.exec(function(err,doc) {
res.render("index",{cities:doc});
});
};
I created same app with php, by simply passing data to page and injecting data into javascript graph(with json_encode)
Here is final result with php:
It was easy, since php data are global to HTML page. How to do that with Jade ?
Thanks
Ah, so your goal is to both use the city data to generate HTML on the server but ALSO make it available in the browser as raw javascript object data. To do that you format it as JSON and stuff it into a <script> tag. There are modules to help with this such as sharify,
but the basic idea in your jade template do something like:
In your express route handler javascript:
exports.index = function(req,res){
var cities = City.find({}).limit(20);
cities.exec(function(err,doc) {
//There are tricky rules about safely embedding JSON within HTML
//see http://stackoverflow.com/a/4180424/266795
var encodedCityData = 'window.cities = ' + JSON.stringify(cities)
.replace(/</g, '\\u003c')
.replace(/-->/g, '--\\>');
res.render("index",{cities:doc, encodedCityData: encodedCityData});
});
};
In your jade template:
script!= encodedCityData
In the browser, you will have access to the data via the cities variable which has been set onto the window object.