配列データとHTMLの前に付加

Question

私はjsfiddleを持っています。これは基本的に配列データを受け取り、それをHTMLに追加します。私はこれを達成するためにループforを使用しています。しかし、もし私がArray.prototype.map()の機能を使ってこれをやりたいのであれば私は好奇心が強いのですが、どうすればいいですか？私はアンダースコアやロダッシュのようなサードパーティのライブラリを使用したくありません。

Answer 1

更新ソリューション：

OPは、彼はその後、それがウィキペディアで（そのサービスのおそらく1）が設けられているようdata入力、

を制御できませんと言っているので、私は、データが構造化されていて正しいと仮定しています。つまり、ネストされた配列のうちの1つが他の配列よりも長くても短い場合も決してありません。

はい、間違いなくmap APIを使用して、Wikipediaの入力に意味を与えてから、forEachを実行してHTML文字列を作成することができます。

例：

var data = [["title 1","title 2","title 3"], 
    ["description 1","description 2","description 3"], 
    ["link 1","link 2","link 3"]]; 

var titles = data[0]; 
var descriptions = data[1]; 
var links = data[2]; 

var output = titles.map((title, index) => { 
    return { 
     "title": title, 
     "description": descriptions[index], 
     "link": links[index] 
    } 
}); 

output.forEach((item) => { 
     $("#output").append(
      "<div><h1>"+ item.title +"</h1><p>"+ item.description 
      +"</p><a>"+ item.link +"</a></div>" 
    ); 
}) 

参照JFiddle：https://jsfiddle.net/SamuelToh/8tpb1jsg/

---

前のソリューション：すべての

まず - 私が選択したデータが構造化された方法は、エラーを起こしやすいと思いますtitle1、description1、およびtitle1の仕方には明確な関係がないため、 dリンク1は集合を形成する。

アレイの1つが同期しなくなるとどうなりますか？つまり、配列の1つが残りの配列よりも短くなったり長くなったりするため、実行時にコードがindex out of bondで消滅します。

私は理想的にはあなたのデータを構造化したいと思います。

var suggested_data = { 
    title1: { 
     description: "description 1", 
     link: "link1" 
    }, 
    title2: { 
     description: "description 1", 
     link: "link1" 
    }, 
    title3: { 
     description: "description 1", 
     link: "link1" 
    } 
} 

このようにして、タイトルXにはyyyの値を持つdescriptionプロパティとvalue zzzというリンクプロパティがあります。

これらのプロパティのいずれかが見つからない場合でも、ほとんどの場合、undefinedの値が得られます。

そして、これはあなたが構造をループ

for (var title in suggested_data) { 
    var item = suggested_data[title]; 
    $("#output").append(
      "<div><h1>" + title+"</h1><p>" + item.description 
      +"</p><a>" + item.link + "</a></div>" 
    ); 
} 

最終的にはそれがmapを使用するかではない話ではありませんでしょうかですが、私はそれはあなたが選択したデータ構造のよりだと思います。

Answer 2

.map()を使用して新しいHTML要素を配列に集め、その結果を1回の操作で出力要素に追加することができます。

文字列を連結する代わりに、.text()メソッドを使用して、大なり記号またはアンパサンドが結果のHTMLを破棄しないように注意してください。

var data = [["title 1","title 2","title 3"], 
 
      ["description 1","description 2","description 3"], 
 
      ["link 1","link 2","link 3"]]; 
 

 
$("#output").append(data[0].map((title,i) => 
 
    $("<div>").append(
 
     $("<h1>").text(title), 
 
     $("<p>").text(data[1][i]), 
 
     $("<a>").text(data[2][i]) 
 
    ) 
 
));

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

NB：ここ

は、それは次のようになりますどのようにあなたが実際にハイパーリンクとして3番目の値を使用したい場合は、その後、使用.attr()：

$("<a>").attr('href', data[2][i]).text('click here') 

または、最初の（タイトル）値をハイパーリンクすることもできます：

$("<div>").append(
    $("<h1>").append(
     $("<a>").attr('href', data[2][i]).text(title) 
    ), 
    $("<p>").text(data[1][i]) 
)