如何在javascript中使用数组/对象/JSON轻松访问表格数据？

Question

I'm working on an issue where I need to access the value and name of a buitenunit, binnenunit and boiler when certain conditions are met.

I have 4 different tables like this (almost similar) and when a condition is met I need to start searching data in 1 of the 4 tables. Take this table for example.

alpha|    buitenunit              binnenunit              boiler
-----------------------------------------------------------------
4200 |    ERLQ004CV3(value=100)   EHBH04C3V(value=101)    EHVH04S18C3V=(102)
6200 |    ERLQ006CV3(value=200)   EHBH04C3V(value=101)    EHVH04S18C3V=(102)
8200 |    ERLQ008CV3(value=300)   EHBH04C3V(value=101)    EHVH04S18C3V=(102)
11200|    ERLQ011CV3(value=400)   EHBH04C3V(value=101)    EHVH04S18C3V=(102)
14200|    ERLQ014CV3(value=500)   EHBH04C3V(value=101)    EHVH04S18C3V=(102)

Now I need corresponding buitenunit, binnenunit and boiler (and their values) depending on the alpha value.

For example, say alpha is 4200 then I need to show: "Your selected setup will be ERLQ004CV3, EHBH04C3V and EHVH04S18C3V and it will cost you (100+101+102) 303 coins.

For the moment I'm really confused how to get both value and name in way so I can easily access them.

This is what I have at the moment:

var alphas = ['4200', '6200', '8200', '11200', '14200', '17000'];
var buitenunit = ['ERLQ004CV3', 'ERLQ006CV3', 'ERLQ008CV3', 'ERLQ011CV3', 'ERLQ014CV3', 'ERLQ016CV3'];
var binnenunit = ['EHBH04C3V', 'EHBH08C3V', 'EHBH08C3V', 'EHBH16C3V', 'EHBH16C3V', 'EHBH16C3V'];
var boiler = ['EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3'];
var grid = {};

    for(var i = 0; i < alphas.length; i++){
        var alpha = alphas[i];
        if(alpha in grid == false){
            grid[alpha] = {};
        }

        var buitenunit = buitenunitlinksboven[i];
        grid[alpha][buitenunit] = i;
        var binnenunit = binnenunitlinksboven[i];
        grid[alpha][binnenunit] = i;
        var boiler = boilerlinksboven[i];
        grid[alpha][boiler] = i;
    }

But now the only way to access the value is if I already know the name of a unit. And the name is dependant on the alpha value.

So my question is: How would I store this kind of information in a way that it is easy accessible. Am I currently on the right track? I just thought of JSON, can JSON help me perhaps?

Amazing thanks to anybody taking the time to actually read this.

Greetings

Answer 1

What about this?

First - build a map of names to values. This assumes the name and value are always a pair and you can look up one from the other.

// first build a map of names to their value
var valueLookupTable = {
  ERLQ004CV3:100,
  ERLQ006CV3:200,
  ERLQ008CV3:300,
  ERLQ011CV3:400,
  ERLQ014CV3:500,
  EHBH04C3V:101,
  EHVH04S18C3V:102
};

Then your grid builder could look more like this

var alphas = ['4200', '6200', '8200', '11200', '14200', '17000'];
var buitenunit = ['ERLQ004CV3', 'ERLQ006CV3', 'ERLQ008CV3', 'ERLQ011CV3', 'ERLQ014CV3', 'ERLQ016CV3'];
var binnenunit = ['EHBH04C3V', 'EHBH08C3V', 'EHBH08C3V', 'EHBH16C3V', 'EHBH16C3V', 'EHBH16C3V'];
var boiler = ['EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3'];

var grid = {};

var nn = alphas.length;
var ii = 0;
 for(; ii < nn; ++ii) {
  var alpha = alphas[ii]
  var entry = { 
    buitenunit : buitenunit[ii],
    binnenunit : binnenunit[ii],
    boiler : boiler[ii]
  }
  /** compute value for that entry by looking up values in the lookup table */
  var val = 0;
  for(var key in entry) {
    val += (valueLookupTable[entry[key]] || 0)
  }
  entry.value = val;
  grid[alpha] = entry;
}

Now when you do

grid[4200]

you get

{ buitenunit: "ERLQ004CV3", 
  binnenunit: "EHBH04C3V", 
  boiler: "EKHWS200B3V3", 
  value: 201}

where value is the sum of all the items.

If you needed individual values, you can look them up using the item by doing something like

var entry = grid[4200]
var binnenunitValue = valueLookupTable[entry.binnenunit];

Does this address the issue?

Note: I ran this and got the math to work out for me, but it looks like the valueLookupTable is missing some data. I suspect your table in the example is not quite complete as I noticed that all the boiler records were the same. But in your grid builder code, there is clearly a longer array of values. No matter. If the valueLookupTable has all of them, the rest should work out just fine. It just means you'll need to flesh out that table with the correct values.

Update

If the unit arrays have corresponding value arrays, you could use the following to build the valueLookupTable based on the arrays with something like this:

// if you're using underscore.js or jQuery you could use their `extend` method
var hashMerge = function(dest, src) {
  for (var property in src) {
    if (src.hasOwnProperty(property)) {
       dest[property] = src[property];
    }
  }
  return dest;
};
var buildHash = function(keys,values) {
  var result = {};
  var nn = keys.length;
  var ii = 0;
  for (; ii < nn; ++ii) {
     result[keys[ii]]=values[ii];
  }
  return result;
};

var alphas = ['4200', '6200', '8200', '11200', '14200', '17000'];
var buitenUnits = ['ERLQ004CV3', 'ERLQ006CV3', 'ERLQ008CV3', 'ERLQ011CV3', 'ERLQ014CV3', 'ERLQ016CV3'];
var buitenValues = [ 100, 200, 300, 400, 500, 600 ];
var binnenUnits = ['EHBH04C3V', 'EHBH08C3V', 'EHBH08C3V', 'EHBH16C3V', 'EHBH16C3V', 'EHBH16C3V'];
var binnenValues = [ 101, 201, 301, 401, 501, 601 ];
var boilerUnits = ['EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3', 'EKHWS200B3V3']
var boilerValues = [ 102, 202, 302, 402, 502, 602 ];

var buittens = buildHash(buitenUnits, buitenValues);
var binnens = buildHash(binnenUnits, binnenValues);
var boilers = buildHash(boilerUnits, boilerValues);

var valueLookupTable = hashMerge( buittens, hashMerge(binnens, boilers));

The rest should be the same.