使用JSON和JQuery解析变量中的数据

Question

I'm trying to request the value of a variable using JSON, but something is wrong with my JSON code and I don't know what it is. Can anybody give me some tip?

JSON code:

{
"counter1": {
        "variable": :="webdata".counter1:
        },
"counter2": {
        "variable": :="webdata".counter2:
        },
}

JQuery code:

$(document).ready(function(){
    $.ajaxSetup({ cache: false }); 
setInterval(function() {
    $.getJSON("json_data.json", function(result){
        $('#counter1').text((result.variable[0]).trim());
    $.getJSON("json_data.json", function(result){
        $('#counter1').text((result.variable[0]).trim());
    });
},1000);
});

HTML code:

<p label="counter1">0</p>
<p label="counter2">0</p>

Thanks in advance!

Answer 1

Your JSON isn't the only thing that is wrong. Why are you calling the same code twice in Javascript (what you call jQuery)

And the "label" attribute in your "p" element is wrong it should be "id".

I'm not sure what is generating that JSON but this is a possible way of achieving what you are going for.

change the JSON output to:

{
"counters": [
    {
        "variable" : "COUNTER 1_VARIABLE"
    },
    {
        "variable" : "COUNTER2_VARIABLE"
    }
]
}

Where it is in all caps should the content of your variable because this is the serialized output

JQuery code:

$(document).ready(function(){
$.ajaxSetup({ cache: false }); 
setInterval(function() {
$.getJSON("json_data.json", function(result){
$('#counter1').text((result.counters[0].variable).trim());
$.getJSON("json_data.json", function(result){
    $('#counter2').text((result.counters[1].variable).trim());
});
},1000);
});

It is worth noting that the use of "$.ajaxSetup()" is discouraged in the docs. https://api.jquery.com/jquery.ajaxsetup/

HTML code:

<p id="counter1">0</p>
<p id="counter2">0</p>

Answer 2

First of all thanks to all of you for your prompt answer.

I managed to get the JSON work as follows:(eventhough I still have a problem)

JSON code (json/json_data.json):

{
    "counters": [
        {
            "variable": ":='webdata'.counter1:"
        },
        {
            "variable": ":='webdata'.counter2:"
        }
    ]
}

JQuery code (my_script.js):

$(document).ready(function(){
    $.ajaxSetup({ cache: false }); 
setInterval(function() {
    $.getJSON("json/json_data.json", function(result){
        $('#counter0').text(result.counters[0].variable);
    });
},1000);
});

HTML code (index.htm):

<tr>
    <td>PT000</td>
    <td>Process value 0</td>
    <td> <label id="counter0">0</label> </td>
    <td>bar</td>
</tr>

Now the point is that I'm getting the text written in the JSON printed on the screen, this is the name of my variable, we can say is the path to reach the value I want to print.

The point is that if I use an HTM file and write on it the name of the variable and then I simply use JQuery to get the data it works, but I have plenty of values I want to print out, so I thought that JSON could help me to manage this issue. Here the example with the HTM file:

HTM code (IOValue1.htm):

:="webdata".counter1:

JQuery code (my_script.js):

$(document).ready(function(){
    $.ajaxSetup({ cache: false }); 
setInterval(function() {
    $.get("IOValue1.htm", function(result){
        $('#counter1').text((result));
    });
},1000);
});

HTML code (index.htm):

<tr>
    <td>PT001</td>
    <td>Process value 1</td>
    <td> <label id="counter1">0</label> </td>
    <td>bar</td>
</tr>

Probably I'm not considering some fundamental fact from JSON, but I'm not too experienced. Any idea?