How to read json in html

Asked

Viewed 75 times

0

I don’t know if that would be the right question, but I have an html code and I’m trying to fill in the json I have, but I have no idea how to do it, what I googled didn’t work. my html is this below:

I am trying to add in the "table" my device_id and my suite_name with suits_result, if anyone can help me

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/png" href="http://airtest.netease.com/static/img/icon/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Report</title>
  </head>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: #87CEFA
    }
    .container {
      width: 75%;
      min-width: 800px;
      margin: auto
    }
    body.pt .en{
      display: none;
    }
    h1{
      margin-top: 50px;
      text-align: center;
    }
    .center{
      text-align: center;
      margin-top: 15px;
      margin-bottom: 30px;
      font-size: 14px;
      position: relative;
    }
    .btn{
      border: solid 1px #c0c0c00;
      padding: 5px 20px;
      border-radius: 3px;
      background: white;
      cursor: context-menu;
    }
    .btn.lang:hover {
      background: #5cb85c26;
      border-color: #0a790a;
    }
    .btn.lang {
      position: absolute;
      top: 0;
    }
    .head {
      margin: 20px 0 30px 0;
    }
    .head, .table{
      background: white;
      border-radius: 5px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      padding: 30px 20px;

    }
    .head .progress{
      background: #00FF00;
      color: white;
      border-radius: 5px;
      text-align: center;
      margin-top: 12px;
    }
    .head .progress-bar-success{
      width: 0;
      transition: all 0.5s ease;
      background: #5cb85c;
      border-radius: 5px;
    }
    .table-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      position: relative;
    }
    .table-row{
      border: solid 1px #000000;
      margin-top: -1px;
      cursor: context-menu;
    }
    .table-row:hover, .table-row.active{
      background: beige;
    }
    .table-head{
      background: SandyBrown;
    }
    .table-head:hover{
      background: gree;
    }
    .table-head .table-col{
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: bold;
      text-align: center;
    }
    .table-col{
      display: inline-block;
      width: 200px;
      line-height: 30px;
      padding: 5px 10px;
      border-left: solid 1px #e5e5e5;
      margin-top: -1px;
      margin-right: -5px;
    }
    .table-col.short{
      width: 100px;
      text-align: center;
    }
    .table-col:first-child{
      border: none;
    }
    .table-col.long{
      width: calc(100% - 500px);
    }
    .table-col.success{
      color: green;
    }
    .table-col.failed{
      color: red;
    }
    .detail{
      text-align: center;
      font-size: 14px;
      color: gray;
    }
    .iframe{
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      min-width: 800px;
      height: 100%;
      box-shadow: 0 5px 10px grey;
      transition: right 0.5s ease;
      background: white;
      max-width: 1100px;
    }
    .iframe-tools{
      position: absolute;
      top: 23px;
      left: -34px;
      background: white;
      box-shadow: -2px 2px 5px grey;
      border-radius: 7px;
    }
    .iframe-tools .close, .iframe-tools .open{
      width: 32px;
      height: 50px;
      color: gray;
      cursor: context-menu;
      display: block;
    }
    .iframe.show{
      right: 0;
    }
    iframe{
      width: 100%;
      height: calc(100% - 70px);
      border: none;
    }
    .iframe-head {
      height: 60px;
      line-height: 70px;
      text-align: center;
      border-bottom: solid 1px #ddd;
      box-shadow: 2px 0 6px #999;
      margin-bottom: 10px;
  }
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: rgba(0,0,0,.34);
    }
    ::-webkit-scrollbar-thumb {
      background-color: #8b8b8b;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.22);
    }
  </style>
  <body class="en">
  <div class="container-fluid" >
    <div class="container">
      <div class="main">
        <div class="material">
          <h1>Projeto Virgo</h1>
          <div class="center">
            <div class="time pt">Versão 1.0.0 <b>Data</b> 29/05/2019</div>
          </div>
  <div class="container-fluid" >
    <div class="container">
         <div class="table">
            <div class="table-title">
            <span class="running_detail en">Report</span>
            </div>

            <div class="table-content">
               <div class="table-row table-head">
                 <div class="table-col short en">Device</div>
                 <div class="table-col long en">Test Case</div>
                 <div class="table-col">Status</div>
               </div>
                <div class="table-col short">Galaxy S8</div>
                <div class="table-col long en ">Tela_Iniciar.air</div>
                <div class="table-col short en ">Pass</div>
                <div class="table-col detail en">click to see detail</div>
              </div>
             </div>
         </div>
  </div>
<script>
</script>
</body>
</html>

