AcessのHTMLコンテンツがJquery、Json、ループでスクリプト内に配置されています

Question

OK、ここでこのコードに苦労しています。私はJSFiddleを作成しましたが、jsonはそこでは動作しません。とにかく、私は理解するのに十分な情報があると信じています。

https://jsfiddle.net/9zor6bcu/3/

JS：

$.getJSON('http://jsonplaceholder.typicode.com/posts', function(data) { 
    for (var i = 0; i < 3; i++) { 
    var item = data[i]; 
    var htmls; 
    htmls = '<div class="rl_grupo"><h3 class="rl_empresa"> Texto falso </h3><p class="rl_assina"> usuário falso </p><p class="rl_documentos"> 5 falsidades <span>></span></p></div>'; 
    $(".rl_assina").html(item.title); 
    $(".container-fluid").append(htmls); 
    console.log(item.title); 
    } 
}); 

だから、私が持っているもの：HTML、私は（この実際の場合、ちょうど偽のAPIで）JSONからのデータを取り込むにしたいということ。私はループを作ることができ、コンソールで私は希望のデータにアクセスすることができます（私の例では、item.title）。しかし、私はhtmlの偽のテストをJsonからの行に置き換える方法を理解できません。

投稿されたフィドルで、実際には2番目のコード行がすべてのDivから同じものに変更されました。私が間違ってやっていること、そしてこのコードをどのように改善することができますか？私はスクリプトのインラインhtmlsが悪いことだと読んでいます。

誰かがより良い練習を指すことができる場合は、事前に感謝します！

Answer 1

私が正しく理解している場合は、追加する新しい要素のコンテキストで.rl_assinaを設定する必要があります。

$.getJSON('http://jsonplaceholder.typicode.com/posts', function(data) { 
    for (var i = 0; i < 3; i++) { 
    var item = data[i]; 
    var htmls; 
    htmls = $('<div class="rl_grupo"><h3 class="rl_empresa"> Texto falso </h3><p class="rl_assina"> usuário falso </p><p class="rl_documentos"> 5 falsidades <span>></span></p></div>'); 
    htmls.find(".rl_assina").html(item.title); 
    $(".container-fluid").append(htmls); 
    console.log(item.title); 
    } 
}); 

Answer 2

さて、あなたのコードを少し書き直しましたが、ここで私はそれをやっています。 JSONデータを繰り返し処理し、オブジェクトごとにテキストをリストに追加します。 ここから実際のAPI呼び出しを行うことができないため、データをハードコードしていますが、あなたはその考えを得ています。

const data = [ 
 
{ 
 
    userId: 1, 
 
    id: 1, 
 
    title: "sunt aut facere", 
 
    body: "quia et suscipit suscipit recusandae" 
 
}, 
 
{ 
 
    userId: 1, 
 
    id: 2, 
 
    title: "qui est esse", 
 
    body: "est rerum tempore vitae sequi sint nihil" 
 
}, 
 
{ 
 
    userId: 1, 
 
    id: 3, 
 
    title: "ea molestias quasi", 
 
    body: "et iusto sed quo iure voluptatem occaecati" 
 
}] 
 

 
const $rl_grupo = $("ul.rl_grupo") 
 

 
// $.getJSON('http://jsonplaceholder.typicode.com/posts', function(data) { 
 
    data.forEach(obj => { 
 
     $rl_grupo.append(`<li> 
 
     \t  <h3 class="title">${obj.title}</h3> 
 
       <p>${obj.body}</p> 
 
     </li>`) 
 
    }) 
 
// });

.rl_grupo { 
 
    margin: 20px; 
 
    border: 1px solid #426caf; } 
 
    .rl_grupo .rl_empresa { 
 
    font-size: 1rem; 
 
    font-weight: bold; 
 
    padding: 15px 10px 0px 10px; 
 
    margin-bottom: 5px; 
 
    color: black; } 
 
    .rl_grupo .rl_assina { 
 
    color: #426caf; 
 
    font-size: 0.9rem; 
 
    padding: 0 0 0 10px; } 
 
    .rl_grupo .rl_documentos { 
 
    background-color: #4e79bc; 
 
    font-size: 0.9rem; 
 
    font-weight: bold; 
 
    color: white; 
 
    margin: 0; 
 
    padding: 5px; 
 
    text-align: center; } 
 
    .rl_grupo .rl_documentos span { 
 
     float: right; 
 
     margin-right: 10px; }

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

 
<ul class="rl_grupo"></ul>