conversion of ajax(json) response to insert data in table with pure Java script (no jQuery)

Question

I'm trying to insert into an html table data, retrieved with ajax the response arrive as:

[{"email":"marc@volvo.com","id":2,"name":"volvo"},{"email":"marc@mercedes.com","id":4,"name":"mercedes"}]

that's look fine, but when I try to access it as an object, I receive undefined. if I bring it as json type, it show the word object instead of the object content. It should be an array of 2 object, with 3 value each, no matter what i tries i can't manage to access the value, here's the javascript code (i don't know yet jquery) :

    function getCompanies(){
    var req = new XMLHttpRequest()
    var url = "http://localhost:8080/CouponB/webapi/admin/company"
    req.open("GET", url, true)
    req.send()

    req.onreadystatechange = function() {
        if(req.readyState==4) {
            if(req.status==200){
                myStr = ""
                var resp = req.response
                alert(resp)
                myJson = eval(resp)
                alert(myJson)
                for(var x in myJson){
                    alert("-----------"+x.name)
                }
                var respTarg = document.getElementById("companyTable")
                resp.forEach(wtr)
                respTarg.innerHTML = myStr
            }

        }
    }
}

function wtd(d){
    return "<td style=\"width: 70px; \">"+d+"</td>"
}

function wtr(){
    myStr += wtd(this.id)+wtd(this.name)+wtd(this.email)
}

Felix Kling · Answer 1 · 2017-07-20T23:33:24.033

Have a look at Access / process (nested) objects, arrays or JSON to learn more about how to process nested data structures.

There are a couple of issue with your code:

Using eval to parse the JSON (it works, but there is a better way)
Using for...in to iterate over an array and incorrectly access array elements (x refers to the index of the element, not the element itself). (this is broken)
Using this inside wrt. forEach does not make the current element available via this. (this is broken)
Using a global variable myStr to build the HTML instead of having wrt return a string. (it works, but there is a better way)
If respTarg is a <table> then you are forgetting to create rows (<tr>). (might work, but then all cells appear in a single row)

Having said that, here is a way to build a simple table:

var resp = '[{"email":"marc@volvo.com","id":2,"name":"volvo"}, {"email":"marc@mercedes.com","id":4,"name":"mercedes"}]';

function insertCell(row, value) {
  // create a new cell in the provided row
  var cell = row.insertCell();
  // set the inline style of the cell
  cell.style = {width: '70px'};
  // set the content of the cell
  cell.textContent = value;
}

var table = document.getElementById('table');
// parse the JSON and for each object in the resulting array ...
JSON.parse(resp).forEach(function(obj) {
  // ... create a new row ...
  var row = table.insertRow();

  // ... and insert the following properties as cells into the row
  insertCell(row, obj.id);
  insertCell(row, obj.name);
  insertCell(row, obj.email);
});

<table id="table"></table>

Also, don't use alert for debugging, use console.log instead.

conversion of ajax(json) response to insert data in table with pure Java script (no jQuery)

1 Answers1