Gain access to JSON information and store it in the datasource variable using the Kendo datasource function

Within my asp.net project, I have utilized the following approach to extract Json data from a js file:

var ds = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost:2544/JS/employee.js", dataType: "jsonp"
                    }
                }
            });
            ds.read();
            alert(ds.view().length);

Unfortunately, this method consistently returns 0 for me. My objective is to retrieve the column values in order to create a graph, but I am struggling to access the actual data.

The json dataset stored in the employee.js file is structured like so:

{
  "t1": [
    {
      "country": "United States",
      "year": "19994",
      "value": 4.9
    },
    {
      "country": "United States",
      "year": "1995",
      "value": 9.2
    },
   ------

Furthermore, I have included the necessary scripts within the head section of my page:

<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />

    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
javascriptasp.netjson

Answer №1

It is not possible to read a JS file directly from a URL. You need to add a function in your employee.js file.

For example:

function EmployeeData(){
 return [{
      "country": "United States",
      "year": "1994",
      "value": 4.9
    },
    {
      "country": "United States",
      "year": "1995",
      "value": 9.2
    }]
}

Then, call this function from the Datasource:

var ds = new kendo.data.DataSource({
                data:EmployeeData()
            });
            ds.read();
            alert(ds.view().length);

Make sure to include the employee.js file in the scripts head of your HTML document.

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

Generating Tree Structure Object Automatically from Collection using Keys

I am looking to automatically generate a complex Tree structure from a set of objects, with the levels of the tree determined by a list of keys. For example, my collection could consist of items like [{a_id: '1', a_name: '1-name', b_id ...

javascriptarraystypescripttreelodash

Can you send an array of objects as data in an AJAX post request?

My primary objective is to gather the dropdown values from a webpage and then send them to a PHP file for processing. Currently, I am using jQuery to achieve this by creating an overall schedule array and adding each element to it for updating. Here' ...

javascriptjqueryajax

Target the <select> element within a <tr> using jQuery selector and apply an empty css style

When looking at this HTML snippet, I am attempting to target the <select> element with id= "g+anything" inside the <tr id='g2'>. <table> <tr id='g1><td> <select id="gm"> <opt ...

javascriptjqueryjquery-selectors

Utilizing Javascript to filter data across multiple columns in tables

I've been experimenting with the JavaScript code below to filter table rows. The original code is from w3schools, but I made some modifications to target all input values. It works well for filtering one column, however, when I try to input a value in ...

javascriptjquerydom

THREE.js - Transformative Vertex Shader for Billboards

I am trying to figure out how to make an instance of THREE.Mesh always face the camera using a vertex shader instead of just relying on the [THREE.Mesh].lookAt() method. After reading through NeHe's Billboarding tutorial, I understand the concept exc ...

javascriptopengl-esthree.jsglslwebgl

Seeking a solution for resolving the problem with HTML1402 when using jquery URL in Internet Explorer?

Why is it that only IE (and not any other browser) gives me the error HTML1402: Character reference is missing an ending semi-colon “;” with this code: <!DOCTYPE HTML> <html> <head> <script src="http://code ...

javascriptjqueryinternet-explorerconsole

Tips for managing the second datepicker for the return journey on Abhibus using Selenium webdriver

I am currently working on a code to choose departure date and return journey date, but I am encountering an issue where the return journey date is not being selected. The driver seems to be skipping over the return date selection and proceeding directly to ...

javascriptjavaseleniumselenium-webdrivertestng

What is the best way to bring in the original files of a JavaScript library?

Currently I am utilizing a library called selection.js. Within my application, I am importing from node_modules with the following code: import * as Selection from '@simonwep/selection-js' However, what I am interested in doing is modifying the ...

javascriptnpmimportecmascript-6

Trouble arises when attempting to use JavaScript, JSP, and JSON in conjunction with

I am in the process of creating a client-server application where I send a request from the client to the server using a JSON object for registration. However, despite receiving a JSON response with an "OK" field as expected, the client keeps triggering th ...

javascriptjavajsonmongodbjsp

implementing a like button next to every item on a list using ajax

Help needed: How can I add a like button next to each item on my 'destinations' list? I'm struggling to figure out the placement. Any suggestions? Below is the content of my dashboard.html.erb file: <div class="destination-list"> ...

javascriptruby-on-rails

Angular 7+: Trouble with displaying images from assets directory

Details regarding my Angular version: Angular CLI: 7.3.9 Node: 10.15.3 OS: win32 x64 Angular: 7.2.15 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... rout ...

javascriptangularjsangular

Having trouble parsing a JSON Array containing sub arrays and objects

I am facing an issue with parsing the JSON data. I have tried accessing the JSON array in my MainActivity code, but unfortunately, I am unable to retrieve the details from the first element. Even after logging the arrayList returned from postExecute, it st ...

androidjsonapinetworking

Updating a page in ReactJS after retrieving data: A step-by-step guide

Just starting out with ReactJS and attempting to create an interactive comments section based on a design from frontendmentor.io. However, my App component is not displaying the expected content. Here is the code for my App component: function App() { ...

javascriptreactjsasynchronous

Unable to retrieve JSON element in ReactJS

Here is the code snippet that I am currently working with: const [questions, setQuestions] = useState([]) useEffect(() => { let idVar = localStorage.getItem('idVarianta'); idVar = JSON.parse(idVar) axios({ ...

javascriptnode.jsjsonreactjs

Tips on showing dynamic data in the label of my app's view controller after receiving it from the server, instead of using static, hardcoded values

Greetings to all my fellow programmers! As a newcomer to Swift programming, I have been delving into the world of parsing JSON data. Currently, I am working on an app that requires authentication from the server. After a successful authentication process ...

iosjsonswiftuilabel

The overflow of Highcharts tooltips is set to be hidden

My issue arises when the chart drawing area is smaller than a highchart tooltip, causing part of the tooltip to be hidden as it overflows the chart. I would like the tooltip to remain visible at all times, regardless of the size of the chart area. I have ...

javascriptjquerytooltiphighcharts

Testing the unit with a customized header in the interceptor

I've been struggling to execute a unit test within an Angular 6 interceptor, but despite numerous attempts, I keep encountering the following error: Error: Expected one matching request for criteria "Match by function: ", found none. I'm rela ...

javascriptangularunit-testingjasmineangular-http-interceptors

Rendering an Image File from Database Using React JS and Node JS

I am encountering a problem with displaying an image file from my mongodb database on my Profile and EditProfile component. The issue arises when I upload the file using the Editprofile component - it saves to the database successfully. However, when I try ...

javascriptnode.jsreactjsformidable

What is the best way to execute a function based on its name, which is provided as a parameter

Is there a better way to call a function by its name, passed as a parameter in JavaScript? Here's my scenario: I have a switch case where I need to set the data for an API ajax call. Once the ajax call is complete, I want to call a specific print func ...

javascriptjqueryajaxfunctionecmascript-6

Step-by-step guide on retrieving data from E-goi with REST API in Google Apps Script

Looking to extract data from the e-goi API, I found a .jar file in their documentation. Unfortunately, there are no examples provided for the REST API, leaving me unsure of how to access it directly. As I'm still new to programs like this, I could rea ...

javascriptjsongoogle-apps-script