equations on cells generated from JSON

Question

I have a small JSON file which looks like this

var myData = [{
   "No": 1,
   "Ticker": "WSI",
   "Units": 72,
   "Price In": 15,
   "Entry Value": "",

 },
 {
   "No": 2,
   "Ticker": "DE",
   "Units": 25,
   "Price In": 15,
   "Entry Value": "",

 },

and so on...

Additionally a script that generates a simple table:

var myTable = '<table>';
myTable += '<tr>';

for (var x in myData[0]) {
  myTable += '<th>' + x + '</th>';
}
myTable += '</tr>';

for (var i = 0; i < myData.length; i++) {
  myTable += '<tr>';
  for (var x in myData[i]) {
    myTable += '<td>' + myData[i][x] + '</td>';
  }
}
myTable += '</table>';
document.getElementById('jstable').innerHTML = myTable;

Two questions:

1. How do I proceed with doing various equations on JSON? For Example last column "Entry Value" should return the result of "Units * Price In"

Something like this doesn't work:

var myData = [{
   "No": 1,
   "Ticker": "WSI",
   "Units": 72,
   "Price In": 15,
   "Entry Value": myData.Units * myData.["Price In"],
 },

2. As a beginner, what topics should I research in order to be able edit columns after I click on them

Thank you

Answer 1

var myData = [{
   "No": 1,
   "Ticker": "WSI",
   "Units": 72,
   "Price In": 15,
   "Entry Value": "",

 },
 {
   "No": 2,
   "Ticker": "DE",
   "Units": 25,
   "Price In": 15,
   "Entry Value": "",

 }];
        function getDynamicData(obj, key)
        {
            var value;
            switch(x)
            {
                case "Entry Value" : value = obj["Units"] * obj["Price In"]; break;
                default : value = obj[key];
            }
            return value;
        }
        
        function addListeners()
        {
            var elems = document.querySelectorAll("table td");
            console.log(elems);
            for(var i=0,n=elems.length; i<n;i++)
            {
                elems[i].addEventListener("click", editValue, true);
            }
        }
        
        function editValue(elem)
        {
            var oldvalue = elem.target.textContent;
            var input = document.createElement("input");
            input.value = oldvalue;
            var savebtn = document.createElement("button");
            savebtn.textContent = "Save";
            var cancelbtn = document.createElement("button");
            cancelbtn.textContent = "Cancel";
            savebtn.addEventListener("click",function(){
                elem.target.textContent = input.value;
            });
            cancelbtn.addEventListener("click",function(){
                elem.target.textContent = oldvalue;
            });
            elem.target.appendChild(input);
            elem.target.appendChild(savebtn);
            elem.target.appendChild(cancelbtn);
        }

        var myTable = '<table>';
        myTable += '<tr>';

        for (var x in myData[0]) {
          myTable += '<th>' + x + '</th>';
        }
        myTable += '</tr>';

        for (var i = 0; i < myData.length; i++) {
          myTable += '<tr>';
          for (var x in myData[i]) {
            myTable += '<td>' + getDynamicData(myData[i],x) + '</td>';
          }
        }
        myTable += '</table>';
        document.getElementById('jstable').innerHTML = myTable;
        addListeners();

<div id="jstable"></div>

1. To get data dynamically, better have a method like getDynamicData() and handle the cases inside switch. In need of no dynamic data, by default, it returns the value.

2. On clicking, you have to manipulate the DOM i.e., you have to add EventListener to that element, manipulate DOM elements and insert a input element to edit the value, insert a button say Save/Ok/Submit, add eventListeners to those elements and again you need to manipulate the DOM.

You need to refer topics on DOM Manipulation, addEventListeners

Also make sure you learn everything with cross-browser support.

The addEventListeners I did in the example will not work on IE. It has another way. You may want to learn that too.