php - 如何使用JustGage的json数据动态创建jquery对象

Question

我想使用 justgage 来显示 mysql 数据库中的数据，因此我的所有对象都必须动态创建。我的请求正确检索我想要的所有数据，因此文件 getData.php 中包含的内容效果很好。

当我想循环处理这些数据时，它不起作用，我无法检索包含所有数据的每一行，它给了我类似 [object Object]、[object Object]、[object Object] 的东西， ...

此外，我不知道如何使用动态数据创建“新 JustGage”，然后每 5000 毫秒刷新一次数据

可以做我想做的事吗？

getData.php

$link=connectBD();
$query="SELECT iod.ReadingValue, iod.Timestamp, io.Name AS ioName, io.OrangeAlarmVal, io.RedAlarmVal, r.Name AS radioName
        FROM io_data iod
        JOIN io ON io.ID_IO = iod.ID_IO
        JOIN radio r ON r.IDRadio = io.IDRadio
        WHERE iod.Timestamp = (SELECT MAX(iod2.Timestamp) 
                               FROM io_data iod2 
                               WHERE iod2.ID_IO=iod.ID_IO)";

$table = array();
$table['cols'] = array(
    array('label' => 'ReadingValue', 'type' => 'number'),
    array('label' => 'Timestamp', 'type' => 'string'),
    array('label' => 'ioName', 'type' => 'string'),
    array('label' => 'OrangeVal', 'type' => 'number'),
    array('label' => 'RedVal', 'type' => 'number'),
    array('label' => 'radioName', 'type' => 'string')
);

$result=selectData($link, $query);
$rows = array();
while($r = getRowElement($result)) {
    $temp = array();
    $temp[] = array('rv' => $r['ReadingValue']);
    $temp[] = array('ts' => $r['Timestamp']);
    $temp[] = array('ion' => $r['ioName']);
    $temp[] = array('op' => $r['OrangeVal']);
    $temp[] = array('rp' => $r['RedVal']);
    $temp[] = array('rn' => $r['radioName']);

    $rows[] = array('c' => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);

// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

// return the JSON data
echo $jsonTable;

其他.js

$(document).ready(function(){

    /** Get Data from database **/
    var dataIO=getData();

    $.each(dataIO, function(i, item) {
        alert(item);
    });

    /*** This part should be generate within the loop with the retrieved fields (data between '**')

        var maxGreen=**OrangeVal** - 0.1;
        var minOrange=**OrangeVal**;
        var maxOrange=**RedVal** - 0.1;
        var minRed=**RedVal**;

        **ioNameVal**=new JustGage({
          id:"**ioNameVal**",
          value:**ReadingValue**,
          min:-50,
          max:0,
          title:"ioNameVal",
          decimals: 1, 
          customSectors :[{"lo":-29.4,"hi":maxGreen,"color":"#a9d70b"},
                         {"lo":minOrange,"hi":maxOrange,"color":"#FF6A00"},
                         {"lo":minRed,"hi":0,"color":"#ff0000"}],
          levelColorsGradient: false
        });

// For each JustGage created, I need to setup a automatic reading in the 
// database, so when the data change, the JustGage is refreshed
        setInterval(function(){
            **ioNameVal**.refresh(**ReadingValue**));
        }
        ****/
}

function getData(){
var json = $.ajax({
    url: 'getData.php', 
    dataType: 'json',
    async: false
}).responseText;

data = $.parseJSON(json);

return data;

}

更新:现在，我可以从数据库中检索数据并动态生成所有 justgage 对象。但我不确定这是个好方法。我需要根据数据库中的新数据刷新所有仪表。还有其他方法可以做到这一点吗？

其他.js

/** Get Data from database **/
    var dataIO=getData(3);

    /*$.each(dataIO.rows, function(i, item) {
        alert(item);
    });*/

    var idIO; var readingValue; var timestamp; var defaultIOType; var ioName; var orangePressure; var redPressure; var radioName;
    var maxGreen; var minOrange; var maxOrange; var minRed;
    var cpt=1;
    $.each(dataIO.rows, function(i, object) {

        $.each(object, function(j, val) {
            // Pour chaque row
            $.each(val, function(k, temp) {
                //alert(k + "=" + temp);
                switch(k){
                    case 'id':
                        idIO=temp;
                    break;
                    case 'rv': // reading value 
                        readingValue=temp;
                        break;
                    case 'ts': // timestamp
                        timestamp=temp;
                        break;
                    case 'iot': // default IO type
                        readingdefaultIOType=temp;
                        break;
                    case 'ion': // IO Name
                        ioName=temp;
                        break;
                    case 'op': // orange pressure
                        orangePressure=temp;
                        if(orangePressure!=null){
                            maxGreen=orangePressure-0.1;
                            minOrange=orangePressure;
                        }
                        else{
                            maxGreen=-22.6;
                            minOrange=-22.5;
                        }
                        break;
                    case 'rp': // red pressure
                        redPressure=temp;
                        if(redPressure!=null){
                            maxOrange=redPressure-0.1;
                            minRed=redPressure;
                        }
                        else{
                            maxOrange=-20.1;
                            minRed=-20;
                        }
                        break;
                    case 'rn': // radio name
                        radioName=temp;
                        break;
                }
            });
            eval('gauge_'+idIO+'= new JustGage({id:idIO,value:readingValue,min:-29.4,max:0,title:ioName,label:"inHg",decimals: 1,customSectors : [{"lo":-29.4,"hi":maxGreen,"color":"#a9d70b"},{"lo":minOrange,"hi":maxOrange,"color":"#FF6A00"},{"lo":minRed,"hi":0,"color":"#ff0000"}],levelColorsGradient: false})');

            /*setInterval(function(){
                eval('gauge_'+idIO).refresh(getDataRefresh(idIO));
                },3000
            );*/            



            cpt++;
        });
    });
    setInterval(function(){

        $.each(dataIO.rows, function(i, object) {

            $.each(object, function(j, val) {
                // Pour chaque row
                $.each(val, function(k, temp) {
                    //alert(k + "=" + temp);
                    switch(k){
                        case 'id':
                            idIO=temp;
                        break;
                    }
                });

                eval('gauge_'+idIO).refresh(getDataRefresh(idIO));
            });
        });
    },30000
    );          

function getData(typeToGet){
    var json = $.ajax({
        url: 'getData.php', // make this url point to the data file
        dataType: 'json',
        type:"POST",
        data:{"typeToGet":typeToGet},
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    data = $.parseJSON(json);

    return data;
}

function getDataRefresh(id){
    var json = $.ajax({
        url: 'getDataRefresh.php', // make this url point to the data file
        dataType: 'json',
        type:"POST",
        data:{"id":id},
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    data = $.parseJSON(json);
    return data;
}

Answer 1

1. 您正在尝试警告将参数类型转换为字符串的项目。您的项目对象没有自定义 toString() 方法，因此默认的字符串值为 [object Object]。

如果您想检查该项目的外观，请尝试使用开发工具/控制台。使用 console.log(item) 或 console.dir(item) 代替 alert(item)；然后打开控制台(在 Chrome 和 Firefox 中为 ctrl + shift + i)。

你想做的事情是可能的。您将需要阅读有关 setTimeout 的内容。但说实话，轮询服务器获取数据并不是一个好的设计。