ネストされたJSONオブジェクトを使用したhtml要素の作成

Question

以前はJSONオブジェクトを使用してHTML要素を正常に作成できましたが、JSONオブジェクトをネストされたJSONに変更したため、HTML要素を適切に再現できません。私はかなりプログラミングに新しいので誰も私が間違っている場所を見つけるのを助けることができますか？

JSONファイル：

{ 
    "ThreeG": [ 
    { 
     "title":"Testing 1", 
     "filePath":"https://example.com", 
     "imagePath":"images/test.jpg" 
    }, 
    { 
     "title":"Testing 2", 
     "filePath":"https://example.com", 
     "imagePath":"images/test2.jpg" 
    } 
    ] 
} 

スクリプト：

<script> 
    $.ajax({ 
     url : "TestFiles.json", 
     type : "post", 
     contentType:"application/json", 
     success : function(list){   
      var divCol = "<div class='col-md-offset-1 col-sm-5 col-md-5'>"; 
      var divWell = "<div class='well' style='position:relative'>"; 
      var divClose= "</div>"; 

      list.forEach(function(obj, index) { 

      var title  = "<h4>"  + obj.ThreeG.title + "</h4>"; 
      var linkStart = "<a href='" + obj.ThreeG.filePath + "' target='_blank'>" ; 
      var image  = "<img data-toggle='tooltip' data-placement='left' title='Click to open data' src='" + obj.ThreeG.imagePath + "' height='100%' width='100%'/>" 
      var linkEnd = "</a>"; 

      var div = divCol + 
      divWell  + 
      title  + 
      linkStart  + 
      image  + 
      linkEnd + 
      divClose + 
      divClose; 

      console.log(obj); 
      $("#test").append(div); 

      }) 
     } 
    }); 
    </script> 

Answer 1

var obj = { 
 
    "ThreeG": [ 
 
    { 
 
     "title":"Testing 1", 
 
     "filePath":"https://example.com", 
 
     "imagePath":"images/test.jpg" 
 
    }, 
 
    { 
 
     "title":"Testing 2", 
 
     "filePath":"https://example.com", 
 
     "imagePath":"images/test2.jpg" 
 
    } 
 
    ] 
 
}; 
 

 
for(var i=0;i<obj.ThreeG.length;i++) { 
 
var data = obj.ThreeG[i];//Take a reference here 
 
console.log(data.title, data.filePath, data.imagePath); 
 
}

obj.ThreeGがarrayあるので、あなたはobj.ThreeG.titleを言うことはできません。 obj.ThreeG[0].titleとobj.ThreeG[1].titleなどを使用する必要があります。

上記のようにループを繰り返す必要があります。

Answer 2

成功コールバックのパラメータは、プロパティ/キーThreeGを持つオブジェクトです。したがって、list.forEachの代わりにlist.ThreeG.forEachを実行し、forEachコールバックの各objは、HTML要素を作成するために使用できるjsonオブジェクトになります。

list.ThreeG.forEach(function(obj, index) { 
     console.log(obj); // { "title":"Testing 1", "filePath":"https://example.com", "imagePath":"images/test.jpg" } for the first object 
}