How to print data from ajax, jquery, javascript in html?

Question

I am using the following script to get data from an api endpoint to populate my charts and everything works fine.

Now I would not only like to populate my charts with the data but also print out the data directly in my html script and use something like the document.write() function.

bit if I write for example document.write(DE10YB_EUR_price) it does not display anything.

Can someone tell me how to print the DE10YB_EUR_price as plain text in html?

Thanks a lot and kind regards

{% block jquery%}

var endpoint = '/technicalAnalalysis/api/data/'

var chartData = []
var chartLabels = []

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){

        DE10YB_EUR_price = data.DE10YB_EUR_closeBid 
        DE10YB_EUR_dateData = data.DE10YB_EUR_dates 
        DE10YB_EUR_upperBand = data.DE10YB_EUR_upperband 
        DE10YB_EUR_middleBand = data.DE10YB_EUR_middleband 
        DE10YB_EUR_lowerBand = data.DE10YB_EUR_lowerband 
        DE10YB_EUR_rsi = data.DE10YB_EUR_RSI 
        DE10YB_EUR_minusDI = data.DE10YB_EUR_ADX_Minus 
        DE10YB_EUR_plusDI = data.DE10YB_EUR_ADX_Plus 
        DE10YB_EUR_adx = data.DE10YB_EUR_ADX 
        DE10YB_EUR_macd = data.DE10YB_EUR_macd 
        DE10YB_EUR_macdsignal = data.DE10YB_EUR_macdsignal 
        DE10YB_EUR_macdhist = data.DE10YB_EUR_macdhist 

        setChart()

    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

function setChart(){

var ctx = document.getElementById('DE10YB_EUR_priceData').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: DE10YB_EUR_dateData,
    datasets: [{
      label: 'DE10YB_EUR',
      data: DE10YB_EUR_price,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: 'rgba(0, 0, 0, 1)',
      borderWidth: 2,
    } ]
  },
    options:{
        elements: {
             point:{
                radius: 0
                    }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }],
            xAxes: [{
                display: false
            }]
        }
    }
});

Do some research into manipulation functions in jQuery, like text(). Using document.write is like killing a mosquito with a grenade. — Heretic Monkey
– Heretic Monkey, Commented Feb 15, 2018 at 21:27

Digitrance · Accepted Answer · 2018-02-15 21:54:17Z

Assumption:

From your code, it looks like you are using Chartjs. So, my assumption is that DE10YB_EUR_dateData (labels) and DE10YB_EUR_price (data) are arrays. The following code will create a table with a header row showing labels, and a data row showing the data.

Solution:

You need to create a div in your HTML and give it an id (say "data-container"). Next, use the following script to convert your labels and data into an HTML table, followed by appending it to the DIV as shown below.

HTML:

<div id="data-container"></div>

JavaScript:

var makeTable = function (labels, data) {
    var table = $('<table border=1>');

    // Header Row

    var tblHeader = "<tr>";
    for (var label in labels) {
        tblHeader += "<th>" + label + "</th>";
    }
    tblHeader += "</tr>";
    $(tblHeader).appendTo(table);

    // Data Row

    var dataRow = "<tr>";
    for (var x in data) {
        dataRow += "<td>" + x + "</td>";
    }
    dataRow += "</tr>";
    $(dataRow).appendTo(table);

    return ($(table));
};

Usage:

var table = makeTable(DE10YB_EUR_dateData, DE10YB_EUR_price);
$(table).appendTo("#data-container");

Boris Lobanov · Accepted Answer · 2018-02-15 21:27:18Z

1

Assuming you have somthing like this in your html:

<div id="price"></div>
<div id="date-data"></div>
<!-- and so on -->

You can do simply:

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){

        DE10YB_EUR_price = data.DE10YB_EUR_closeBid 
        DE10YB_EUR_dateData = data.DE10YB_EUR_dates 
        $('#price').text(DE10YB_EUR_price)
        $('#date-data').text(DE10YB_EUR_dateData )
        // and so on
    },
})

answered Feb 15, 2018 at 21:27

Boris Lobanov

2,4541 gold badge13 silver badges19 bronze badges

1 Comment

Digitrance Over a year ago

I think OP is using Chartjs. And if I am not wrong, DE10YB_EUR_dateData (labels) and DE10YB_EUR_price (data) are arrays.

Collectives™ on Stack Overflow

How to print data from ajax, jquery, javascript in html?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related