Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Okay, so simple enough task - I'm using Ionic/Angular2 to develop an auditing app. Using angular I can map Objects into the DOM rather easily, so what I need to do is create an object - but I would like some suggestions or advice on how I can do this in a modular way.

The app displays a table of input fields with some information (excuse my ASCII art) depending on the table object.

 ______________________________________________________
| Tests   | Regulations    | itemOne     | itemTwo     |
|------------------------------------------------------|
| testOne | some regs here | <HTMLinput> | <HTMLinput> |
|------------------------------------------------------|
| testTwo | some regs here | <HTMLinput> | <HTMLinput> |
|------------------------------------------------------|
| etc     | etc            | <HTMLinput> | <HTMLinput> |
|______________________________________________________|

This was my first attempt:

table = [{
  title: 'First set of tests',
  time: '5:00 am',
  tests: [{
    title: 'testOne',
    regs: 'some regs here',
    type: 'X',
    items: {
      itemOne: true,
      itemTwo: true
    }
  },
  {
    title: 'testTwo',
    regs: 'some regs here',
    type: 'Y',
    items: {
      itemOne: false,
      itemTwo: true
    }
  }]
},
{
  etc
},
{
  etc
}];

I gave up on the first attempt since I would be left with a massive JSON object that I would have to edit manually in order to update it in the future. In an attempt to make it a little more modular / easier to change / programatically update I tried modifying it like so:

/**
 * Configures tests
 * @param  {String} test  Name of test to configure
 * @param  {Array}  items Which items to test
 * @return {Object}       An object describing which items are enabled
 */
function configureTests(test, enabledItems) {

  // items object
  o = {};

  // loop through enabledItems and return an object describing which
  // items are to be tested with test
  for (var i = 0; i < enabledItems.length; i++) {
    var index = items.indexOf(enabledItems[i]);
    if (index > -1) o[items[index]] = true;
    else o[items[index]] = false;
  }

  // return tests object
  return {
    title: tests[test].title,
    regs: tests[test].regs,
    type: tests[test].type,
    items: o
  }
}

// items
items = [
  'itemOne',
  'itemTwo'
];

// tests
tests = {
  testOne: {
    title: "Test One",
    regs: "some regs here",
    type: "X"
  },
  testTwo: {
    title: "Test Two",
    regs: "some regs here",
    type: "Y"
  }
}

// configure table
table = [{
  title: 'First set of tests',
  time: '5:00 am',
  tests: [
    configureTests('testOne', items),
    configureTests('testTwo', ['itemTwo'])
  ]
},
{
  title: 'Second set of tests',
  time: '5:00 am',
  tests: [
    configureTests('testOne', items),
    configureTests('testTwo', ['itemTwo'])
  ]
},
{
  title: 'Third set of tests',
  time: '5:00 am',
  tests: [
    configureTests('testOne', items),
    configureTests('testTwo', items)
  ]
}];

I still think that there is an easier way to do this.

My end goal is to be able to add tests and items from within my app (like an editor) and for it to be rather simple in terms of programming and updating the existing table.

This is my first attempt at mapping such large objects to the DOM and using them to build tables, but any help/suggestions/criticisms/advice would be much appreciated!

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.