JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

JavaScript

var response = {
  "options": [{
      "option_id": 1,
      "option_name": "icing 1",
      "seq": "1"
    },

    {
      "option_id": 2,
      "option_name": "icing 2",
      "seq": "2"
    }, {
      "option_id": 15,
      "option_name": "wrap color",
      "seq": "3"
    }, {
      "option_id": 16,
      "option_name": "wrap color",
      "seq": "4"
    },

    {
      "option_id": 3,
      "option_name": "independent 1",
      "seq": "5"
    },

    {
      "option_id": 4,
      "option_name": "floral",
      "seq": "6"
    }
  ],

  "option_groups": {
    // if we generate this lookup table then group.options: [] is not needed
    "option_to_group_map": {
      "1": "1",
      "2": "1",
      "4": "2",
      "15": "3",
      "16": "3"
    },
    "groups": {
      "1": {
        "id": "1",
        "name": "Icing Group",
        // since we have "options" populated we can pre generate option_to_group_map using generate_option_to_group_lookup_map()
        "options": ["1", "2"]
      },
      "2": {
        "id": "2",
        "name": "Floral Group",
        "options": ["4"]
      },
      "3": {
        "id": "3",
        "name": "Wrapping Group",
        "options": ["15", "16"]
      }
    }
  }
};



/**
 * Generate a lookup table from option_id to group_id
 * @param groups 
 */
function generate_option_to_group_lookup_map(groups) {
  var lookup = {};
  _.forEach(groups, function(group) {
    _.forEach(group.options, function(option) {
      lookup[option] = group.id;
      console.log(group.id, option);
    })
  });
  return lookup;
}

var option_to_group_lookup_map = generate_option_to_group_lookup_map(response.option_groups.groups);


function get_option_group(response, option_id) {
  var option_to_group_lookup = option_to_group_lookup_map;
  if (option_to_group_lookup.hasOwnProperty(option_id)) {
    var group_id = option_to_group_lookup[option_id];
    return response.option_groups.groups[group_id];
  } else {
    return null;
  }
}

function...