render java script object on html page

Question

I want to render data object in the body as a table with three columns one for the key like "ASIANPAINT24JUN21FUT"and other two for the links

I don't have any experience with javascript, I tried using renderjson to render the

json object received, but it renders just plain text,

I want to render the object as a table, and the links in it should be clickable

How can I achieve this?

index.html

<body>
   
  // render data object here

  <script>
    var eventSource = new EventSource("/listen")
    
    eventSource.addEventListener("message", function(e) {
      console.log(e.data)
    }, false)

    eventSource.addEventListener("online", function(e) {
      
     let data = JSON.parse(e.data)
 
      
    }, true)

  </script>

</body>

data object

{
    "ASIANPAINT24JUN21FUT": [
    "https://in.tradingview.com/chart/?symbol=NSE:ASIANPAINT1!",
    "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/ASIANPAINT21JUN2980CE/15044354"
    ],
    "DEEPAKNTR24JUN21FUT": [
    "https://in.tradingview.com/chart/?symbol=NSE:DEEPAKNTR1!",
    "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/DEEPAKNTR21JUN1820CE/20372738"
    ],
    "DRREDDY24JUN21FUT": [
    "https://in.tradingview.com/chart/?symbol=NSE:DRREDDY1!",
    "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/DRREDDY21JUN5350CE/20732162"
    ],
    "ESCORTS24JUN21FUT": [
    "https://in.tradingview.com/chart/?symbol=NSE:ESCORTS1!",
    "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/ESCORTS21JUN1220CE/20892674"
    ] 
}

Hamza Khursheed · Accepted Answer · 2021-06-11 05:07:53Z

You can use following code to display the data in HTML.

<body>
  <div id="table-div"></div>

  <script>
    let data = {
      "ASIANPAINT24JUN21FUT": [
        "https://in.tradingview.com/chart/?symbol=NSE:ASIANPAINT1!",
        "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/ASIANPAINT21JUN2980CE/15044354"
      ],
      "DEEPAKNTR24JUN21FUT": [
        "https://in.tradingview.com/chart/?symbol=NSE:DEEPAKNTR1!",
        "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/DEEPAKNTR21JUN1820CE/20372738"
      ],
      "DRREDDY24JUN21FUT": [
        "https://in.tradingview.com/chart/?symbol=NSE:DRREDDY1!",
        "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/DRREDDY21JUN5350CE/20732162"
      ],
      "ESCORTS24JUN21FUT": [
        "https://in.tradingview.com/chart/?symbol=NSE:ESCORTS1!",
        "https://kite.zerodha.com/chart/ext/tvc/NFO-OPT/ESCORTS21JUN1220CE/20892674"
      ]
    }
    let tableDiv = document.getElementById("table-div");

    let tableRows = "";
    Object.keys(data).map(key => {
      tableRows += `
        <tr>
          <td>${key}</td>
          <td><a href="${data[key][0]}" target="_blank">${data[key][0]}</a></td>
          <td><a href="${data[key][1]}" target="_blank">${data[key][1]}</a></td>
        </tr>
      `
    })

    tableDiv.innerHTML = `
      <table>
        <tr>
          <th>Key</th>
          <th>Link 1</th>
          <th>Link 2</th>
        </tr>
        ${tableRows}
      </table>`
  </script>
</body>

jhonny · Accepted Answer · 2021-06-11 05:02:23Z

0

to do this you should modify the dom using javascript, here the documentation about html5 tables https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table, about links https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a, and i am pretty sure you will also need this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys, using this and some kind of bucle like a foreach, a map or a for, you can access the object info in a dynamic way, also if you need it you have some documentation about dom manipulation https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction, maybe you also find useful methods like document.getElementById

answered Jun 11, 2021 at 5:02

jhonny

8586 silver badges10 bronze badges

Collectives™ on Stack Overflow

render java script object on html page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related