时间戳

首页 > 解决方案 > 如何在 HTML 中返回 json 对象值列表的总和

javascript - 如何在 HTML 中返回 json 对象值列表的总和

问题描述

我正在构建一个基于此的 html 表单，当用户提交他/她的姓名时，它应该返回一个整数，表示用户购买的所有商品的总和，API 的返回值是一个 json 格式列表，如下所示：

[{"Phone":800}, {"laptop":1500}, {"car":12000},{"watch":300}]

这是我的html代码：

   <!DOCTYPE html>
  <html lang="en">
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="MyMain.css">
       <script language="JavaScript">
        function myFunction() {
            document.getElementById('myshow').innerHTML = 
                        document.getElementById("Name").value;

             return false;
          }
       </script>
   </head>
   <body>
      <div class="container">
            <div>
              <fieldset>
                <form method="POST" action="" onSubmit="return myFunction();">
                  <div class="row">
                    <div form-group">
                      <label for="fname">Your Name: </label>
                      <input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
                    </div>
                    </div>
                    <div>
                      <input type="submit" class="button" value="Submit"><br/>
                    </div>
                  </div>

                </form>

              </fieldset>
            </div>
      </div>
      <div class="container">
      <fieldset>
        <div>
            <label>Prices: </label>
            <p><span id='myshow'></span></p>
        </div>
      </fieldset>
     </div>
   </body>
</html>

我不知道如何获得该响应以及如何对项目的值求和！

标签： javascripthtmlcss

解决方案

您的问题的简短回答是：

var a = '[{"Phone":800}, {"laptop":1500}, {"car":12000},{"watch":300}]';

// parse your json to object if your json is string and not generated by js
a = JSON.parse(a); 

var sum = 0;
Object.values(a).forEach(function(ww){
   sum += Object.values(ww)[0]; // get sum of every object item value.
});

console.log(sum);

推荐阅读