CODEWITHSUNDEEP
jqueryjsonparsingeach
Baobab
Baobab

Reputation: 157

jquery parsing Json into var with .each

Need help understanding how to get this to work.

Given:

var data = {"time":"20151206212722","Irms":"2940"}

and:

<script type="text/javascript">
    $.ajaxSetup({
      cache: false
    });
    setInterval(function() {
      $(function() {
        $.get("data-upload_emon.txt", function(data, textStatus) {
          console.log(data);
          $.each(data, function(key, value) {
            console.log(key);
            console.log(value);
            Irms = value.Irms
            console.log(Irms);

            $("#ajax1").fadeOut(200, function() {
              $("#ajax1").html(
                time
              ).fadeIn(2);
            }),
              $("#ajax2").fadeOut(200, function() {
              $("#ajax2").html(
                Irms
              ).fadeIn(2);
            })
          });
        },
              "json"
             );
      })
    }, 10000);
</script>

Why is var Irms undefined? First three console logs return what is expected. Console.log(Irms) returns as "undefined"

Thank you!! This is driving me crazy.

Upvotes: 2

Views: 71

Answers (2)

vijayP
vijayP

Reputation: 11512

From your code $.each(data, function(key, value) { you are iterating over all the properties of the JSON object and hence Irms = value.Irms is not a valid statement.

If you have input data like this: var data = {"time":"20151206212722","Irms":"2940"}; then if you want to fetch the Irms then you really don't need $.each loop. You just need to parse the JSON object and simply need to fetch the required property as below:

var data = '{"time":"20151206212722","Irms":"2940"}'; //JSON in string format
var obj = JSON.parse(data); //parsing it to get actual JSON object
Irms = obj.Irms //fetching Irms property of the object
console.log(Irms);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 0

Gavin Mogan
Gavin Mogan

Reputation: 1517

You have a lot of console.logs and didn't really state where the problem was occurring and a bunch of very minor syntax issues which could lead to weird behaviors.

According to your first example, data is just an object, not an array, so you shouldn't need to .each it. In addition, as the comment says, getJSON might produce a little readable code.

Also, unrelated, I'd use .text over .html so its properly escaped unless you are injecting html.

My untested suggestion is:

setInterval(function() {
  $.getJSON("data-upload_emon.txt", function(data) {
    console.log("data is", data);
    $("#ajax1").fadeOut(200, function() {
       $("#ajax1").html(data.time).fadeIn(2);
    });
    $("#ajax2").fadeOut(200, function() {
      $("#ajax2").html(data.Irms).fadeIn(2);
    })
  });
}, 10000);

Note the lack of the .each, removed the rogue comma between ajax1 and ajax2 and used data directly.

If you still want to use the Irms variable as you had it, I'd stick a var infront of it to make sure its defined in the proper scope.

Upvotes: 1

Related Questions