如何在2列Javascript / Jquery中显示对象数组？

Question

var match1 = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];

  var match2 = [
  {
  "drop":"Drop1",
  "definition": "This is the definition1"
  }, 
  {
  "drop":"Drop2",
  "definition": "This is the definition2"
  },
  {
  "drop":"Drop3",
  "definition": "This is the definition3"
  },
  {
  "drop":"Drop4",
  "definition": "This is the definition4"
  },
  {
  "drop":"Drop5",
  "definition": "This is the definition5"
  },
  {
  "drop":"Drop6",
  "definition": "This is the definition6"
  },
  {
  "drop":"Drop7",
  "definition": "This is the definition7"
  },
  {
  "drop":"Drop8",
  "definition": "This is the definition8"
  },
  {
  "drop":"Drop9",
  "definition": "This is the definition9"
  },
  {
  "drop":"Drop10",
  "definition": "This is the definition10"
  },
   ];

如何在2个不同的列中显示Object数组？谢谢。

https://jsfiddle.net/eqf3tcx2/16/

Answer 1

您错过了一个专栏。要从对象获取属性，请使用match2[i].drop和match2[i].definition。

逐步查看建议的解决方案：

• 添加列。

  • 此：

    <div id="column" class="definition">
      <h3>Definition</h3>
    </div>
    

  • 应该成为：

    <div id="column" class="definition">
      <h3>Definition</h3>
      <br>              
      <ul id="defs"></ul>
    </div>
    

• 创建一个数组来保存新列的值，将.data属性添加到第二列，将.description属性添加到第三个新创建的列。

  • 此：

    var arrMatch2 = [];
    
    for (var i = 0; i < match2.length; i++) {
      arrMatch2.push('<li data-index="' + (i + 1) + '">' + match2[i] + '</li>');
    }
    

  • 应该成为：

    var arrMatch2 = [];
    for (var i = 0; i < match2.length; i++) {
      arrMatch2.push('<li data-index="' + (i + 1) + '">' + match2[i].drop + '</li>');
    }
    
    var arrMatch3 = [];
    for (var i = 0; i < match2.length; i++) {
      arrMatch3.push('<li data-index="' + (i + 1) + '">' + match2[i].definition + '</li>');
    }
    

• 最后，将数组洗牌并将其添加到列中。

  • 此：

    var arrMatch2 = [];
    //shuffle the arrays
    arrMatch1 = shuffle(arrMatch1);
    arrMatch2 = shuffle(arrMatch2);
    
    //insert them into DOM
    $('#source').html(arrMatch1.join(''));
    $('#target').html(arrMatch2.join(''));
    

  • 应该成为：

    //shuffle the arrays
    arrMatch1 = shuffle(arrMatch1);
    arrMatch2 = shuffle(arrMatch2);
    arrMatch3 = shuffle(arrMatch2);
    
    //insert them into DOM
    $('#source').html(arrMatch1.join(''));
    $('#target').html(arrMatch2.join(''));
    $('#defs').html(arrMatch3.join(''));
    

Suggested JSFiddle here

将drop / definition列混合在一起

最简单的解决方案是在生成两个产品数组（match2和arrMatch2）之前对arrMatch3源数组进行洗牌，而不是生成两个产品数组并将它们混洗：

var arrMatch1 = [];
for (var i = 0; i < match1.length; i++) {
  arrMatch1.push('<li data-index="' + (i + 1) + '">' + match1[i] + '</li>');
}
//shuffle the arrays
arrMatch1 = shuffle(arrMatch1);
//insert them into DOM
$('#source').html(arrMatch1.join(''));

// clone and shuffle the array
var match2Clone = $.map(match2, function (m, i) { return {drop: m.drop, definition: m.definition, id: i}; });
var shuffledMatch2 = shuffle(match2Clone);
var arrMatch2 = [], arrMatch3 = [];
for (var ism = 0; ism < shuffledMatch2.length; ism++) {
  var m = shuffledMatch2[ism];
  arrMatch2.push('<li data-index="' + (m.id + 1) + '">' + m.drop + '</li>');
  arrMatch3.push('<li data-index="' + (m.id + 1) + '">' + m.definition + '</li>');
}
//insert them into DOM
$('#target').html(arrMatch2.join(''));
$('#defs').html(arrMatch3.join(''));

Updated Demo JSFiddle