web-dev-qa-db-ja.com

JavaScript配列の各要素を新しい行に表示する方法

文字列ビルドフォームのコンマ区切り値を使用して、各値を取得するためにsplitを使用し、その後、各行に新しい値を表示したいのですが、同じ行に一緒に表示される最後の2つ。明確にするために：

値1

、値2

、値3

、値4、値5

これが私が使っている関数です：

_checkDates: function(dates) {
        if (dates != null)
        {
            var zzz = dates.split(',');
            var xxx = zzz.length;
            console.log(xxx);
            for (var i=0; i<=xxx; i++)
                {
                    zzz[i] = zzz[i] + '<br />';
                    return zzz;
                }
        }
        return dates;
    }

明確にするために、これはExtJS 4で書かれています。この場合、問題は純粋なJavaScriptであり、ExtJS 4とは関係ありませんが、とにかく私は間違っていると思います。

それで、なぜそれが起こるのか、そしてどのようにして最後の要素を新しいラインに乗せるようにすることができるのでしょうか？

ありがとう

レロン

javascriptextjs4
14
Leron_says_get_back_Monica

Forループは疑わしいです。まず、すべてのアイテムを処理するわけではありません（@sarfrazが指摘したように、最後のアイテムはありません）。 Sencondlyあなたはforループの本体で結果（zzz）を返しています：

for (var i=0; i<=xxx; i++)
{
  zzz[i] = zzz[i] + '<br />';
  return zzz; // for-loop will stop here! resulting in ["value1<br />", "Value2", etc...]
}

Javscriptでは、配列を単純に「結合」できます。

return dates.split(',').join("<br />")

単に文字列を置き換えるだけなので、replaceメソッドを使用できます。

return dates.replace(",", "<br />");
11
Stefan

すでにステファンがあなたの間違いを述べているので、私はあなたの機能ビットクリーナーを変更しました。

function splitDate(dates) {
        if (dates != null)
        {
            var dates = dates.split(',');
            var xxx = dates.length;
            console.log(xxx);
            for (var i=0; i<xxx; i++)
                {
                    dates[i] = dates[i];                    
                }
        }
        console.log(dates.join('\r\n'));
        return dates.join('\r\n');        
    }

上記の関数は、1行で実行できます。

それが配列の場合、次の方法で新しい行に分割できます：

var arr = ['Apple','banana','mango'];
console.log(arr.join('\r\n'));

文字列の場合：

var str = "Apple,banana,mango";
console.log(str.split(',').join("\r\n"));
22
VIJAY P

React-Nativeの場合

_const your_array_name = [
{
    id: 1,
    text: 'Lorem ipsum is simple dummy text for printing the line',
    skills: ['javascript', 'Java']
},
{
    id: 2,
    text: 'Lorem ipsum is simple dummy text.',
    skills: ['javascript', 'Java']
} ]
_

<Text style={{color:'#ff8500',fontSize:18}}>{your_array_name.skills.splice(',').join("\n")}</Text>

0
DevAelius