CODEWITHSUNDEEP
javascriptjqueryjsonnode.js
dev333
dev333

Reputation: 799

After page refresh in node.js,how to get the newly generated data

Actually I'm using a webservice call to get the data in the form of a JSON. I'm getting the newly generated data into traffic.json file after calling a restful call.

In node.js after submit, I'm unable to get the newly generated data instead, I'm getting the previous data.

My Area.html:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
 body {
          font: 10px sans-serif;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

    .area {
          fill:#00bfff;
        }


</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var area = d3.svg.area()
        .x(function(d) { return x(d.timestamp); })
        .y0(height)
        .y1(function(d) { return y(d.total_traffic); });

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var jsonURL = "http://192.168.7.123:3000/data/traffic";

alert(jsonURL);

d3.json(jsonURL, function(error, data){

alert(data);

       data.forEach(function(d) {
        d.timestamp = d.timestamp;
        d.total_traffic = +d.total_traffic;
      });

    x.domain(d3.extent(data, function(d) { return d.timestamp; }));
    y.domain([0, d3.max(data, function(d) { return d.total_traffic; })]);


  svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);
     svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis).append("text")
.attr("x", 875 )
.attr("y", 15 )
.style("text-anchor", "bottom")
      .text("Client");

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Kilo Bytes");


});

</script>

<p align="center">
        <button type="button" class="myButton"
            style="margin-left: auto; margin-right: auto; display: block; margin-top: 0%; margin-bottom: 0%"
            onclick="history.go(-1);">Back</button>
    </p>

</body>
</html>

In Area.html,at this point of code I'm getting the previous data instead of new data in data variable.

 var jsonURL = "http://192.168.7.123:3000/traffic";

    alert(jsonURL);

    d3.json(jsonURL, function(error, data){ 
alert(data);
 ....
 ....
});

My app.js:

app.get('/data/traffic',function(req,res) {
  res.sendfile('views/traffic.json');
});

My traffic.json

[ { "client_ip" : "1.0.230.145" , "timestamp" : "1341667450773" , "total_traffic" : 0} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667450786" , "total_traffic" : 3} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451076" , "total_traffic" : 4} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451104" , "total_traffic" : 7} , { "client_ip" : "1.0.230.145" , "timestamp" : "1341667451128" , "total_traffic" : 10}]

How can I overcome this issue?

Upvotes: 0

Views: 120

Answers (1)

user4176305
user4176305

Reputation: 141

You code very hard to read, you combine js/html/css on page, it's not right.

Regarding this code:

app.get('/data/traffic',function(req,res) {
  res.sendfile('views/traffic.json');
});

You just read data from file here, it will not updated, if you don't update this file. Make new express route to save data, receive data from client in this route, and save it to this file.

UPD: And you have incorrect url here:

var jsonURL = "http://192.168.7.123:3000/traffic";

Look at you express route, there is '/data/traffic', not '/traffic'

Upvotes: 1

Related Questions