how to view an array in HTML

Question

So I want the array that I get back when I input a manufacturer to show the complete data from each object inside the array in the HTML. However when I call the function in the HTML page I only get back the word object however many times the Manufacturer is defined in the original array. Could anyone help please?

// To make program read the data inside the array cars and pick the ones with the      desired manufacturer//
function findManufacturer(manufacturer) {
    var retcars = [];
    for (i = 0; i < cars.length-1; i++) {
        car = cars[i]
        if (car.manufacturer == manufacturer) {
            retcars.push(car)
        }
    }
    display(retcars);
}

function display(mycars) {
    document.getElementById('mycars').textContent= mycars;
}

McGarnagle · Accepted Answer · 2014-06-09 23:50:42Z

1

At the simplest level, you could just use JSON.stringify. That's mostly useful for debugging, though:

function display(mycars) {
    document.getElementById('mycars').textContent= JSON.stringify(mycars);
}

You could also iterate through the array, and then through the properties of each car, generating some dynamic HTML:

function display(mycars) {
    var html = '';
    for (var car in mycars) {
        for (var prop in car) {
            html += prop + ': ' + car[prop];
        }
        html += '<hr/>';
    }
    document.getElementById('mycars').innerHTML = html;
}

Ideally though, you would want to be able to write an HTML template to display the data. I recommend taking a look at some client-side templating engines like Mustache.js or Underscore.js. These engines allow you to write an HTML template with tokens to represent the data fields:

<script type="text/template" id="car-template"> 
    <% _.each(cars, function(car) { %>
        <div>
            <div><%= make %></div>
            <div><%= model %></div>
        <div>
        <hr/>
    <% } %>
</script>

Then you simply write something like this:

function display(mycars) {
    var template = _.template(document.getElementById("car-template"));
    var html = template({ cars: mycars });
    document.getElementById('mycars').innerHTML = html;
}

edited Jun 9, 2014 at 23:50

answered Jun 9, 2014 at 23:42

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3471031 Over a year ago

Thank you so much I finally got it :)

Ryan Erdmann · Accepted Answer · 2014-06-09 23:43:32Z

mycars is an array, so you can't set the text content of an element to be the array...that's why you're getting the famous [Object object] string.

You need to parse the array and turn it into some sort of HTML before inserting it into the DOM.

Try something like this, where we put the contents of mycars into a table and then put it into your <div id="mycars">:

function display(mycars) {
    var table = '<table>';
    for (var i = 0; i < mycars.length; i++) {
        table += '<tr>';
        foreach (var prop in mycars[i]) {
            table += '<td>' + mycars[i][prop] + '</td>';
        }
        table += '</tr>';
    }
    table += '</table>';
    document.getElementById('mycars').innerHTML = table;
}

Anish Beetun · Accepted Answer · 2014-06-09 23:48:49Z

0

Try those changes:

function display(mycars) {
  document.getElementById('mycars').innerHTML= mycars.toString();
}

answered Jun 9, 2014 at 23:48

Anish Beetun

22

1 Comment

McGarnagle Over a year ago

Please note, toString() does not extract properties, it just displays the "[object]" string (it's actually identical to the OP code, which does an implicit string conversion).

cocco · Accepted Answer · 2014-06-10 00:20:07Z

0

Advanced use of JSON.stringify

var x={a:"hello",b:[1,2,3]},
    y=function(a,b){return typeof b==='string'?undefined:b},
    D=document;

D.body.appendChild(D.createElement('pre')).textContent=JSON.stringify(x,y,' ');

Description

JSON.stringify(Array,ReplacerFunction,SpaceToUse)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

The replace function allows you to replace some values inside the array/object before creating the text string. In my case i exclude strings.

Element pre

Also i like to use pre as it's preformatted, so '\n' is a new line '\t' is a tab, in my example i have a simple white space.

Demo

http://jsfiddle.net/T8u32/

with replacer function

http://jsfiddle.net/T8u32/1/

edited Jun 10, 2014 at 0:20

answered Jun 10, 2014 at 0:13

cocco

16.8k7 gold badges65 silver badges77 bronze badges

Collectives™ on Stack Overflow

how to view an array in HTML

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related