I am trying to create a web app to monitor system activity, and I am using Flask as my CMS. More specifically, I am stuck trying to get the system information to update periodically without the page refreshing. Right now I'm testing the web app by retrieving local information in percentages.

I created a route called "/refresh", and added the local information to that in JSON format:

@app.route('/refresh')
    def refreshData():
        systemInfo = {'cpuload': si.getCPU(), 'memload': si.getMEM(), 'diskload': si.getDiskSpace()}
        return jsonify(systemInfo)

The data looks like this:

{
  "cpuload": 4.3, 
  "diskload": 0.7, 
  "memload": 27.8
}

As of now I am using Flask's variables to display the information in my template, but I would like to access the JSON data in a script within the HTML and set it to an HTML element and have that update every so often. I've tried using knockout, but I couldn't get that to work either. My template looks like this:

<ul id='sysInfo'>
    <li>Hostname: {{ sysInfo[0] }}</li>
    <li>CPU Core Count: {{ sysInfo[1] }}</li>
    <script type='text/javascript' src=".min.js"></script>
    <script type='text/javascript' src=".1.0.js">
        function update() {
            $.getJSON('/refresh', function(data) {
                $('#cpu').html(data[cpuload]);
                window.setTimeout(update, 5000);
            });
        }
    </script>
    <li>
        <div id="progress">
            <span id="percent">CPU usage: <div id="cpu"></div>%</span>
            <div style ='height: 20px; background-color: green; width: {{ cpuLoad }}%;'></div>
        </div>
        </li>

I am aware the script in HTML doesn't really make much sense, but basically I just want to get the data using getJSON (or whatever's best), and put that data into my HTML.

I am trying to create a web app to monitor system activity, and I am using Flask as my CMS. More specifically, I am stuck trying to get the system information to update periodically without the page refreshing. Right now I'm testing the web app by retrieving local information in percentages.

I created a route called "/refresh", and added the local information to that in JSON format:

@app.route('/refresh')
    def refreshData():
        systemInfo = {'cpuload': si.getCPU(), 'memload': si.getMEM(), 'diskload': si.getDiskSpace()}
        return jsonify(systemInfo)

The data looks like this:

{
  "cpuload": 4.3, 
  "diskload": 0.7, 
  "memload": 27.8
}

As of now I am using Flask's variables to display the information in my template, but I would like to access the JSON data in a script within the HTML and set it to an HTML element and have that update every so often. I've tried using knockout, but I couldn't get that to work either. My template looks like this:

<ul id='sysInfo'>
    <li>Hostname: {{ sysInfo[0] }}</li>
    <li>CPU Core Count: {{ sysInfo[1] }}</li>
    <script type='text/javascript' src="http://code.jquery./jquery.min.js"></script>
    <script type='text/javascript' src="http://knockoutjs./downloads/knockout-3.1.0.js">
        function update() {
            $.getJSON('/refresh', function(data) {
                $('#cpu').html(data[cpuload]);
                window.setTimeout(update, 5000);
            });
        }
    </script>
    <li>
        <div id="progress">
            <span id="percent">CPU usage: <div id="cpu"></div>%</span>
            <div style ='height: 20px; background-color: green; width: {{ cpuLoad }}%;'></div>
        </div>
        </li>

I am aware the script in HTML doesn't really make much sense, but basically I just want to get the data using getJSON (or whatever's best), and put that data into my HTML.

• javascript
• jquery
• json
• knockout.js
• getjson

Share Improve this question Follow asked Jun 27, 2014 at 17:45 njcolvinnjcolvin 10811 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

UPDATE

Check out this jsfiddle I did that demonstrates it. Just replace the button click with your polling of data whenever you need:

Full Bore, with Comments: http://jsfiddle/FgbKd/15/

Bare Bones, Just Works: http://jsfiddle/FgbKd/1/

I am done updating my jsfiddle to make it more clearer and detailed.

END UPDATE

Knockout is actually perfect for this, but for the first-timer getting a viewmodel going -- and then refreshing it with new data, can be somewhat confusing.

function myViewModel (data) {
    data = data || {}; var self = this;
    self = ko.mapping.fromJS(data);
  return self;
}

That's a self-defining viewmodel. It's what knockout mapping does - takes a json and creates the viewmodel from it. Otherwise you have to build your own.

Now you need to create an object off of it, and fill it with data. You'd do it this way:

var myServerData;
$(document).ready(function(){
    myServerData = new myViewModel(data_json_received);    //
    ko.applyBindings(MyObject);     //myServerDataapplies the bindings found in HTML
});

There. You've just taken and created myServerData, which is your knockout object mapped to your viewmodel. This is the fun stuff, the actual toy you play with, so to speak. MyObject.cpuload will have a value here.

Now, if you need to refresh your myServerData, because you did another AJAX call, and need your viewmodel object to reflect the new data, you'd simply:

ko.mapping.fromJS(new_json_data, {}, myServerData);

like, maybe:

$.ajax({ 
  ....
  success : function(data){
     ko.mapping.fromJS(data, {}, myServerData);   //refreshes it
  }
});

Bingo, done. Your MyServerData has your new json in it, and any HTML on the page instantly reflects that, such as:

<SPAN data-bind="text: cpuload"></SPAN>
<SPAN data-bind="text: diskload"></SPAN>
<SPAN data-bind="text: memload"></SPAN>

So, load up knockout, knockout mapping JS files, use the viewmodel I showed you, then use the mapping.fromJS line to update your viewmodel anytime you get new data.