JavaScript to HTML


<!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?

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

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

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

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

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.

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. https://www.w3schools.com/jsref/met_node_appendchild.asp