{
"report": [
    {
        "device_id": "230afa9cf40b7ece",
        "results": [
            {
                "suite_name": "menu_slots",
                "suite_result": "Fail",
                "suite_results": [
                    {
                        "test_name": "slot0.air",
                        "test_result": "Fail",
                        "test_duration": "18.0",
                        "test_results": [
                            {
                                "Act Value": "Fail",
                                "msg": "AssertionError: CHAPTER 1 and None are not equal",
                                "duration": ""
                            },
                            {
                                "Mission name": "Fail",
                                "msg": "AssertionError: Buenos Vientos Beach and None are not equal",
                                "duration": ""
                            },
                            {
                                "Label Start Game Button": "Fail",
                                "msg": "AssertionError: CONTINUE and None are not equal",
                                "duration": ""
                            },
                            {
                                "Delete Slot Button Exist": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "NEW SLOT2": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "NEW SLOT3": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            }
                        ]
                    },
                    {
                        "test_name": "all_new_slot.air",
                        "test_result": "Fail",
                        "test_duration": "9.0",
                        "test_results": [
                            {
                                "Game slots is Closed": "Fail",
                                "msg": "AssertionError: False and True are not equal",
                                "duration": ""
                            },
                            {
                                "Play Button is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Differente Play Button label": "Fail",
                                "msg": "AssertionError: PLAY and None are not equal",
                                "duration": ""
                            },
                            {
                                "Game Slots is not Opened": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Different Label on Back button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT1": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT2": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT3": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            }
                        ]
                    }
                ]
            },
            {
                "suite_name": "menu_general",
                "suite_result": "Pass",
                "suite_results": [
                    {
                        "test_name": "exit_game_true.air",
                        "test_result": "N/A",
                        "test_duration": "13.0",
                        "test_results": []
                    },
                    {
                        "test_name": "exit_game_false.air",
                        "test_result": "Pass",
                        "test_duration": "19.0",
                        "test_results": [
                            {
                                "Quit Button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Leave message": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Yes button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "No button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "device_id": "R38KA0BF1NF",
        "results": [
            {
                "suite_name": "menu_slots",
                "suite_result": "Fail",
                "suite_results": [
                    {
                        "test_name": "all_new_slot.air",
                        "test_result": "Fail",
                        "test_duration": "8.0",
                        "test_results": [
                            {
                                "Game slots is Closed": "Fail",
                                "msg": "AssertionError: False and True are not equal",
                                "duration": ""
                            },
                            {
                                "Play Button is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Differente Play Button label": "Fail",
                                "msg": "AssertionError: PLAY and None are not equal",
                                "duration": ""
                            },
                            {
                                "Game Slots is not Opened": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Different Label on Back button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT1": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT2": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "No NEW label is displayed on SLOT3": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            }
                        ]
                    },
                    {
                        "test_name": "slot0.air",
                        "test_result": "Fail",
                        "test_duration": "18.0",
                        "test_results": [
                            {
                                "Act Value": "Fail",
                                "msg": "AssertionError: CHAPTER 1 and None are not equal",
                                "duration": ""
                            },
                            {
                                "Mission name": "Fail",
                                "msg": "AssertionError: Buenos Vientos Beach and None are not equal",
                                "duration": ""
                            },
                            {
                                "Label Start Game Button": "Fail",
                                "msg": "AssertionError: CONTINUE and None are not equal",
                                "duration": ""
                            },
                            {
                                "Delete Slot Button Exist": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "NEW SLOT2": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            },
                            {
                                "NEW SLOT3": "Fail",
                                "msg": "AssertionError: NEW and None are not equal",
                                "duration": ""
                            }
                        ]
                    }
                ]
            },
            {
                "suite_name": "menu_general",
                "suite_result": "Pass",
                "suite_results": [
                    {
                        "test_name": "exit_game_true.air",
                        "test_result": "N/A",
                        "test_duration": "14.0",
                        "test_results": []
                    },
                    {
                        "test_name": "exit_game_false.air",
                        "test_result": "Pass",
                        "test_duration": "19.0",
                        "test_results": [
                            {
                                "Quit Button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Leave message": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Yes button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "No button": "Pass",
                                "msg": "",
                                "duration": ""
                            },
                            {
                                "Exit Game Dialog is not displayed": "Pass",
                                "msg": "",
                                "duration": ""
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

}

1 answer

1


Put your JSON in a jsonReport variable and inside the report attribute varri the elements belonging to it, for your sake it was not very clear I made an example for you can see what I am doing and put in the REPL.IT the final result > in this link https://repl.it/@maatheusgois/HTML

I used Jquery to add the elements on screen:

(Map is the same as the foreach in this case)

(jsonReport.report).forEach(element => {
    var name = '<div class="table-col short name">' + element.device_id + '</div>'

    console.log(element.results);
    (element.results).map(e => {
        $(".table-content").append(name)
        $(".table-content").append('<div class="table-col long en ">' + e.suite_name + '</div>')
        $(".table-content").append('<div class="table-col short en ">' + e.suite_result + '</div>')
        $(".table-content").append('<div class="table-col detail en">click to see detail</div>')

        console.log(e.results);
        (e.suite_results).map(elem_suite_results => {
            $(".table-content").append(name)
            $(".table-content").append('<div class="table-col long en ">' + elem_suite_results.test_name + '</div>')
            $(".table-content").append('<div class="table-col short en ">' + elem_suite_results.test_result + '</div>')
            $(".table-content").append('<div class="table-col detail en">click to see detail</div>')
        })
    })
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.