javascript - How to write multiple materialize css cards with jquery.getjson() -

i use meterialize css create card. want create more. i'll use json , jquery.getjson() me write html tag multiple card. isn't working. in card area blank. can me? , sorry skill.

var db = {      "card" : [          {"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "card title", "card_subtitle" : "card subtitle", "badge" : ["hot", "win"], "modal_selector":"#"},         {"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "card title", "card_subtitle" : "card subtitle", "badge" : ["hot", "win"], "modal_selector":"#"},        {"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "card title", "card_subtitle" : "card subtitle", "badge" : ["hot", "win"], "modal_selector":"#"}      ]  };  $.getjson(db, function(data){    var i, j, k;    //loop write card element json. (i index card in json.)    (i in data) {      //card placeholder      $('#area').append('<div class="content col s12 m6 l4" >');      //add class card placeholder. (j index member of group.)      for(j=0; j<data.card[i].group.length; j++) {        $('.content').addclass(data.card[i].group[j]);      }      //card image      $('#area').append('<div class="card"><div class="card-image"><img src="' + data.card[i].image_url + '"></div>');      //card content      $('#area').append('<div class="card-content">');        //card title      $('#area').append('<span class="card-title grey-text text-darken-4">' + data.card[i].title + '</span>');        //card subtitle      $('#area').append('<p class="card-subtitle grey-text text-darken-2">' + data.card[i].subtitle + '</p>');        //card badge (k index member of badge.)      (k=0; j<data.card[i].badge.length; k++) {        $('#area').append('<span class="badge"></span>')        //add class card badge.        $('.badge').addclass(data.card[i].badge[k]);      }        //card link open modal. can't open because i'm not create modal element yet.      $('#area').append('<p><a href="' + data.card[i].modal_selector + '" class="modal-trigger">view more</a></p></div></div></div>')    }  });

header, main, footer { padding-left: 0px; }  		.area { background-color: #ccc; border: 3px solid #000; width: 100%; }  		.area .card, .card  { max-width: 300px; margin-left: auto !important; margin-right: auto !important;}  		.area .card .card-content, .card .card-content { padding-top: 1rem; padding-bottom: 1rem; }  		.area .card-content .card-title, .card-content .card-title { line-height: 2rem; }  		.card-content .card-title { line-height: 2rem !important;}  		.card-content .card-subtitle { font-size: 0.875rem; margin-bottom: 0.5rem !important}  		.badge.win { font-weight: 300; font-size: 0.8rem; color: #fff; background-color: #26a69a; border-radius: 2px; position: relative; float: right; right: 0rem; max-height: 12px;}  		.badge.hot { font-weight: 300; font-size: 0.8rem; color: #fff; background-color: #ef5350; border-radius: 2px; position: relative; float: right; right: 0rem; max-height: 12px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <main>    <!--card area-->    <p>json card area:</p>    <div id="area">    </div>    <!--example-->    <!--card placeholder--> <!--add class card placeholder.-->    <p>card example:</p>    <div class="job-content class1 class2 col s12 m6 l4" >      <div class="card">        <!--card image-->        <div class="card-image">          <img src="http://materializecss.com/images/sample-1.jpg">        </div>        <!--card content-->        <div class="card-content">          <!--card title-->          <span class="card-title grey-text text-darken-4">card title</span>          <!--card subtitle-->          <p class="card-subtitle grey-text text-darken-2">card subtitle</p>          <!--card badge--> <!--add class card badge.-->          <span class="badge win"></span>          <span class="badge hot"></span>          <!--card link open modal. can't open because i'm not create modal element yet.-->          <p><a href="#modal-selector" class="view-more modal-trigger">view more</a></p>        </div>      </div>    </div>  </main>

there many errors in code, wrong for use , wrong properties name, starting point you:

jsfiddle

loop through db.card array , use item results (data) create html.

js:

var db = {     "card": [{         "group": ["class1", "class2"],             "image-url": "images/sample-1.jpg",             "card_title": "card title",             "card_subtitle": "card subtitle",             "badge": ["hot", "win"],             "modal_selector": "#"     }, {         "group": ["class1", "class2"],             "image-url": "images/sample-1.jpg",             "card_title": "card title",             "card_subtitle": "card subtitle",             "badge": ["hot", "win"],             "modal_selector": "#"     }, {         "group": ["class1", "class2"],             "image-url": "images/sample-1.jpg",             "card_title": "card title",             "card_subtitle": "card subtitle",             "badge": ["hot", "win"],             "modal_selector": "#"     }] };  $.each(db.card, function (key, data) {     //loop write card element json. (i index card in json.)     console.log(data);     $('#area').append('<div class="content col s12 m6 l4" >');     //card image     $('#area').append('<div class="card"><div class="card-image"><img src="' + data['image-url'] + '"></div>');     //card content     $('#area').append('<div class="card-content">');     //card title     $('#area').append('<span class="card-title grey-text text-darken-4">' + data.card_title + '</span>');     //card subtitle     $('#area').append('<p class="card-subtitle grey-text text-darken-2">' + data.card_subtitle + '</p>');  });