JavaScript to HTML

1 

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.</h2>

<p id="output"></p>
<p class="a1"></p>
<script>
var obj = [
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "hey there",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "welcome",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    },
    {
        "client_msg_id": "3a223f8d-b5aa-4c9c-9b63-045ec6f90b58",
        "type": "message",
        "text": "Help me",
        "source_team": "TN4AF0V5W",
        "team": "TN4AF0V5W",
        "user_profile": {
            "real_name": "marvelmohinish99",
            "team": "TN4AF0V5W"
        }
    }
];

for (var i in obj)
{
     var type = obj[i].type;

     var text= obj[i].text;

     var source_team = obj[i].source_team;

     var user_profile = obj[i].user_profile;

     var real_name = user_profile.real_name;


    console.log(source_team+" : "+real_name);

    console.log(text);

    document.getElementsByClassName('a1').innerHTML=text;	

}

</script>


	
</body>
</html>

Can anyone please help me to get the JSON data into HTML?

2

Yes just follow this guide: https://www.w3schools.com/js/js_json_html.asp

3

Yes,but I don’t want to get JSON from URL.I have it embedded inside HTML itself.

4

Sorry if it sounds dumb but shouldt you just then give it a proper path of your json file with JS?

5

Are you trying to rewrite JSON.parse() or you want us to point at it? I’m not sure…

6

Actually,I have created variables for each type of object inside array in JSON(ex- type,text,user_profile) as you can see above. I used for loop to access all the elements inside the JSON. So,I think we don’t need to parse the data.Now,I want the data of variables(type,text,user_profile) to be written/printed to HTML. To print the JS data to HTML we have document.getelementbyId but I couldn’t print out all the data to HTML with it as Id prints only one unique value. So,I want to know how to print the variable data from JS to HTML.

7

getElementsByClassName returns an array of elements. if you want to select the p tag it will be the first element in that array, so:

document.getElementsByClassName('a1')[0].innerHTML=text;

but this will still be re writing the text each time.
you need to append an item form each object. HTML DOM Element appendChild() Method