JSON variable to HTML table form

Question

I wish to put my result like this:

But what I get is like this:

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>

Super_Dragon · Accepted Answer · 2017-03-10 14:22:57Z

2

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>");

answered Mar 10, 2017 at 14:22

Super_Dragon

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Super_Dragon Over a year ago

I am glad to help you... Thank you!

Star_Man · Accepted Answer · 2017-03-10 14:19:03Z

1

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>

answered Mar 10, 2017 at 14:19

Star_Man

1,0911 gold badge14 silver badges33 bronze badges

1 Comment

Beginner Over a year ago

Thank you! but the ''movie'' move out from the border already but the other work fine.

Peter Mortensen · Accepted Answer · 2017-03-12 13:48:29Z

1

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).

edited Mar 12, 2017 at 13:48

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 10, 2017 at 14:26

Noah Cristino

7779 silver badges29 bronze badges

1 Comment

Beginner Over a year ago

Thank you for your explaination! That's great for me.

Peter Mortensen · Accepted Answer · 2017-03-12 13:49:39Z

1

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>

edited Mar 12, 2017 at 13:49

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 10, 2017 at 14:25

kuldeep singh

314 bronze badges

1 Comment

Beginner Over a year ago

I was also use this method previously, but I didn't write it correctly. Thanks for showing me the correct one :)

Collectives™ on Stack Overflow

JSON variable to HTML table form

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related