js関数の値からhtmlパーツを構築してください

Question

私は本当にその言葉を正しく表現する方法がわかりません。タイトルが間違っていればごめんなさい。

私は要素がデータ配列内にあるかどうかをチェックするjsファイルに関数を持っています。もしそうなら、htmlページは要素のすべての値を表示しなければなりません。しかし、要素が配列内にない場合、私のHTMLページは次のように表示されるだけです：要素が見つかりません。

JS機能：

function containsID(arr, number) { 
    var i = arr.length; 
    while (i--) { 
     if (arr[i].id === number) { 
      return true; 
     } 
    } 
    return false; 
} 

HTML：あなたは私はわからない与えられたID

function containsID(arr, obj) { 
    var i = arr.length; 
    while (i--) { 
    if (arr[i].id === obj) { 
     return i; 
    } 
    } 
    return -1; 
} 

で項目のインデックスを返す必要が

{% if containsID(data, id) %} //I want something like that 
    <p>{{data[id].text}}</p> 
{% else %} 
    <p> Not found </p> 
{% endif %} 

Answer 1

何{％の％ }アノテーションは（いくつかのテンプレートエンジンのように見えますが）意味しますが、あなたのhtmlは次のようなものでなければなりません：

{% if containsID(data, id) >= 0 %} //I want something like that 
    <p>{{data[containsID(data, id)].text}}</p> 
{% else %} 
    <p> Not found </p> 
{% endif %} 

良く出力するために、アレイにHTMLでJavaScriptから何かを2回

Answer 2

のループを避けるために（一度出力では、一度状態で）いくつかのテンプレート変数にcontainsIDの結果を格納し、それを2回使用することです要素のinnerHTML値を設定できます。

function getElement(e) { 
 
    return document.getElementById(e); 
 
} 
 

 
function foo() { 
 
    getElement("output").innerHTML = "Foo"; 
 
} 
 

 
function bar() { 
 
    getElement("output").innerHTML = "Bar"; 
 
}

<div id="output"> 
 
    &nbsp; 
 
</div> 
 

 
<input type="button" onclick="foo()" value="Foo"> 
 
<input type="button" onclick="bar()" value="Bar">

Answer 3

var desiredLogic = function(id){ 
     var itemWithGivenId = arr.filter(x=> { return x.id === id }); 
      if (itemWithGivenId.length) { 
       document.createElement("p").innerText = itemWithGivenId.text; 
       //append this element wherever you want to see it on the page 
       } 
      else{ 
      document.createElement("p").innerText = "Not found"; 
      //append this element wherever you want to see it on the page 
       } 
     }