使用带有数组对象的联接方法用逗号分隔

Question

我有一个由数组组成的对象，其中包含多个对象。我正在尝试使用联接方法，但当然，我意识到这只在数组上可用，除非转换为其他方法。

我想用逗号/管道分隔我需要的对象。其结果应如下：

DISOVER体验系列195豪华

但是需要一些关于如何实现这一点的指导，因为我得到了以下错误：

"message"："Uncaught :data.lideHeading1.join不是一个函数“

有别的办法吗？请参阅我的代码如下：

​

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

imgObj.slideData.forEach(function(data, idx) {
  var heading1 = data.slideHeading1.join('|');
  var heading2 = data.slideHeading2.join('|');
  var heading3 = data.slideHeading3.join('|');

  $('.slideTitle .heading-1').append(heading1);
  $('.slideTitle .heading-2').append(heading2);
  $('.slideTitle .heading-3').append(heading3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

​

编辑:请看下面的代码，它向数组中添加了更多的对象：--我也在使用文本旋转器，它解释了为什么文本被管道分隔。

结果应是：

<span class="heading-1">DISCOVER | EXPERIENCE | 195 LUXURY</span>
<span class="heading-2">MORE | IT ALL | SUPERJETS</span>
<span class="heading-3">FUEL | | TODAY</span>

代码示例：

​

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
    "slideHeading2": "MORE",
    "slideHeading3": "FUEL",
  }, {
    "slideHeading1": "EXPERIENCE",
    "slideHeading2": "IT ALL",
  }, {
    "slideHeading1": "195 LUXURY",
    "slideHeading2": "SUPERJETS",
    "slideHeading3": "TODAY",
  }]
};

var heading1 = [];
imgObj.slideData.forEach(function(data, idx) {
  if (idx < imgObj.slideData.length - 1)
    heading1[idx] = data.slideHeading1 + ' | ';
  else // skip if the item is the last item
    heading1[idx] = data.slideHeading1;
});
document.querySelectorAll('span[class^=heading-]').forEach(function(el, i) {
  el.textContent = heading1[i]
});

$(".slideTitle span").Morphext({
  animation: "fadeInLeft",
  separator: "|",
  speed: 4000,
  complete: function() {
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

​

Answer 1

您将得到错误，因为data.slideHeading1不是数组，而join()是在数组上实现的方法。

我认为您希望通过管道(|)将所有项目分开。如果是这样，只需将该字符添加到文本的末尾即可。然后循环遍历所有span元素，以填充以前生成的数组中的文本。如下所示：

​

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

var heading1 = [];
imgObj.slideData.forEach(function(data, idx) {
  if(idx < imgObj.slideData.length - 1)
    heading1[idx] = data.slideHeading1 + ' | ';
  else // skip if the item is the last item
     heading1[idx] = data.slideHeading1;
});
document.querySelectorAll('span[class^=heading-]').forEach(function(el, i){
  el.textContent = heading1[i]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

​

请注意：，因为您所批准的代码和您所要求的内容的文本之间有点混淆：

我想用逗号分隔我需要的对象。

简单地替换

heading1[idx] = data.slideHeading1 + ' | ';

使用

heading1[idx] = data.slideHeading1 + ', ';

Answer 2

由于data.slideHeading1不是数组而是实际的字符串值，所以出现错误。

还将pipe(|)更改为comma(,)

我想用逗号分隔我需要的对象。

刚刚改变了

imgObj.slideData.forEach(function(data, idx) {
  var heading1 = data.slideHeading1.join('|');
  var heading2 = data.slideHeading2.join('|');
  var heading3 = data.slideHeading3.join('|');

  $('.slideTitle .heading-1').append(heading1);
  $('.slideTitle .heading-2').append(heading2);
  $('.slideTitle .heading-3').append(heading3);
});

到此

 imgObj.slideData.forEach(function(data, idx) {  
    var seperator = (idx==imgObj.slideData.length-1)? "":",";
                $('.slideTitle .heading-'+( idx+1)).append(data.slideHeading1 + seperator);
            });

​

var imgObj = {
  "slideData": [{
    "slideHeading1": "DISCOVER",
  }, {
    "slideHeading1": "EXPERIENCE",
  }, {
    "slideHeading1": "195 LUXURY",
  }]
};

 
imgObj.slideData.forEach(function(data, idx) {  
var seperator = (idx==imgObj.slideData.length-1)? "":",";
            $('.slideTitle .heading-'+( idx+1)).append(data.slideHeading1 + seperator);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

​