JavaScriptオブジェクトをHTMLでループする方法は？

JavaScriptオブジェクトをループし、オブジェクト長と同じ回数だけhtmlスクリプトを繰り返します。ここJavaScriptオブジェクトをHTMLでループする方法は？

、Iは、スクリプトタグ

<script> 
    var obj; 

    ipcRenderer.on('requests-results', (event, hosSchema) => { 
    obj = hosSchema 
    }) 
</script>

objに以下たショー以下ピクチャとしてMongoデータベースから検索配列である：

及びIは内部以下ました<body>タグ：

<div class="row"> 
       <div class="col-md-4 col-sm-4"> 
        <div class="card"> 
         <div class="card-content"> 
          <span class="card-title">.1.</span> 
          <p>.2.</p> 
         </div> 
         <div class="card-action"> 
          <a href="#">.3.</a> 
          <a href="#">.4.</a> 
         </div> 
         </div> 
       </div> 
      </div>

objをループして<div>タグを何度も繰り返すには、obj.lengthのように何回ですか？

出典

2017-08-11 mazin

json.parseを使用してください。 javascriptのforループ。それは質問ですか？ – Amit

技術的にJSON.parse（）はJSONをJavaScriptオブジェクトに変換します。データが返される形式は、JSONオブジェクトを含むJSONです。「HTML」の 'object'をループしたい場合はhttp：//json.org/とhttps://www.w3schools.com/js/js_json.asp –

を参照してください。なぜ' jQuery'タグが付いたのですか？？ – Shiladitya

私は@Amitが述べたように、あなたがHandlebarsを使用することをお勧めします。

以下のように <div id="page-inner">内のコード実行

最初の移動：

<div id="page-inner"> 

</div> 

<script id= "requests-template" type="text/x-handlebars-template"> 
    <div class="row"> 
     {{#each requests}} 
     <div class="col-md-4 col-sm-4"> 
      <div class="card"> 
       <div class="card-content"> 
        <span class="card-title">{{this.fieldName}}</span> 
        <p>{{this.fieldName}}</p> 
       </div> 
       <div class="card-action"> 
        <a href="#">{{this.fieldName}}</a> 
        <a href="#">{{this.fieldName}}</a> 
       </div> 
      </div> 
      </div> 
      {{/each}} 
    </div> 

</script>

あなたがリクエストを作成 text/javascriptタイプの別のスクリプトページ内のその後

と以下のようにそれにobj/hosSchema割り当て：

<script type="text/javascript"> 
var requestInfo = document.getElementById('requests-template').innerHTML; 

     var template = Handlebars.compile(requestInfo); 

     var requestData = template({ 
      requests: obj 
     }) 
     $('#page-inner').html(requestData); 
</script>

注： handlebarsパッケージがインストールされている必要があります（npm install handlebars --save）

出典

2017-08-11 05:52:06

ありがとうございます！あなたは私の日を救った！ – mazin

Handlebars.js、Mustache.js、またはunderscore.jsのようなテンプレートスクリプトを使用します。詳細については、以下のリンクを確認してください。

http://www.creativebloq.com/web-design/templating-engines-9134396

出典

2017-08-11 03:07:03 Amit

これを試してみてください：

var divlist = document.getElementsByTagName['div']; 
var duplicate = null; 
var rowIndex = -1; 
var found = false; 
for(var i = 0;i<obj.length;i++) 
{ 
    if(!found) 
    for(var p = 0;p<divlist.length;p++) 
     { 
      if(rowIndex != -1 && duplicate != null) 
       { 
        //set a Boolean to true and break 
        found = true; 
        break; 
       } 

      if(divlist[p].className == "col-md-4 col-sm-4") 
       { 
        //copy the element 
        duplicate = divlist[p]; 
       } 
      else if(divlist[p].className == "row") 
       { 
        //identify the row's index 
        rowIndex = p; 
       } 
     } 
      //append the duplicate 
      divlist[rowIndex].appendChild(duplicate); 
}

出典

2017-08-11 03:23:02

編集中、括弧を忘れました。うわー。 –

JavaScriptオブジェクトをHTMLでループする方法は？

答えて

関連する問題