foreachループの後にJavascript配列の値が失われる

Question

私の配列をループしてhtmlテーブルに追加しようとしています。私のアレイの例は、この

$arrayOne =["text1", "text2", "text3"] 
$arrayTwo =["", "mytext1", "mytext1"] 
$arrayThree=["dummyText1", "dummyText2", "dummyText3"] 
$arrayFour=["fourthText", "Fourth", "Four"] 

のように見える私はここ

arrayOne.forEach(function(value, key){ 
    let ExampleOne = $arrayOne[key], 
     ExampleTwo = $arrayTwo[key] ? $arrayTwo[key] : "", 
     ExampleThree = $arrayThree[key] ? $arrayThree[key] : "", 
     ExampleFour = $arrayFour[key] ? $arrayFour[key] : "", 

    $("#myModal").find("#mysection").append(<tr><td>"+ExampleOne+"</td><td>"+ExampleTwo+"</td><td>"+ExampleThree+"</td><td>"+ExampleFour+"</td> 
} 

をループしています、それはそれは第二のアレイ内のコンテンツをスキップし

text1  ""   "dummytext1" "fourthText" 
test2  ""   "dummyText2" "Fourth" 
text3  "mytext1" "dummyText3" "Four" 

のようなものを出力します。空の空の値を取り除きたくはありません。 "私はそれが繰り返しの項目をスキップしないようにしたい。なぜコンテンツをスキップしているのか分かりません。

Answer 1

ちょうどコードを整理してJsFiddleで実行したので、ここで作業します。

あなたはちょうどあなたが既に持っているインラインブール文を編集します（私はあなたがすると仮定）のスペースが必要な場合は

var arrayOne = ["text1", "text2", "text3"]; 
 
var arrayTwo = ["", "mytext1", "mytext1"]; 
 
var arrayThree = ["dummyText1", "dummyText2", "dummyText3"]; 
 
var arrayFour = ["fourthText", "Fourth", "Four"]; 
 

 
arrayOne.forEach(function(value, key) { 
 
    let ExampleOne = arrayOne[key], 
 
     ExampleTwo = arrayTwo[key] ? arrayTwo[key] : "", 
 
     ExampleThree = arrayThree[key] ? arrayThree[key] : "", 
 
     ExampleFour = arrayFour[key] ? arrayFour[key] : ""; 
 
     
 
    $("#myModal").find("#mysection").append("<tr><td>" + ExampleOne + "</td><td>" + ExampleTwo + "</td><td>" + ExampleThree + "</td><td>" + ExampleFour + "</td>"); 
 
});

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

。