How Can I Display Objects In Loop Using Java Script

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

In Java script the properties of an object can be collected in a loop so today we discuss how to display objects in loop

How Can I Display Objects In Loop Using Java Script

Displaying a JavaScript object will output [object Object].

Example(1)

<h2 id="demo1"></h2>
<script>
    var person = {name:"Pinky", age:30, city:"New York"};

    document.getElementById("demo1").innerHTML = person;
</script>
 

Displaying the Object in a Loop

The properties of an object can be collected in a loop:

Step 1:
create index.html file and implement below code.

<h2 id="demo1"></h2>


step 2:
implement java script to display objcets in loop.

<script>
    var x, txt = "";
    var person = {name:"John", age:30, city:"New York"};

    for (x in person) {
        txt += person[x] + " ";
    };

    document.getElementById("demo1").innerHTML = txt;
</script>


Complete Code For Display Objects In Loop Using JavaScript
 

<!DOCTYPE html>
<html>
<head>
    <title>How Can I Display Objects In Loop Using Java Script</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    body{
        background: black;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: White">Display Objects In Loop Using Java Script</h1>
    </div>
<br>
<br>
    <div class="well">
        <h2 id="demo1"></h2>

        <script>
            var x, txt = "";
            var person = {name:"John", age:30, city:"New York"};

            for (x in person) {
                txt += person[x] + " ";
            };

            document.getElementById("demo1").innerHTML = txt;
        </script>
    </div>
</div>
</body>
</html>

 

Related Post