CODEWITHSUNDEEP
phpjsonhtml-table
Beginner
Beginner

Reputation: 191

JSON variable to HTML table form

I wish to put my result like this:

Enter image description here

But what I get is like this:

Enter image description here

And here is my code. What is the correct way?

<script>
    var myObj, x= "", y="";

    myObj={
        "Movie": ["Deadpool", "Xmen", "Hunger Games", "RoboCop", "LOTR", "Starwar"],
        "Rating": [ 8, 6, 7, 2, 8, 7 ]
    };

    document.write("<table border='1'>")
    document.write("<tr>")

    for (i in myObj.Movie)
    {
        document.write("<td width='80' >" + myObj.Movie[i] + "</td>");
    }

    for (i in myObj.Rating)
    {
        document.write("<td width='80' >" + myObj.Rating[i] + "</td>");
    }
    document.write("</tr>")
    document.write("</table>")
</script>

Upvotes: 0

Views: 152

Answers (4)

kuldeep singh
kuldeep singh

Reputation: 31

Try this:

<script>
    var myObj, x= "" ,y="";

    myObj={
        "Movie":["Deadpool", "Xmen", "Hunger Games" , "RoboCop" , "LOTR" ,"Starwar"],
        "Rating" : [ 8 , 6 , 7 , 2 , 8 , 7 ]
    };

    document.write("<table border='1'>")
    for (var i=0;i<myObj.Movie.length;i++)
    {
        document.write("<tr>");
        document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
        document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
        document.write("</tr>")
    }

    document.write("</table>")
</script>

Upvotes: 1

Noah Cristino
Noah Cristino

Reputation: 777

After document.write("<table border='1'>"), try adding th's like this:

<tr>
    <th>Movie</th>
    <th>Rating</th>
</tr>

It will look like this:

<table>
  <tr>
    <th>Movie</th>
    <th>Rating</th>
  </tr>
  <tr>
    <td>Batman</td>
    <td>9001</td>
  </tr>

Then you can add some CSS like this to make it easier to read:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

The CSS is from HTML Tables (W3Schools).

Upvotes: 1

Super_Dragon
Super_Dragon

Reputation: 36

document.write("<table border='1'>");
for (i in myObj.Movie) 
{
    document.write("<tr>");
    document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
    document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
    document.write("</tr>")
}
document.write("</table>");

Upvotes: 2

Star_Man
Star_Man

Reputation: 1091

Try this.

<script>

var myObj, x= "" ,y="";

myObj={ 
    "Movie":["Deadpool", "Xmen", "Hunger Games" , "RoboCop" , "LOTR" ,"Starwar"],
    "Rating" : [ 8 , 6 , 7 , 2 , 8 , 7 ] 
};

document.write("<table border='1'>");
document.write("<tr>Moving<td></td><td>Rating</td></tr>");
for (i in myObj.Movie) 
{
    document.write("<tr>");
    document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
    document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
    document.write("</tr>")
}

document.write("</table>");

</script>

Upvotes: 1

Related Questions