Convert Json response to HTML Table - html

How do I display all the points in this Json return statement to an HTML table on my view?
return Json(
new
{
vol = exposure.Volatility,
points =
from point in exposure.ExposurePointCollection
select new
{
date = point.ExposureDate,
val = point.MaximumExposure
}
});

If this is the result of an ajax call, you will need to iterate over the collection (presumably the "points" value) and add them to the DOM via javascript. jQuery can help with this, but there are also plug-ins for jQuery that will do virtually all of the work for you, something like jqGrid comes to mind.
Looping through the json result (assuming "points" is what you are looping over)
success: function(data){
jquery.each(data.points, function(index, value){
//index is the index of the array, value is the actual value
});
}
Look here for using jQuery to modify the DOM: http://api.jquery.com/html/#html2

Related

Manually parse json data according to kendo model

Any built-in ready-to-use solution in Kendo UI to parse JSON data according to schema.model?
Maybe something like kendo.parseData(json, model), which will return array of objects?
I was searching for something like that and couldn't find anything built-in. However, using Model.set apparently uses each field's parse logic, so I ended up writing this function which works pretty good:
function parse(model, json) {
// I initialize the model with the json data as a quick fix since
// setting the id field doesn't seem to work.
var parsed = new model(json);
var fields = Object.keys(model.fields);
for (var i=0; i<fields.length; i++) {
parsed.set(fields[i], json[fields[i]]);
}
return parsed;
}
Where model is the kendo.data.Model definition (or simply datasource.schema.model), and json is the raw object. Using or modifying it to accept and return arrays shouldn't be too hard, but for my use case I only needed a single object to be parsed at a time.
I actually saw your post the day you posted it but did not have the answer. I just needed to solve this problem myself as part of a refactoring. My solution is for DataSources, not for models directly.
kendo.data.DataSource.prototype.parse = function (data) {
return this.reader.data(data);
// Note that the original data will be modified. If that is not what you want, change to the following commented line
// return this.reader.data($.extend({}, data));
}
// ...
someGrid.dataSource.parse(myData);
If you want to do it directly with a model, you will need to look at the DataReader class in kendo.data.js and use a similar logic. Unfortunately, the DataReader takes a schema instead of a model and the part dealing with the model is not extracted in it's own method.

How to format a json string and show result in table?

I am using CakePhp _serialize method to make a web service and show the data in JSON format.I used the .json extension at the end of the URL to show this data.Now i want to show this data in table.Output image is attached.Is this possible then how i can do it?
Thanks
The format is a bit odd. I would prefer something like: "task_list": [ .... ]; iterating over objects is always a bit tedious.
Here is the jQuery code:
var data = ...;
var items = data["task_list"];
var table = $('<table/>');
table.appendTo($('body'));
$.each(items, function(id, value) {
var tr = $('<tr/>');
table.append(tr);
$('<td/>').text(id).appendTo(tr);
$('<td/>').text(value).appendTo(tr);
});

Formatting date field in KendoUI Grid coming as object

I am trying to format a date field in KendoUI Grid where the field is coming as an object:
"callStart":{"date":"2014-01-24 12:04:36","timezone_type":3,"timezone":"Europe\/Berlin"}
I have tried:
{ field: "callStart", title: "Fecha", width: "100px", format: "{0:yyyy-MM-dd}" }
but still showing:
[object Object]
Any idea?
Thanks!
Don't know if you already solved it, but I'll answer late anyways. The reason why it's not working is because you are probably trying to bind the entire object callStart into the field column. The field expects only a date object, but you are not giving it one.
Also, your object seems to still be in JSON string format, you need to parse the object out as a first step (if it really is just raw JSON). Then the next step, you can:
Parse callStart on the columns themselves (with kendo Templates)
Parse callStart on the datasource itself through its schema
Option 1: Parse on the column field itself using a template
{
field: "callStart",
title: "Fecha",
width: "100px",
template: "#= kendo.toString(kendo.parseDate(callStart.date, 'yyyy-MM-dd HH:mm:ss'), 'MM/dd/yyyy') #"
}
The advantage of this option is that your data source object still maintains its original form, but filtering and sorting may get a bit tricky.
Option 2: Parse the object through the dataSource schema
var gridDS = new kendo.data.DataSource({
data: result,
schema: {
parse: function (result) {
for (var i = 0; i < result.length; i++) {
var resultItem = result[i];
resultItem.callStart = kendo.parseDate(result[i].callStart.date, 'yyyy-MM-dd HH:mm:ss');
}
return result;
}
},
//etc...
});
Each data source object goes through the parse function and you can do whatever processing you need to do to turn it into a JS date or kendo Date object. The advantage is that you can control the exact type for that column and makes filtering/sorting easier.
You'll probably have to do some tweaking to get your desired output, but these are the general options you need to pick from.

