How to declare JS variable in HTML page

Question

I have json file to store a number. I also have JS file to grab json data to be display in HTML.

As manual way to display is by put a number in XXX as below HTML code. So I want the data is dynamically get from back-end.

HTML

<span id="num"> XXX </span> number of users

JS

$(document).ready(function() {

    var ajaxRequest;

    console.log();

    ajaxRequest= $.ajax({
        url: "result/total.json",
        type: "post",
        dataType: 'json',
        data: {'num':num},
    });
});

JSON

{
  "data": [
    {
      "num": "100"
    }
  ]
}

Add a success function and append the backend data by id selector in it — Shubham Dixit
– Shubham Dixit, Commented Jun 20, 2019 at 8:25
are you getting or posting to this endpoint? What's num? — Smytt
– Smytt, Commented Jun 20, 2019 at 8:27

lok30 · Accepted Answer · 2019-06-20 08:39:02Z

2

If I get your question right, you also want to read from that JSON file. For that you need another AJAX Call that gets the data from your file, and on the succes callback changes the HTML of that span.

Here's a quick example of how your callback should look like:

 $.ajax({
    url: "result/total.json",
    type: "get",
    dataType: 'json',
    success: function(data){
        //here you have access to your response object and you can use anything you want
        $("#num").html(data.responseText);
    }
});

If you want a better version, you can use a complete callback in case your call fails. This way you will have access to the error object also.

edited Jun 20, 2019 at 8:39

answered Jun 20, 2019 at 8:30

lok30

12410 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mastersuse Over a year ago

I already apply your code by insert additional code but nothing happen.

Shubham Dixit Over a year ago

Dont assign jquery ajax to any variable

mastersuse · Accepted Answer · 2019-06-20 08:51:24Z

0

I found my answer by write this code.

$(document).ready(function() {

    var ajaxRequest;

    console.log();

    ajaxRequest= $.ajax({
        url: "result/total.json",
        type: "post",
        dataType: 'json',
        // data: {'num':num},

        success: function(data){
            console.log(data["data"][0]["num"]);
            //here you have access to your response object and you can use anything you want
            $("#num").html(data["data"][0]["num"]);
        }
    });    

});

answered Jun 20, 2019 at 8:51

mastersuse

9883 gold badges17 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to declare JS variable in HTML page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related