Javascript 我想从JSON数据中打印一个列表，在jquery中使用一个键作为列表头

上面是我正在使用的JSON对象的结构

我想打印一个在jquery中看起来像这样的排序列表，有人能帮忙吗

{
  "error": [{
      "domain": "(SA 1) ",
      "LessonName": "SA 1 Unit 1",
    }, {
      "domain": " (SA 1)",
      "LessonName": "SA 1 Unit 2",
    }, {
      "domain": " (SA 1) ",
      "LessonName": "SA 1 Unit 3",
    }, {
      "domain": "(SA 2) ",
      "LessonName": "SA 2 Unit 1",
    }, {
      "domain": "(SA 2) ",
      "LessonName": "SA 2 Unit 2",
    }, {
      "domain": "(SA 2) ",
      "LessonName": "SA 2 Unit 3",
    }, {
      "domain": "(PSLT) ",
      "LessonName": "PSLT 1",
    }, {
      "domain": "(PSIT) ",
      "LessonName": "PSIT 1",
    },

  ]
}

这是我在下面使用的代码。但它无法打印所有域标题

> SA 1(domain)
>  SA 1 Unit 1(lessons under domain)
>  SA 1 Unit 2
>  SA 1 Unit 3
> SA 2(domain)
>  SA 2 Unit 1(lessons under domain)
>  SA 2 Unit 2
>  SA 2 Unit 3
> PSLT(domain)
>  PSIT 1(lessons under domain)

jQuery.ajax({
网址：elaurl，
键入：“GET”，
错误：函数（jqXHR、文本状态、strError）{
警报（“无连接”）；
},
超时：60000，
成功：功能（响应）{
console.log（response.error.length）；
json=响应；
var temp=“”；
var i=0；
var j=0；
//变量数据=“””+响应。错误[i]。域+“”；
对于（i=0；i

您知道，您总是要打印列表中每个项目的“课程”元素，并且您只想打印“域”元素，如果它与之前的元素不同，是吗

您的AJAX响应函数可能与此类似：

jQuery.ajax({
  url: elaurl,
  type: 'GET',
  error: function(jqXHR, text_status, strError) {
    alert("no connection");
  },
  timeout: 60000,
  success: function(response) {
    console.log(response.error.length);
    json = response;
    var temp = '';
    var i = 0;
    var j = 0;

    //  var data = "'<h4>'" + response.error[i].domain + "'<h4/>'";

    for (i = 0; i < response.error.length; i++) {

      if (response.error[i].domain != response.error[i + 1].domain) {

        var data = '<h4>' + response.error[i + 1].domain + '<h4/>';

        $('#domain').append(data);
        i++;
      }
    }
  }
});

成功：功能（响应）{
var$html=$（“#域”）；
response.error.forEach（函数（e，i）{
//仅当域与上一个错误不同时才打印该域
if（i==0 | | e.domain！==response.error[i-1]。domain）{
$（''）.text（e.domain）.appendTo（$html）；
}
//总是把课文打印出来
$（''）.text（e.lesson）.appendTo（$html）；
});
}

您知道，您总是要打印列表中每个项目的“课程”元素，并且您只想打印“域”元素，如果它与之前的元素不同，是吗

您的AJAX响应函数可能与此类似：

jQuery.ajax({
  url: elaurl,
  type: 'GET',
  error: function(jqXHR, text_status, strError) {
    alert("no connection");
  },
  timeout: 60000,
  success: function(response) {
    console.log(response.error.length);
    json = response;
    var temp = '';
    var i = 0;
    var j = 0;

    //  var data = "'<h4>'" + response.error[i].domain + "'<h4/>'";

    for (i = 0; i < response.error.length; i++) {

      if (response.error[i].domain != response.error[i + 1].domain) {

        var data = '<h4>' + response.error[i + 1].domain + '<h4/>';

        $('#domain').append(data);
        i++;
      }
    }
  }
});

成功：功能（响应）{
var$html=$（“#域”）；
response.error.forEach（函数（e，i）{
//仅当域与上一个错误不同时才打印该域
if（i==0 | | e.domain！==response.error[i-1]。domain）{
$（''）.text（e.domain）.appendTo（$html）；
}
//总是把课文打印出来
$（''）.text（e.lesson）.appendTo（$html）；
});
}

有几个问题：

1） 数据质量。您的JSON不一致-例如，您的域SA 1在示例中实际上以3种不同的方式表示，如“（SA 1）”、“（SA 1）”和“（SA 1）”。这将导致它们之间的任何字符串比较失败，因为它们永远不会相互匹配

2） 代码不太正确。您甚至从未尝试打印课程名称，循环中出现了一个逻辑错误，您无缘无故地增加了

i

一个额外的时间，这意味着您遗漏了一些行

以下是更正后的数据和代码：

JSON

success: function(response) {
   var $html = $('#domain');
   response.error.forEach(function(e, i) {
     // only print the domain if it's different than the previous error
     if (i===0 || e.domain !== response.error[i-1].domain) {
       $('<h4/>').text(e.domain).appendTo($html);
     }

     // always print the lesson
     $('<h5/>').text(e.lesson).appendTo($html);
   });
}

代码

{
  "error": [{
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 1",
  }, {
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 2",
  }, {
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 3",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 1",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 2",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 3",
  }, {
    "domain": "(PSLT)",
    "LessonName": "PSLT 1",
  }, {
    "domain": "(PSIT)",
    "LessonName": "PSIT 1",
  },
  ]
};

成功：功能（响应）{
var currentDomain=“”；
var数据=”；
对于（i=0；i'；
}
$（“#域”）。追加（数据）；
}

