The basic Kendo UI remote DataSource fails to fetch any data

I'm working on a basic exercise where my DataSource object is not returning any data. Here's a snippet of the code:

var data = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "data.json",
                    dataType: "json"
                }
            }
        });

        console.dir( data );

The content of data.json file is as follows:

[
    {
        "text": "Brand One"
    },
    {
        "text": "Brand Two"
    },
    {
        "text": "Brand Three"
    },
    {
        "text": "Brand Four"
    }
]

Can anyone provide any insights or suggestions?

javascriptjsonkendo-ui

Answer №1

Your code has a couple of issues that need to be addressed.

  1. Make sure to first call data.read() in order to perform the request.
  2. Since the operation above is asynchronous, calling data.data() immediately after data.read() will not return anything. You must wait for the data to be retrieved by utilizing the requestEnd event.

Answer №2

I have the ability to load an array into a data source and then return an object, as shown below: 

var items = [
    {
        "name": "Item One"
    },
    {
        "name": "Item Two"
    },
    {
        "name": "Item Three"
    },
    {
        "name": "Item Four"
    }
];

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    data: items,
                    dataType: "json"
                }
            }
        });

console.log(dataSource)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

how to set up automatic login for a user after changing their password using passport-local-mongoose

Trying to automatically log in a user, but encountering an issue with the current 'update' function that looks like this exports.update = async (req, res) => { const user = await User.findOne({ resetPasswordToken: req.params.token, re ...

javascriptnode.jsexpresswebpassport-local

When using the HTML5 input type time in Chrome and the value is set to 00:00:00, it may not be fully completed

After inputting the html code below <input id="time_in" type="time" step="1" name="duration"> and setting the value in the browser to "00:00:00", everything appears fine. However, upon inspecting the console or submitting the form, the value gets ...

javascriptjqueryhtmlgoogle-chrome

Monitoring AJAX POST progress with Node.js and Multipart: XMLHttpRequest

Is there a way to provide real-time updates on the size of a file being uploaded to a client, similar to how YouTube does it? I've looked into getting the full size of the file with req.files.myFile.size, but is there a method to track the current siz ...

javascriptnode.jsfile-uploadmultipart

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Behold the mighty TypeScript class: class Saluter { public static what(): string { return "Greater"; } public target: string; constructor(target: string) { this.target = target; } public salute(): string { ...

javascripttypescriptecmascript-5iife

The function WebGLRenderer() from three.js allows for rendering in

When initializing the WebGLRenderer, I am passing in a canvas DOM element like shown below: var jqc = $('#myCanvas'); //accessing canvas with jQuery; var par = {canvas:jqc.get()}; //creating parameter object with canvas DOM element var renderer ...

javascriptthree.js

Vercel Next JS features server and client components with distinct timezones

In my Next.js 13.2.4 project, there is a useful helper function named getLocalTime(date) that retrieves the local time of the user's machine in a specific format. //Desired output: 9:30PM export function getLocalTime(date) { const localTime = new D ...

javascriptnode.jsreactjsnext.jsvercel

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

Execute a cURL command in the command prompt to interact with

As a newcomer to the world of curl, I attempted to convert a command from cmd to PHP: curl -k -v -u "user:password" -X POST -d'{"username":"testuser","password":"testpassword"}' -H 'Content-Type:application/json' url After some trial ...

phpjsoncurl

Tips for setting a data-attribute on the body tag using the current route name in Vue

I have been considering adding a data-attribute to the body of my vue-app that would display the current route's name. I prefer not to utilize the vue-body-class package and want to keep it simple. Currently, I am implementing this in each of my main ...

javascriptvue.jsvuejs2

Numerous linkages facilitated by node-mongodb-native

Currently, I am working on a function aimed at inserting a document into a MongoDb database using the node-mongodb-native module. The function works perfectly fine, except when multiple documents are inserted back-to-back. To test how my function handles m ...

javascriptnode.jsmongodbnode-mongodb-nativedatabase

Warning: The core schema has detected an unknown property `color` for the component or system `undefined` in Aframe + Vuejs. This issue was flagged within 10 milliseconds in

I am facing some challenges trying to integrate Aframe and vuejs seamlessly, as the console is displaying warning messages. It seems like Aframe is validating the attribute values before vue has a chance to modify them. Warning messages core:schema:warn ...

javascriptvue.jsaframe

What is the reason behind the continual change in the background image on this website?

Can you explain the functionality of this background image? You can find the website here: ...

javascripthtmlcss

Using jQuery to select the third element from every group of six

I am attempting to select the 3rd .foo element out of every set of 6. To clarify, here is a brief example: 1 2 3 (this) 4 5 6 1 2 3 (this) 4 5 6 and so on... So far, I have only managed to target every 3rd element, which is not exactly what I need beca ...

javascriptjqueryhtmlcss

Leveraging JavaScript code repeatedly

Apologies if this question has been asked before, as I couldn't find it. I have an HTML table with images used as buttons: <td> <button class="trigger"> <img src="D:\Elly Research\ CO2858\Presentation\Calypso ...

javascripthtmlcss

modifying the source of an Ajax POST request

Is it possible to modify the referrer in an HTTP Ajax call using jQuery or JavaScript? I'm looking to send a request from my page but have the referrer appear as though it came from another page. Any insights would be appreciated. ...

javascriptajaxjqueryhttp-headers

The clash between mootools and jQuery

I'm facing an issue with a simple form on a page that loads both Mootools and JQuery. Even though JQuery is in no conflict mode, I am encountering problems. There's a form input named "name"-- <input class="required" id="sendname" name="send ...

javascriptjquerymootools

Unable to properly call a JavaScript file from an HTML file

Executing this simple code with the JavaScript line placed under Script tags will trigger the desired alert message: <!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <body> <script type="text/javascript" > ...

javascripthtmlscripting

What is the best way to toggle the enablement of a textbox with jQuery?

Welcome all! Initially, all controls are disabled. Upon clicking the Add or New button, I want to enable textboxes and the Save button while keeping the Edit and Delete buttons disabled. Once the Save button is clicked, I wish to disable all textboxes and ...

javascriptjquery

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss