how display data in a html page after parsing them from an odata server?

Question

I parsed some data from an odata server.I succeeded to parse it from the server and I want to display the obtained data into a html page: index.html:

<div class="project_info">

projects.js:

    var serverPath="path_to_odata_server";
$(document).ready(function(){

  serverPath += "?$select=project_name,status,start_date";
  $.getJSON(serverPath,function(result){
    var tr;
    $.each(result,function(i,field){
      for(var i = 0; i < field.length; i++) {
        console.log(field[i].name);
        console.log(field[i].status);
        console.log(field[i].real_start);
        tr = $('<tr/>');
        tr.append("<tr><td class=\"project_title\">" + field[i].name + "</td></tr>");
        tr.append("<tr><td class=\"project_status\">" + field[i].status + "</td></tr>");
        tr.append("<tr><td class=\"project_date\">" + field[i].start_start + "</td></tr>");
        $('.project_info').append(tr);
      }
    });
  });
});

when I used console.log() I got the data that I wanted to display but I couldn't display it into the html page.Should I use document.write to write data into the html page?

When you're appending the table cells to the row, try removing the `...` from the string. — DarthJDG, May 03 '17 at 09:43
You can see this demo it's very easy http://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-responsejson — Md.Jewel Mia, May 03 '17 at 09:50

score 0 · Accepted Answer · answered May 04 '17 at 10:35

You should delete <tr></tr> and try this program:

tr = $('<tr/>');
tr.append("<td class=\"project_title\">" + field[i].name + "</td>");
tr.append("<td class=\"project_status\">" + field[i].status + "</td>");
tr.append("<td class=\"project_date\">" + field[i].start_start + "</td>");
$('.project_info').append(tr);

score -1 · Answer 2 · answered May 03 '17 at 09:45

-1

try this one.

tr = "<tr><td class=\"project_title\">" + field[i].name + "</td></tr>";
tr += "<tr><td class=\"project_status\">" + field[i].status + "</td></tr>";
tr += "<tr><td class=\"project_date\">" + field[i].start_start + "</td></tr>";

$('.project_info').append(tr);

answered May 03 '17 at 09:45

Lloyd Gutierrez

1
2

Make sure all cells are in a single ``, then it should work. – DarthJDG May 03 '17 at 09:49

how display data in a html page after parsing them from an odata server?

2 Answers2