嵌套Dom重复不显示嵌套数组值

Question

我有Div与Dom重复值一起显示，并且传递给dom重复的数组是一个多维数组，如果我使用Item.title访问，则无法获得项目值，但是如果我给出，它可以访问该值item.0.title，但仅获取第0个索引值，而不循环遍历整个数组。

JSON结构

{
"tables": {
    "mainColums": [
        {
            "valueText": [
                {
                    "state": "inputText",
                    "value": "M5N,M6N"
                }
            ],
            "title": "adj_wells"
        },
        {
            "valueText": [
                {
                    "state": "inputText",
                    "value": "Mark Andreas"
                }
            ],
            "title": "prod_engineer"
        },
        {
            "valueText": [
                {
                    "state": "inputText",
                    "value": "SAGD"
                }
            ],
            "title": "well_type"
        },
        {
            "valueText": [
                {
                    "state": "inputText",
                    "value": "eMSAGP"
                }
            ],
            "title": "well_mode"
        }
    ],
    "titleColumns": "Well Info"
},

Dom Repeat Block：

 <template id="table" is="dom-repeat" items="{{datawell}}">

  <template is="dom-if" if="{{valueIsRightAlign(item.layout)}}">
    <div class="div-table" id="panels" on-tap='showChildPanel' style="border-bottom:4px solid #393e44" >
      <div class="tr">
        <div class="tc tc4"><img src="../adaptix-icons/well-view-right-nav.png" class="imageStyle" style="{{item.arrowCSS}}"></div>
        <template id="dynamic columns" is="dom-repeat" items="{{item.titleColumns}}">
          <template is="dom-if" if="{{valueIsFirst(index)}}">
            <div class="tc tc1" style=" display: block; margin-left: 15px; text-align: left; font-weight: 500; ">{{item}}</div>
          </template>
          <template is="dom-if" if="{{!valueIsFirst(index)}}">
            <div class="tc tc1">{{item}}</div>
          </template>
        </template>
      </div>
    </div>

    <template is="dom-if" if="{{item.isToggled}}">
      <div class="div-sub-table" id="sub-panels">
        <template id="dynamic columns" is="dom-repeat" items="{{item.maincolumn}}" >
          <div class="tr1 horizontal layout" style="position: relative;">
            <div class="tc tc4"></div>
            <template id="checkValues" is="dom-if" if="[[getActualTitle(item.0.title)]]">
            <div class="tc tc1" style="text-align: left; font-weight: 500;">&emsp;&emsp;&emsp;&emsp;{{item.0.title}}</div>
              </template>
            <template id="checkValues" is="dom-if" if="[[valueIsBlank(item.0.valueText.0.state)]]">
              <div class="tc tc1" style="display: block; position: absolute; right: 50px; text-align: right;">{{item.0.valueText.0.value}}</div>
            </template>
            <template id="checkValues" is="dom-if" if="[[valueIsReadonly(item.0.valueText.0.state)]]">
              <div class="tc tc1" style="display: block; position: absolute; right: 50px; text-align: right;">{{item.0.valueText.0.value}}</div>
            </template>
            <template id="checkValues" is="dom-if" if="[[valueIsInput(item.0.valueText.0.state)]]">
              <div class="tc tc1" style="display: block; position: absolute; right: 50px; text-align: right;"><input  type="text"  class="inputForm" value={{item.0.valueText.0.value}} style="background: #525962; border:none; color:white; width:50%; text-align:center; font-size:10px" ></div>
            </template>

          </div>
        </template>
      </div>
    </template>
  </template></template>




**Json Formating:**

getWellSetupData:function(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
try{
  var data = JSON.parse(xhttp.response);
   var testdata=data[0]["tables"];
  var wellInfo=[];
  var injectionParameter=[]
  var productionParameter=[]
  var  artificialLift=[]
  var alarmOverview=[]
  for(var i=0;i<testdata.length;i++){
    if(testdata[i]["titleColumns"]==="Well Info"){
    var wellInfo=testdata[i]["mainColums"];
    var wellMaintitle=testdata[i]["titleColumns"]
    }
    if(testdata[i]["titleColumns"]==="Injection Parameters"){
    var injectionParameter=testdata[i]["mainColums"];
    var injectionParameterTitle=testdata[i]["titleColumns"]
    }

  }


  var wellTable=[];
  wellTable.push({"isToggled": true,
        "layout": "rightAlign",
        "arrowCSS": "transform: rotate(90deg);",
        "titleColumns":[wellMaintitle],
        "maincolumn":[wellInfo]});

  wellTable.push({"isToggled": true,
  "arrowCSS": "transform: rotate(90deg);",
  "titleColumns":[injectionParameterTitle],
  "maincolumn":[injectionParameter]});



  console.log(wellTable);
    this.datawell=wellTable;
      console.log(data);

    }catch (e) {
      console.log("Streaming... (Or an error occurred)");
      console.log(e);
    }
  }.bind(this);