Datasource NOOB question - bind to HTML value

[Mike]

I want to create a datasource that reads a JSON file, and binds one of the fields to a <p>XXX<p/> value in HTML.

I know how to link a variable to a text value using jQuery ... $("#divName").text(variable)

but I don't know how to extract the data from the datasource and use it.

Can someone give me a quick feel for how this would work?

thx. 

[Nikolay Rusev]

Hello Mike,

You can use templates( another example ) to generate HTML. Other option is to get current view from the DataSource and manually set text of the paragraph.

All the best,
Nikolay Rusev
the Telerik team

[Mike]

Nikolay,

Thanks, this is very helpful.  As an expansion on the original question, do you know how to comb through a multi-layer JSON file?

For example.  Let's say I have a JSON file that looks like this:

///////////////
{"item": "item1", "price": "$2.50", "details": [
{ "sku": "11111",
  "instock" : "YES",
  "storeNum": "3352"
}
          ]

////////////////

With jQuery I would reference items using dataSource.item, etc.

How do I reference the various layers of data using the Kendo datasource?

I know this is probably a simple question, but help understanding how to reference data returned from the datasource would be greatly appreciated.

thanks,




  

[Nikolay Rusev]

Hello Mike,

If I understand your question correctly you can specify schema.data for the DataSource in order to instruct the DataSouce from where to read it's data.

For more modetails see the sample jsfiddle:
http://jsfiddle.net/FRztC/

Greetings,
Nikolay Rusev
the Telerik team

[Mike]

Thank you!  This is very helpful!

[Mike]

OK, one final question.  Using the above JSON, how would I assign the value of "item" or "price" to a variable to use in my javascript.

would it simply be:

var x = dataSource.view;
var y = x[0].item:
alert(y);

I tried this and it doesn't seem to work...

[Nikolay Rusev]

Hello Mike,

schema.data: "details" specifies where the DataSource should load it's data from. This is due to the fact that the DataSource can only contains an list of items (the value of details field).

So the answer to your question is - no. If you need the data you will have to use $.ajax.

Greetings,
Nikolay Rusev
the Telerik team

[Mike]

OK, I understand.  If I set my schema to "details" that is where it will come from.  

I would like to use dataSource if possible (vs. switching between dataSource and $.ajax), so let me pose this question?

If my data were a simple JSON file such as:

{"item": "item1", "price": "$2.50",}
{"item": "item2", "price": "$4.50",}

using this simple JSON if I did not set a schema in my dataSource would the below code reference an item?

var x = dataSource.view;
var y = x[0].item:
alert(y);

 

[Alexander Valchev]

Hi Mike,

Generally speaking you can reference an item in this way, though there are a few things that you should consider.

• view is a method: var x = dataSource.view();
• if the data in the dataSource is not loaded before the view is called, it will return an empty array
• note that the Ajax requests are asynchronous by default, so in order to ensure that the data is loaded when you reference the item, I will recommend to hook up to the change event.

For convenience please check the following example: http://jsfiddle.net/valchev/vyP88/ 

Regards,
Alexander Valchev
the Telerik team

[Mike]

Alexander, 

Thank you for the response.  This is very helpful.  I think I'm still struggling with completely understanding how to use dataSource.  In your example the reference to item[0] is performed in the "change" event.  In my case I want to independently reference the event from another function.  To accomplish this would I just re-read the dataSource and reference the event at that time?

example:

function findItem0 (){
dataSource.read();
var x = dataSource.view();
var y = x[0].item;
alert(y);
};

[Alexander Valchev]

Hello Mike,

The transport of the dataSource uses jQuery.ajax method to perform requests to the server. As I mentioned in my previous reply,the Ajax requests are asynchronous by default and as a result you have to get the view of the data after it has been fetched from the server.

function findItem0 (){
    dataSource.read();
    //most probably at this point the read transport will not be finished
    //and the view() will return an empty array - []
    var x = dataSource.view();
    var y = x[0].item;
    alert(y);
};

In other words, the above code will work well with local, but not with remote Json data.


Greetings,
Alexander Valchev
the Telerik team

[Mike]

What would be the best method to accomplish this using remote JSON data?

[Alexander Valchev]

Hello Mike,

Did you checked my previous example? It uses jsfiddle echo service to simulate binding to remote JSON data and illustrates a possible way to achieve your goal.

I used the change event in order to ensure that at the moment when I am getting the view, the data from the server has been already received.
It is possible, but not recommended, to call the function findItem0 from another place. It will work as expected as long as the data from the server has been loaded at this moment.

All the best,
Alexander Valchev
the Telerik team

[Zarmed]

cool info thanks

[Miley]

I have the same question. Based on the comment you've given, it can help me a lot. Thanks for the answer. :)

[Farhan]

Very useful information ! Thanks for posting.

_____________________________
Abogados Barcelona