javascript - jQuery - 将数组部分映射到 HTML

Question

我有一个简单的 Ajax 请求，但它很快变得越来越不简单!

基本上它会发布一些数据(产品代码)并返回类似代码的数组，我需要将每个数组元素显示为 button在btn-group内。

请记住，此 Ajax 请求针对找到的每个代码(通常不超过几个)运行。

所需结果:

数组中的每个元素都应以 <button> 的形式返回.btn-group 中的元素div 。第一个btn应包含原始内容(使用 data.code 返回)。

因此，对于两个 AJAX 请求，它应该类似于:

到目前为止:

它将其分割成一个新的 btn-group对于数组中的每个代码。我可以看到代码中哪里出了问题，但我无法弄清楚它应该如何。下面的 JS 返回这个:

我的AJAX成功函数:

// AJAX function above here...
success: function(data) {
     if (!data.result) {
          $('#importerrors').append(
                data.rarray.map(function(erow) {
                return $('<div class="btn-group" style="margin:10px!important;"><button class="btn btn-danger">'+ data.code +'</button>').append(
                $.map(erow, function(cell) {
                     return $('<button class="btn btn-success retry-code">').text(cell);
                })
                );
                })
            );
      } else {
          //  other stuff
      }
}

我已经仔细查看了有关 SO 的类似问题，但似乎没有任何帮助!非常感谢对此的任何帮助 - 谢谢!

<小时/>

编辑:

console.log正如下面 @naortor 所建议的，返回以下内容:

<强> data.rarray :

rarray: Array(3)
0: Object
    > code: "FAIGGHVD "
      __proto__: Object
1: Object
    > code: "GG500"
      __proto__: Object
2: Object
    > code: "GGC4"
      __proto__: Object
length: 3
__proto__: Array(0)

Answer 1

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

$('#importerrors').append('<div class="btn-group" style="margin:10px!important;"><button class="btn btn-danger">'+ data.code +'</button></div>').find('div:last-child').append(
    $.map(rarray, function(cell) {
         return $('<button class="btn btn-success retry-code">').text(cell.code);
    })
);

https://jsfiddle.net/8xqwydsn/1/