Question 269965 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – JS – printing arrays to DOM

What is a good way to print a filtered array to the DOM? I’m trying to create a function (printJazzAlbums()) for an onclick that prints my filtered array to the DOM. If I just print it with, say, queryselector it says [object], and if I JSON.stringify it first, it looks messy with all the curly braces and it is not formatted well (no line breaks between items). Thanks!

<script>
    const records = [
      {
        artist: 'Miles Davis',
        album: 'Kind of Blue',
        label: 'Columbia',
        year: 1959,
        genre: 'Jazz'
      },
      {
        artist: 'Ralph Stanley',
        album: 'Old Home Place',
        label: 'Rebel',
        year: 1976,
        genre: 'Bluegrass'    
      },
      {
        artist: 'Bad Religion',
        album: 'No Control',
        label: 'Epitaph',
        year: 1989,
        genre: 'Punk Rock'
      },
      {
        artist: 'John Coltrane',
        album: 'A Love Supreme',
        label: 'Impulse!',
        year: 1965,
        genre: 'Jazz'
      },
      {
        artist: 'Descendants',
        album: 'Milo Goes to College',
        label: 'New Alliance',
        year: 1982,
        genre: 'Punk Rock'
      },
      {
        artist: 'Charles Mingus',
        album: 'Town Hall Concert',
        label: 'Jazz Workshop',
        year: 1959,
        genre: 'Jazz'
      },
      {
        artist: 'Tony Rice',
        album: 'Manzanita',
        label: 'Rounder',
        year: 1979,
        genre: 'Bluegrass'
      },
      {
        artist: 'Ornette Coleman',
        album: 'The Shape of Jazz to Come',
        label: 'Atlantic',
        year: 1959,
        genre: 'Jazz'
      },
      {
        artist: 'Joni Mitchell',
        album: 'Blue',
        label: 'Reprise',
        year: 1971,
        genre: 'Rock'
      },
      {
        artist: 'Pat Martino',
        album: 'El Hombre',
        label: 'Prestige',
        year: 1967,
        genre: 'Jazz'
      },
      {
        artist: 'Roy Haynes',
        album: 'Out of the Afternoon',
        label: 'Impulse!',
        year: 1962,
        genre: 'Jazz'
      },
      {
        artist: 'Neil Young',
        album: 'Harvest',
        label: 'Reprise',
        year: 1972,
        genre: 'Rock'
      },
    ];


    function printJazzAlbums() {
      document.querySelector('#print-albums').innerHTML = 
      JSON.stringify(jazzAlbums);
    }

    const jazzAlbums = records.filter(record => record.genre === 'Jazz');
    
    
  </script>
Tags:

2

Answers


  1. 0

    To print a filtered array to the DOM in a more human-readable format, you can loop through the array and create HTML elements for each item you want to display.

    Or you can use an external library to format your data like code-prettify

    Login or Signup to reply.
  2. 0

    There are established ways of creating an HTML table from an array of objects. The solutions found here in Stackoverflow appeared to be rather "fixed" and verbose, like How to create an HTML table from an array of objects? .

    A more generic way of doing it with a minimum of script effort could be the following;

    const records = [
  {
    artist: 'Miles Davis',
    album: 'Kind of Blue',
    label: 'Columbia',
    year: 1959,
    genre: 'Jazz'
  },
  {
    artist: 'Ralph Stanley',
    album: 'Old Home Place',
    label: 'Rebel',
    year: 1976,
    genre: 'Bluegrass'    
  },
  {
    artist: 'Bad Religion',
    album: 'No Control',
    label: 'Epitaph',
    year: 1989,
    genre: 'Punk Rock'
  },
  {
    artist: 'John Coltrane',
    album: 'A Love Supreme',
    label: 'Impulse!',
    year: 1965,
    genre: 'Jazz'
  },
  {
    artist: 'Descendants',
    album: 'Milo Goes to College',
    label: 'New Alliance',
    year: 1982,
    genre: 'Punk Rock'
  },
  {
    artist: 'Charles Mingus',
    album: 'Town Hall Concert',
    label: 'Jazz Workshop',
    year: 1959,
    genre: 'Jazz'
  },
  {
    artist: 'Tony Rice',
    album: 'Manzanita',
    label: 'Rounder',
    year: 1979,
    genre: 'Bluegrass'
  },
  {
    artist: 'Ornette Coleman',
    album: 'The Shape of Jazz to Come',
    label: 'Atlantic',
    year: 1959,
    genre: 'Jazz'
  },
  {
    artist: 'Joni Mitchell',
    album: 'Blue',
    label: 'Reprise',
    year: 1971,
    genre: 'Rock'
  },
  {
    artist: 'Pat Martino',
    album: 'El Hombre',
    label: 'Prestige',
    year: 1967,
    genre: 'Jazz'
  },
  {
    artist: 'Roy Haynes',
    album: 'Out of the Afternoon',
    label: 'Impulse!',
    year: 1962,
    genre: 'Jazz'
  },
  {
    artist: 'Neil Young',
    album: 'Harvest',
    label: 'Reprise',
    year: 1972,
    genre: 'Rock'
  },
];

document.querySelector('#tbl1').innerHTML = arr2tbl(records.filter(record => record.genre === 'Jazz'))

function arr2tbl(array){
 // row: creates html for a single table row:
 const row=(obj,what,cell)=>`<tr>${Object[what](obj).map(k=>`<t${cell}>${k}</t${cell}>`).join("")}<tr>`;
 return array.map((o,i)=> 
 (!i ? row(o,"keys","h") : "" ) // heading row
     + row(o,"values","d") // data row
 ).join("");
}
    <table id="tbl1"></table>

    The function arr2tbl() generates a simple HTML string resulting in a table that will show all the objects of the given array of objects. The property names of the objects will be the column names.

    The above function will work for any array of objects in which the contained objects are "simple" in structure, i . e. their properties are string or numeric values and do not contain further objects or arrays in themselves.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search