Append JSON Nested Object

Question

I recently had to change the field type of a column which changed the layout of the data as it is now a multiple choice field type.

The original JSON that was pulled through fetch was like so:

d: {
  "results": [
    {
      "MajorTasks": null,
      "DeliverablesSubmitted": null,
      "PersonnelActions": null,
      "Upcoming": "\r\n  <div>None at this time</div>\r\n",
      "Training": null,
      "ResourceRequest": "\r\n  <div>None at this time.</div>\r\n",
      "SupportRequest": "\r\n  <div>None at this time.</div>\r\n",
      "Team": "AMMO",
      },

The new JSON that is now being pulled through, nests the Team column:

d: {
  "results": [
    {
      "MajorTasks": null,
      "DeliverablesSubmitted": null,
      "PersonnelActions": null,
      "Upcoming": "\r\n  <div>None at this time</div>\r\n",
      "Training": null,
      "ResourceRequest": "\r\n  <div>None at this time.</div>\r\n",
      "SupportRequest": "\r\n  <div>None at this time.</div>\r\n",
      "Team": {
        "__metadata": {
          "type": "Collection(Edm.String)"
        },
        "results": [
          "AMMO"
        ]
      },

I noticed it changed when everything was appending except for the Team item, and when it appended it was showing [object Object].

If everything is appending through data[i].valueName except for Team, whats the proper Syntax I guess.

Here is my JS:

function loadData(url) {
    url = partUrl + "/_api/web/lists/getbytitle('WeeklyReport')/items?$select=DeliverablesSubmitted,MajorTasks,PersonnelActions,SupportRequest,ResourceRequest,Team/Value,Training,Upcoming,WeekOf,TravelODC";
    return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
      .then((r) => {
        if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
        return r.json();  // parse JSON
      })
      .then((data) => data.d.results);
  }
  loadData()
    .then((results) => {
        const data = results;
        var listContent = '';
      
      for (var i = 0; i < data.length; i++) {
          var currData = data[i];
         listContent += '<li data-weekOf="'+ currData.WeekOf+'">';
         listContent += '<h2>' + currData.Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         if(currData.MajorTasks !== null){
            listContent += '<ul>' + "- " + currData.MajorTasks.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
              listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Deliverables Submitted</h4>';
                 if(currData.DeliverablesSubmitted !== null){
         listContent += '<ul>' + "- " + currData.DeliverablesSubmitted.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Personnel Actions </h4>';
                 if(currData.PersonnelActions !== null){
         listContent += '<ul>' + "- " + currData.PersonnelActions.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Upcoming Events </h4>';
                 if(currData.Upcoming !== null){
         listContent += '<ul>' + "- " + currData.Upcoming.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Training </h4>';
         if(currData.Training !== null){
                 listContent += '<ul>' + "- " + currData.Training.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Resource Request </h4>';
         if(currData.ResourceRequest !== null){
         listContent += '<ul>' + "- " + currData.ResourceRequest.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Support Request </h4>';
         if(currData.SupportRequest !== null){
         listContent += '<ul>' + "- " + currData.SupportRequest.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Travel/ODCs </h4>';
         if(currData.TravelODC !== null){
         listContent += '<ul>' + "- " + currData.TravelODC.replace(/(<([^>]+)>)/gi, "") + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('#under_txt').text(' ');
  });
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekOf='+value+']').fadeIn();
  });
  
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
  }
var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#report-summary').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('weeklyreport.pdf');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Gal Gur-Arie · Accepted Answer · 2021-02-05 19:22:58Z

1

in this case:

data[i].Team.results[0]

answered Feb 5, 2021 at 19:22

Gal Gur-Arie

3944 silver badges7 bronze badges

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

6 Comments

BeerusDev Over a year ago

Would I need a nested for loop with var j to loop through just the team.results?

Gal Gur-Arie Over a year ago

But the i of the data and the i of the results are different. currently you have an index of a single item under Team. I suggest you first to edit the code inside the loop for more readable code. for example: currData = data[i]; then access items by currData. regarding the Teams, use a function who receives currData.Team and returns the element. Do not use another nested for, use a new function who returns the relevant data. Your code is not readable. I suggest you to search the Clean Code book and read more about it.

BeerusDev Over a year ago

just edited my snippet to include the currData

BeerusDev Over a year ago

I am unsure how that effects the "readability" but I changed it, I am unsure how to go about creating that function which you are talking about

BeerusDev Over a year ago

geeksforgeeks.org/… this is the only example I could find, and it still isn't nearly as relevant as I would like.

|

BeerusDev · Accepted Answer · 2021-02-08 21:01:22Z

0

What I did to fix this was let:

for (var i = 0; i < data.length; i++) {
  var currData = data[i];
  listContent += '<li data-weekOf="'+ currData.WeekOf+'">';
    if(currData.Team !== null){
      listContent += '<h2>' + currData.Team.results.join(', ') +'</h2>';
    }else{
      listContent += '<h2>' + "Null" +'</h2>';
    }

answered Feb 8, 2021 at 21:01

BeerusDev

1,5193 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

Append JSON Nested Object

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related