Javascript For Loop HTML syntax with JSON

Question

I'm pretty new to Javascript so I'm not sure if I'm doing this right. First off I'm using JSON to create an array object 'providerlisting'. Next I am creating a for loop and it should loop through the html until there are no more listings in the JSON array. I'm not sure that I did the syntax correctly. I'm also kind of new to asking these questions so I'm sorry in advance if I'm doing this incorrectly.

for (var i=0;i<providerlisting.length;i++)
{ document.write('<div class="entry panel row">
                    <div class="large-4 columns first">
                        <div class="name">'providerlisting.nametitle[i]'</div>
                        <div class="specialty">'providerlisting.caretype[i]'</div>
                        <div class="peferred">'providerlisting.preferredprovider[i]'</div>
                    </div>
                    <div class="large-3 columns second">
                        <div class="address">'providerlisting.address1[i]'<br />
                        'providerlisting.address2[i]'<br />
                        'providerlisting.citystatezip[i]'
                        </div>
                    </div>
                    <div class="large-3 columns third">
                        <img src="'providerlisting.coverage[i]'" alt="example">
                    </div>
                    <div class="large-2 columns fourth">
                        <div class="status">'providerlisting.status[i]'</div>
                        <a data-dropdown="actionsMenu2" class="actions button small secondary round dropdown" href="#">Actions</a><br>
                        <ul id="actionsMenu2" data-dropdown-content="" class="f-dropdown">
                            <li><a href="'providerlisting.psn[i]'">Generate PSN</a></li>
                            <li><a href="'providerlisting.dcontact[i]'">Download Contact</a></li>
                            <li><a href="'providerlisting.save[i]'">Save to Provider List</a></li>
                            <li><a href="'providerlisting.rating[i]'">View Healthgrades Rating</a></li>
                        </ul>
                    </div>
                </div>
     ');

Answer 1

I can't tell exactly because you haven't posted your JSON, but this should do it:

for(var i = 0; i < providerlisting.length; i++) {
    document.write('<div class="entry panel row">
                    <div class="large-4 columns first">
                        <div class="name">'+ providerlisting[i].nametitle +'</div>
                        <div class="specialty">'+ providerlisting[i].caretype +'</div>
                        <div class="peferred">'+ providerlisting[i].preferredprovider +'</div>
                    </div>
                    <div class="large-3 columns second">
                        <div class="address">'+ providerlisting[i].address1 +'<br />
                        '+ providerlisting[i].address2 +'<br />
                        '+ providerlisting[i].citystatezip +'
                        </div>
                    </div>
                    <div class="large-3 columns third">
                        <img src="'+ providerlisting[i].coverage +'" alt="example">
                    </div>
                    <div class="large-2 columns fourth">
                        <div class="status">'+ providerlisting[i].status +'</div>
                        <a data-dropdown="actionsMenu2" class="actions button small secondary round dropdown" href="#">Actions</a><br>
                        <ul id="actionsMenu2" data-dropdown-content="" class="f-dropdown">
                            <li><a href="'+ providerlisting[i].psn +'">Generate PSN</a></li>
                            <li><a href="'+ providerlisting[i].dcontact +'">Download Contact</a></li>
                            <li><a href="'+ providerlisting[i].save +'">Save to Provider List</a></li>
                            <li><a href="'+ providerlisting[i].rating +'">View Healthgrades Rating</a></li>
                        </ul>
                    </div>
                </div>');
}

I changed every providerlisting.prop[i] into providerlisting[i].prop. You were also stringing together in the wrong way:

var str = 'some words'someVariable'more words' won't work.

var str = 'some words'+ someVariable +'more words' will.