Js data manipulation problem

problem description

the user selects three arrays as follows 

let colorOptions = ["",""]
let sizeOptions = [36,37,38,39,40,41]
let otherSizeOptions = ["A","B","C","D"]

I want the following results

now this problem has not been solved. I hope the big guys can help me solve it. Thank you very much. If there is a better way to solve the problem, my data operation is very weak, and I have been learning. Thank you

Javascript
May.22,2021
Is

using vue? If you are using vue, then consider using computed, to calculate the displayed array based on the three selection results, and then check the main dimensions of 36 hr class= 37 answer 38, and then use the set function of computed to set sizeOptions

< hr class= "array" >

use vue to write a demo, that can run. Adjust the style by yourself 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="container">
  <table>
    <tr>
      <td v-for="name in keysNames">{{name}}</td>
      <td v-for="prop in props">{{prop}}</td>
    </tr>
    <tr v-for="(item, itemIndex) in list" :key="itemIndex">
      <td v-for="key in keys">{{item[key]}}</td>
      <td v-for="(prop, propIndex) in item.props" :key="propIndex" @click="toggleItem(itemIndex, propIndex)">{{prop}}</td>
    </tr>
  </table>
</div>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script type="text/javascript">
  var app = new Vue({
    el:"-sharpcontainer",
    data:{
      keys: [],
      props: [],
      list: [],
      keysNames: []
    },
    created() {
      this.foo(['',''],[36,37,38,39,40,41],['A','B','C','D'])
    },
    methods:{
      foo: function(colorOptions, sizeOptions, otherSizeOptions){
        let keys = ['order']
        let keysNames = ['']
        let list = []
        let hasOtherSize = false
        let order = 1
        if(colorOptions == null || colorOptions.length === 0){
          console.error('colorOptions is empty')
          return
        }

        if(sizeOptions == null || sizeOptions.length === 0){
          console.error('otherSizeOptions is empty')
          return
        }
        this.props = sizeOptions;

        keys.push('color')
        keysNames.push('')
        
        if(otherSizeOptions != null && otherSizeOptions.length > 0){
          hasOtherSize = true
          keys.push('otherSize')
          keysNames.push('')
        }

        colorOptions.forEach(color => {
          console.log('1111')
          if(hasOtherSize){
            otherSizeOptions.forEach(otherSize => {
              let obj = {}
              obj.color = color
              obj.otherSize = otherSize
              obj.props = new Array(sizeOptions.length).fill(true)
              obj.order = order
              order PP
              list.push(obj)
            })
          } else {
            let obj = {}
            obj.color = color
            obj.props = new Array(sizeOptions.length).fill(true)
            obj.order = order
            order PP
            list.push(obj)
          }
        })

        console.log(list)
        this.keys = keys;
        this.keysNames = keysNames
        this.list = list
      },
      toggleItem(itemIndex, propIndex){
        let list = this.list
        list[itemIndex].props[propIndex] = !list[itemIndex].props[propIndex] 
        this.$set(this.list[itemIndex].props, list[itemIndex].props,true )
      }
    }
  })
  </script>
</body>
</html>

Thank you for inviting me. I took some time to write a demo, that I hope is the effect you want. https://jsfiddle.net/fd1ovqp2.

Previous: Why doesn't popwindow display content when recyclerview is nested?

Next: How does js get the user's current province name?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu