このjQuery関数を実行するより良い方法はありますか？

Question

私はAPIに質問し、写真、名前、電子メール、電話番号を持つ人のグループを取得しています。私はそのデータをjquery ajaxで私のビューに挿入し、それをブートストラップレイアウトで表示しようとしています。

コメントしたセクションでこれを行うと、すべてのデータと残りのデータが表示されます。次に、2番目のインデックスに移動し、次の操作を行います。 4人であれば4人、3人、2人など4つのdivを持つことになります

私は1つのdivにすべてを入れた単数のjsを使って修正しましたが、このようなものであってはならない理由です。それを行うより良い方法はありますか？私は私のjsにあまりにも多くのHTMLを入れていますか？どうすればこれをきれいにすることができますか？

//This works to give me a div of each person with the h4 and p tags as needed in my layout 
$.each(data, function(item) { 
    $('.people').append('<div class="col-md-6 person"> 
<img class="img img-responsive" src="' + data[item].photo_url + '"><h4>' 
+ data[item].full_name + '</h4><p>' + data[item].offices[0].email 
+ '</p><p>' + data[item].offices[0].phone + '</p>'); 

//This just creates a blank div for each person than 
iterates through the index for each person 
    /*$('.people').append('<div class="col-md-6 person">'); 
     $('.person').append('<img class="img img-responsive" src="' + 
data[item].photo_url + '">') 
     .append('<h4>' + data[item].full_name + '</h4>') 
     .append('<p>' + data[item].offices[0].email + '</p>') 
     .append('<p>' + data[item].offices[0].phone + '</p>');*/ 
}); 

私の最終目標は、独自の要素で自分の画像、名前、電子メールと電話番号とそれぞれの人のためのdivを持つことです。

私のjsから多くのhtmlを削除するにはどうすればよいですか？それともこれですか？

ありがとうございました

Answer 1

どうやってですか？

var data = [{ 
 
    "full_name": "Lillian Gilbert", 
 
    "email": "lgilbert0@geocities.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "86-(925)179-9301" 
 
}, { 
 
    "full_name": "Eric Dixon", 
 
    "email": "edixon1@symantec.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000", 
 
    "phone": "66-(115)374-7439" 
 
}, { 
 
    "full_name": "Jessica Rodriguez", 
 
    "email": "jrodriguez2@wired.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "7-(536)585-2870" 
 
}, { 
 
    "full_name": "Juan Wilson", 
 
    "email": "jwilson3@latimes.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "7-(257)204-7934" 
 
}, { 
 
    "full_name": "Samuel Hill", 
 
    "email": "shill4@altervista.org", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "63-(328)705-8980" 
 
}, { 
 
    "full_name": "Louis Ruiz", 
 
    "email": "lruiz5@pagesperso-orange.fr", 
 
    "photo": "http://dummyimage.com/50x50.jpg/dddddd/000000", 
 
    "phone": "46-(888)764-8155" 
 
}, { 
 
    "full_name": "Clarence Larson", 
 
    "email": "clarson6@facebook.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/ff4444/ffffff", 
 
    "phone": "58-(422)543-6609" 
 
}, { 
 
    "full_name": "Carlos Mendoza", 
 
    "email": "cmendoza7@opensource.org", 
 
    "photo": "http://dummyimage.com/50x50.jpg/5fa2dd/ffffff", 
 
    "phone": "7-(624)453-7787" 
 
}, { 
 
    "full_name": "Irene Dean", 
 
    "email": "idean8@msn.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "598-(462)226-1135" 
 
}, { 
 
    "full_name": "Frank Ramos", 
 
    "email": "framos9@delicious.com", 
 
    "photo": "http://dummyimage.com/50x50.jpg/cc0000/ffffff", 
 
    "phone": "64-(204)933-8956" 
 
}]; 
 

 
var people = $('.people'); 
 
$.each(data, function(index, item) { 
 
    var person = { 
 
    photo: '<img class="img img-responsive" src="' + item.photo + '">', 
 
    name: '<h4>' + item.full_name + '</h4>', 
 
    email: '<p>' + item.email + '</p>', 
 
    phone: item.phone 
 
    }; 
 
    people.append('<div class="col-md-6 person">' + person.photo + person.name + person.email + person.phone + '</div>'); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="people"></div>