How to return a sum of a list of json object values in HTML

Question

I am building a html form which based on that, when user submits his/her name it should return an integer representing sum of all bought items by user, the return value from API is a list of json formate, which looks like this:

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

This is my html code:

   <!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>

I have no idea how to get that response and how to sum values of items!

Since the keys are variable, I would go with a legacy for loop and sum the totals on each pass. Else with a common key like 'sales'; `array reduce` would be good for the job. — bmatovu, Dec 25 '19 at 18:23
Does this answer your question? [Sum of object properties within an array](https://stackoverflow.com/questions/27879827/sum-of-object-properties-within-an-array) — Heretic Monkey, Dec 25 '19 at 21:52

score 1 · Accepted Answer · answered Dec 25 '19 at 18:09

1

Short answer of your question is :

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

answered Dec 25 '19 at 18:09

ttrasn

4,322
4
26
43

Thanks for your reply. Do you know rather than defining the response, how to get that string from the server? – J2015 Dec 25 '19 at 18:19
@J2015 its depends on your `api` and your request. – ttrasn Dec 25 '19 at 18:23
Didn't get it. my endpoint would be somthing linke https://example.com/?name="Jack" and I expect a list of jsons as a response. I dont know how to read this response – J2015 Dec 25 '19 at 18:35
@J2015 see this link https://stackoverflow.com/questions/247483/http-get-request-in-javascript – ttrasn Dec 25 '19 at 18:43

score 1 · Answer 2 · answered Dec 25 '19 at 18:27

1

Use reduce() method in JavaScript.

let data = [{"Phone":1}, {"laptop":1}, {"car":1},{"watch":1}]

let total = data.reduce((acc, value) => {
    return acc + value[Object.keys(value)[0]]
}, 0)

console.log(total);

answered Dec 25 '19 at 18:27

SDushan

4,341
2
16
34

Thanks for your reply. Do you know rather than defining the response, how to get that string from the server? – J2015 Dec 25 '19 at 18:35
you can use https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch or https://github.com/axios/axios to get data from server – SDushan Dec 25 '19 at 18:39

How to return a sum of a list of json object values in HTML

2 Answers2