Rendering stringified JSON data into table

Question

I'm trying to display all document Names from a local JSON file. When I try to render the data it comes up as undefined. However, in the console I'm able to see the data all right.

As far as I can tell my for loop looks fine, so I'm wondering if the source of the problem is with "Titles": obj.File.Name. Other than that, I'm not sure.

JS file:

loadTableData() {
    let tableRes = redactedName.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        // "FileName": obj.FileLeafRef,
        // "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name
        }
      });

    let allTitles = tableRes;

    for (var i = 0; i < allTitles.length; i++) {
      let tr = $("<tr/>");
        $(tr).append("<td>" + allTitles.Name + "</td>");
        $("#km-table-id").append(tr)
    };
}

JSON snippet

{
  "d": {
    "results": [
      {
        "__metadata": {
          ...
        },
        "File": {
          "__metadata": {
            ...
          },
          "Name": "Guide to Product IDs.docx" <---------------------------
        },
        "FileLeafRef": "Guide to Product IDs.docx",
        "ResourceType": {
          ...
          },
          "results": [
            {
              ...
            }
          ]
        },
        "EncodedAbsUrl": [redacted]
      },
...
...

This is a sample of what I'm seeing in the console:

(491) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0: {Titles: "Guide to Product IDs.docx"}
1: {Titles: "Template 1.docx"}

It should be allTitles.Titles in your for loop instead of allTitles.Name — Prerak Sola
– Prerak Sola, Commented Jan 22, 2019 at 16:33
Print allTitles in console and post the output in the question. — Prerak Sola
– Prerak Sola, Commented Jan 22, 2019 at 16:35
Hey Prerak, I changed it to allTitles.Titles but unfortunately the table rows still read as 'undefined.' Also, I edited my question with the console output. — Bodrov
– Bodrov, Commented Jan 22, 2019 at 16:37
You forgot the index of allTitles array. It should be allTitles[i].Titles. — Prerak Sola
– Prerak Sola, Commented Jan 22, 2019 at 16:38

Prerak Sola · Accepted Answer · 2019-01-24 09:13:33Z

1

It's an array, so you need to access each of its element using the index. Also, in map, you return the Titles property. So it should be:

for (var i = 0; i < allTitles.length; i++) {
    let tr = $("<tr/>");
    $(tr).append("<td>" + allTitles[i].Titles + "</td>"); //Change in this line
    $("#km-table-id").append(tr)
};

answered Jan 24, 2019 at 9:13

Prerak Sola

10.1k8 gold badges40 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering stringified JSON data into table

JS file:

JSON snippet

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS file:

JSON snippet

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related