【问题标题】:Append JSON Nested Object附加 JSON 嵌套对象
【发布时间】:2021-02-05 19:18:20
【问题描述】:

我最近不得不更改更改数据布局的列的字段类型,因为它现在是多选字段类型。

通过 fetch 拉取的原始 JSON 是这样的:

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",
      },

现在被拉出的新 JSON 嵌套了 Team 列:

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"
        ]
      },

我注意到除了 Team 项目之外的所有内容都在附加时它发生了变化,并且当它附加时它显示 [object Object]。

如果除 Team 之外的所有内容都通过 data[i].valueName 附加,我猜正确的语法是什么。

这是我的 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');
});
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】:

    标签: javascript html jquery json sharepoint


    【解决方案1】:

    在这种情况下:

    data[i].Team.results[0]
    

    【讨论】:

    • 我需要一个带有 var j 的嵌套 for 循环来循环遍历 team.results 吗?
    • 但是数据的i和结果的i不一样。目前,您在 Team 下拥有单个项目的索引。我建议您首先编辑循环内的代码以获得更易读的代码。例如:currData = data[i];然后通过 currData 访问项目。关于团队,使用接收 currData.Team 并返回元素的函数。不要使用另一个嵌套的 for,使用返回相关数据的新函数。您的代码不可读。我建议您搜索清洁代码书并阅读更多相关信息。
    • 刚刚编辑了我的 sn-p 以包含 currData
    • 我不确定这会如何影响“可读性”,但我更改了它,我不确定如何创建您正在谈论的功能
    • geeksforgeeks.org/… 这是我能找到的唯一例子,但它仍然没有我想要的那么相关。
    【解决方案2】:

    我解决这个问题的方法是让:

    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>';
        }
    

    【讨论】:

      猜你喜欢
      • 2018-07-16
      • 2019-03-05
      • 2017-11-17
      • 1970-01-01
      • 1970-01-01
      • 2015-09-11
      • 2022-08-18
      • 2019-07-02
      • 2015-08-23
      相关资源
      最近更新 更多