CODEWITHSUNDEEP
javascriptarrayshtmlobject
user3471031
user3471031

Reputation: 13

how to view an array in HTML

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;
}

Upvotes: 0

Views: 156

Answers (4)

cocco
cocco

Reputation: 16706

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/

Upvotes: 0

McGarnagle
McGarnagle

Reputation: 102783

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;
}

Upvotes: 1

Anish Beetun
Anish Beetun

Reputation: 22

Try those changes:

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

Upvotes: 0

Ryan Erdmann
Ryan Erdmann

Reputation: 1826

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;
}

Upvotes: 0

Related Questions