asked on

JSON Data from web page doesn't seem to work with code

I am trying to use JSON data from my local site and it appears to not load. The format of the JSON is in the following format:

[{"id":"5bf300018asdfdsasdf","cpuUser":"2.12df","cpuLoader":"3.00212","netTotText":null}]

I am unable to see it as data on my web page even though in it's raw form on the web page, it seems to work. What can I do to resolve this issue? Thank you!

Leonidas Dosas

Could you post the errors that you have in your console? And how you take the data from the server? I mean the method.

VBBRett

ASKER

Not really getting any errors, I'm just not getting any data. I am using something called Fancygrid and I'm not sure how to set it up to pull from an api or json data that is on a url. I did discover this: https://fancygrid.com/api/config/data/proxy/api

Leonidas Dosas

Check this example. I use stringify first and then JSON.parse to conert the array to json object.

JS code:

var a=[{"id":"5bf300018asdfdsasdf","cpuUser":"2.12df","cpuLoader":"3.00212","netTotText":null}];

console.log(JSON.parse(JSON.stringify(a)));

Open in new window

VBBRett

ASKER

so how would I do the following?

<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function () {        
  new FancyGrid({
    title: 'JSON Data',
    renderTo: 'container',
    width: 1200,
    height: 400,
    data: data,    
    defaults: {
      type: 'string',
      width: 100,
      sortable: true
      },
      data: {
          proxy: {
              url: 'https://localhost:44339/api/DellLaptop',
              method: 'GET'
          }
      },
      columns: [{
          index: 'ObjectId',
          width: 100,
          locked: true,
          title: 'ObjectId'

      }, {
              index: 'id',
              title: 'id'
          },
          {
          index: 'cpuLoadUser',
          title: 'cpuLoadUser'
          }, {
              index: 'cpuLoadKernel',
          title: 'cpuLoadKernel'
          }, {
              index: 'cpuLoadIdle',
          title: 'cpuLoadIdle'
          }, {
              index: 'ramUsageTotal',
          title: 'ramUsageTotal'
          }, {
              index: 'ramUsageUsed',
          title: 'ramUsageUsed'
          }, {
              index: 'ramUsageFree',
          title: 'ramUsageFree'
          }, {
              index: 'dev',
          title: 'dev'
          }, {
              index: 'time',
          title: 'time'
          }, {
              index: 'diskUsageUsed',
          title: 'diskUsageUsed'
          }, {
              index: 'netRateRx',
          title: 'netRateRx'
          }, {
              index: 'netRateTx',
          title: 'netRateTx'
          }, {
              index: 'netTotTx',
          title: 'netTtoRx'
          }, {
              index: 'netTotTx',
              title: 'netTotTx'
          }    
    ]
  });
    });

Open in new window

Zakaria Acharki

To help here we need to know what your api route return, so please try the following request and share with us the console output :

$.get('https://localhost:44339/api/DellLaptop',function(r){
       console.log( r );
});

Open in new window

If your API returns the same data as the sample you provided :

[{"id":"5bf300018asdfdsasdf","cpuUser":"2.12df","cpuLoader":"3.00212","netTotText":null}]

Open in new window

So it will work just fine like this LIVE EXAMPLE

VBBRett

ASKER

Thank you! I will post the results today and hopefully we can come to an understanding of what my problem is.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.