-1

first of all, yes I did search the community for any solutions, but I just dont understand them :(

So I have a JavaScript Function which reads my .json file and shows the specific object I need in VisualCodee console. Now Im trying to display the Object into a HTML file.

Basically: How do I display the client_ip in a HTML file?

Down below you can see my JavaScript function which reads the client_ip in my .json file.

var obj = { 
     "source": "/var/log/apache2/git.1234.de-443-access.json",
     "data": {
        "http_code": 204,
        "pid": "-",
        "request_id": "-",
        "log_level": "-",
        "body_size": 0,
        "host": "git.1234.de",
        "peer_ip": "10.200.13.212",
        "duration": 1693,
        "source": "-",
        "client_port": "-",
        "error_message": "-",
        "client_ip": "10.200.13.333",
    }
   }

//for client_ip ,
var client_ip = obj.data.client_ip;
console.log(obj.data.client_ip)

Here you can see my HTML, the name of my .json file which im reading from is "ws.json" and the name of my javascript file is "kommschon.js". 

<script type="text/javascript">
    kommschon.js();
    function kommschon.js(){
        document.getElementById('clientIp).innerHTML ='clientIP';

    };



</script>

<body>

        <h1>Java Loop</h1>

        <button type="button" class="button1" onclick="alert('Cleared!')">Clear!</button>

        <button class="button2" onclick="alert('Function running!')">Run!</button>

<div id="clientIp">

</div>
doctorx22
  • 11
  • 3
  • Possible duplicate of https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript – Nabil Farhan Sep 02 '19 at 07:19
  • Possible duplicate of [How can I pretty-print JSON using JavaScript?](https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript) – Eolmar Sep 02 '19 at 07:24

1 Answers1

2

You should change HTML DOM with JavaScript.

// This is your kommschon.js file

kommschon();

function kommschon() {
  var obj = {
    "source": "/var/log/apache2/git.1234.de-443-access.json",
    "data": {
      "http_code": 204,
      "pid": "-",
      "request_id": "-",
      "log_level": "-",
      "body_size": 0,
      "host": "git.1234.de",
      "peer_ip": "10.200.13.212",
      "duration": 1693,
      "source": "-",
      "client_port": "-",
      "error_message": "-",
      "client_ip": "10.200.13.333",
    }
  }

  var client_ip = obj.data.client_ip;

  var clientIpDiv = document.getElementById('clientIp').innerText = client_ip;
};
<!-- Insert your external kommschon.js file -->
<script src="kommschon.js"></script>

<body>
  <h1>Java Loop</h1>
  <button type="button" class="button1" onclick="alert('Cleared!')">Clear!</button>

  <button class="button2" onclick="alert('Function running!')">Run!</button>
  
  <div id="clientIp"></div>
</body>
masoudmanson
  • 728
  • 6
  • 17
  • Dear masoudmanson, first of all thanks for your answer! But somehow its still not working and my HTML File is still empty. Any Idea why? Im so confused. – doctorx22 Sep 02 '19 at 07:39
  • Can you post your HTML and JS code together so we can see whats wrong? I really have no idea what your HTML looks like! – masoudmanson Sep 02 '19 at 07:41
  • Yeah good idea, just did that, im pretty sure my mistake is anywhere in the HTML file.. – doctorx22 Sep 02 '19 at 07:55
  • Dude there are multiple error in your code, I edited my answer to cover your exact code, check it out :) – masoudmanson Sep 02 '19 at 10:10