how to parse json data to mootools javascript?

im using mootools.
before i getting this json data
{"id":"120","name":"bassara","year":["1999","2003"],"cc":["2.4","2.5","3.0"],"type":"4","trans":["1"],"wd":["1","3"],"fuel":["1","2"],"hand":["1"],"hybrid":["1"]}
in javascript
function get_cdata(){
var jsonRequest = new Request.JSON({
url: 'ajax_model_info.php?cid=' + cid,
onSuccess: function(car){
(car.id.[1],car.name.[1],car.year.[1])
}
}).send();
}
its ok. but now i have to get data from this json
[{"7":{"1":0}},{"7":{"2":0}},{"7":{"3":0}},{"10":{"1":0}},{"10":{"2":0}},{"3":{"1":0}},{"3":{"2":0}},{"3":{"3":0}},{"3":{"4":0}},{"5":{"1":0}},{"5":{"2":0}},{"5":{"3":0}},{"5":{"4":0}}]
how to get data like first example. because its easy. sorry for noob question.
this is just like any other array of objects you need to iterate.
var data =
[{"7":{"1":0}},{"7":{"2":0}},{"7":{"3":0}},{"10":{"1":0}},{"10":{"2":0}},{"3":{"1":0}},{"3":{"2":0}},{"3":{"3":0}},{"3":{"4":0}},{"5":{"1":0}},{"5":{"2":0}},{"5":{"3":0}},{"5":{"4":0}}];
data.each(function(obj){
// mootools iterator
Object.each(obj, function(val, key){
console.log('key is: ' + key);
// inner loop again or
// or standard js iterator
for (var k in val){
if (val.hasOwnProperty(k)){
console.log(k, val[k]);
}
}
});
});
Mootools gives you lots of tools for working with Objects and Arrays - read the manual for both Types methods here: http://mootools.net/docs/core/Types/Object and http://mootools.net/docs/core/Types/Array
Useful ones here may be pluck, Object.keys, Object.values etc. many ways to approach.
Keep in mind that numeric properties of objects are not covered by FIFO in the spec and Chrome (webkit) tends to sort them and produce them in the wrong order.

How to get the values from the Json using Jquery

Hi I'm new to Jquery and i don't know how to use json data. I have a Json which is coming as a response. My success function is
success: function(resp)
{
var x = JSON.stringify(resp);
alert(x);
}
alert is having following JSON
{"xyz":{"abc":[{"action":"fail","result":"xxx"},{"action":"pass","resut":"yyy"}]}}
I want action value alone. How can i get this value from x variable and how can i utilize this value in HTML. Thanks in advance.
When you use JSON.stringify() you are turning it into a string, you want it as an object to access the data. Try this:
success: function(resp) {
alert(resp.xyz.abc[0].action);
var x = resp.xyz.abc[0].action // to use the value in html later on
}
If it is returned as a string (I can't tell at this point), you can turn it into an object (as long as it is valid JSON) by using $.parseJSON()
success: function(resp)
{
var x = $.parseJSON(resp);
var xyz = x.xyz;
var pass = x.xyz.abc[1].action;
}
or you can loop though each of the array by $.each
success: function(resp)
{
var x = $.parseJSON(resp);
$.each(x.xyz.abc, function(index, element){
alert('action:' + element.action + ', result:' + element.resut)
});
}
i think, and don't take it personally,that your JSON object is not well organized as an object to get and to have. Action,from my perspective is either fail or success, and reading it, as you saw in the above good answer, will give you exactly what you want.
What's the point in getting a JSON with data structured like you did, with 2 possible answers encoded in it, when there is only one available (either success or fail).