Search jQuery

jQuery Forum

Using jQuery

ngibbs

JQuery loop display array name and value

in Using jQuery • 4 years ago

I am trying to build a loop where it will display like this:

Company Name ABC Inc

Mailing Address Springfield ZZ 12345

Phone 1 (555) 555-5555

Fax 1 (555) 555-5556

My current code is not looping for each object just displaying once.

Json Encode output

[{"Company Name":"ABC Inc","Mailing Address":"Springfield ZZ 12345","Phone":"1 (555) 555-5555","Fax":"1 (555) 555-5556","Email Address":"test@test.com"}]

HTML Code

<div id="company">
</div>
<script type='text/javascript'>
$(document).ready(function () {
/* call the php that has the php array which is json_encoded */
$.getJSON('php/company.php', function (company) {
/* data will hold the php array as a javascript object */
$.each(company, function (company_key, company_val) {
$("#company").append(
'<div class="row">'+
'<div class="col-md-6">'+
'<div class="form-group">'+
'<label class="control-label col-md-4"> Array Name</label>'+
'<div class="col-md-8">'+
'<p class="form-control-static"> Array Value </p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
});
});
});
</script>

Replies(5)

watusiware

Re: JQuery loop display array name and value

4 years ago

There's only one company in your output!

And you never made any use of the data, but that's another matter.

Use console.log() to make sure you know what your server sent.

jakecigar

Re: JQuery loop display array name and value

4 years ago

I would code it like https://jsfiddle.net/jakecigar/kksy8jet/ . You can add whatever tags you like.

JΛ̊KE

ngibbs

Re: JQuery loop display array name and value

4 years ago

I am trying to preserve the styling of the bootstrap theme.

I am trying to avoid appending a large block of html code. The block of html code currently in the append is repeated for each line item (Company Name, Address, Phone, Fax, Email).

Is there a more elegant way of generating the html code without wrapping them in single quotes?

Attached is the screenshot.

jakecigar

Re: JQuery loop display array name and value

4 years ago

More elegant? maybe if you design the html with placeholders. Then you could clone the html element and fill in the data. Or you could use HTML5 <template>s or ES6 string syntax, or use XSL to process the data.

But stringing along the data is the easiest. Just use your own tags.

JΛ̊KE

jakecigar