有几个问题：

1） 数据质量。您的JSON不一致-例如，您的域SA 1在示例中实际上以3种不同的方式表示，如“（SA 1）”、“（SA 1）”和“（SA 1）”。这将导致它们之间的任何字符串比较失败，因为它们永远不会相互匹配

2） 代码不太正确。您甚至从未尝试打印课程名称，循环中出现了一个逻辑错误，您无缘无故地增加了

i

一个额外的时间，这意味着您遗漏了一些行

以下是更正后的数据和代码：

JSON

success: function(response) {
   var $html = $('#domain');
   response.error.forEach(function(e, i) {
     // only print the domain if it's different than the previous error
     if (i===0 || e.domain !== response.error[i-1].domain) {
       $('<h4/>').text(e.domain).appendTo($html);
     }

     // always print the lesson
     $('<h5/>').text(e.lesson).appendTo($html);
   });
}

代码

{
  "error": [{
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 1",
  }, {
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 2",
  }, {
    "domain": "(SA 1)",
    "LessonName": "SA 1 Unit 3",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 1",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 2",
  }, {
    "domain": "(SA 2)",
    "LessonName": "SA 2 Unit 3",
  }, {
    "domain": "(PSLT)",
    "LessonName": "PSLT 1",
  }, {
    "domain": "(PSIT)",
    "LessonName": "PSIT 1",
  },
  ]
};

成功：功能（响应）{
var currentDomain=“”；
var数据=”；
对于（i=0；i'；
}
$（“#域”）。追加（数据）；
}

希望这会有所帮助。在尝试将结构放入HTML列表之前，您需要对其进行适当的分组，否则事情会变得非常复杂并且容易出错

阅读并播放下面的代码。它输出一个带有层次结构的数组，然后创建HTML

var响应={
“错误”：[
{
“域”：（SA 1）“，
“LessonName”：“SA 1单元1”，
}, {
“域”：（SA 1）“，
“LessonName”：“SA 1第2单元”，
}, {
“域”：（SA 1）“，
“LessonName”：“SA 1第3单元”，
}, {
“域”：“（SA 2）”，
“LessonName”：“SA 2单元1”，
}, {
“域”：“（SA 2）”，
“LessonName”：“SA 2单元2”，
}, {
“域”：“（SA 2）”，
“LessonName”：“SA 2第3单元”，
}, {
“域”：（PSLT）“，
“LessonName”：“PSLT 1”，
}, {
“域”：（PSIT）”，
“LessonName”：“PSIT 1”，
},
]
};
功能成功（响应）{
var currentDomain=''；
//首先，制作组标题
var redux=response.error
//首先获取标题
.减少（功能（acc、ERRORBJ）{
var cleanDomain=errorObj.domain.replace（/^\s+|\s+$/gm，）；
如果（cleanDomain！==currentDomain）{
acc.push（{domain:cleanDomain，children:[]}）；
currentDomain=cleanDomain；
}
返回acc；
}, [])
//对于每个标题，添加子项
.map（函数（domainObj）{
//从所有错误中获取相应的课程名称，并仅获取标题
var firstLesso