如何创建div的数组结构我的匹配div id与data-id是其他子div的id？

Question

var pushData = [];
$(function() {
  CreateArray();
});


function CreateArray() {
  //output in data:
  var data = [{
    "Id": 38,
    "Connections": [39, 40],
    "Name": "ABc"
  }, {
    "Id": 39,
    "Connections": [40],
    "Name": "pqr"
  }, {
    "Id": 40,
    "Connections": [],
    "Name": "lmn"
  }];


  $.each(data, function(index, value) {
    $(document.createElement('div')).addClass("latestblock")
      .html(value.Name)
      .attr('id', value.Id)
      .attr('data-id', value.Connections)
      .appendTo($("#container"));
  });

  //Above loops generates this:
  //<div id="38" class="latestblock" data-id="39,40">ABc</div>
  //<div id="39" class="latestblock" data-id="40">pqr</div>
  //<div id="40" class="latestblock" data-id="">lmn</div>

  //Here data-id:39,40 indicated that div 39 and div 40 are connected to div 38 and so i want to create my array
  //like this:

  //Expected Output:
  //  pushData[0]:
  //   from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
  //   To:   <div id="39" class="latestblock" data-id="40">pqr</div>

  //  pushData[1]:
  //    from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
  //   To:   <div id="40" class="latestblock" data-id="">lmn</div>

  //  pushData[2]:
  //   from:  <div id="39" class="latestblock" data-id="40">pqr</div>
  // To:   <div id="40" class="latestblock" data-id="">lmn</div>


  //$('#container').find('div').each(function () {
  //    var Id = $(this).attr('id');
  //    var connections = $(this).attr('data-id').split(',');
  //    for (var i = 0; i < connections.length; i++) {
  //       pushData.push({
  //            from: userId,
  //            to: connections[i]
  //        });
  //    }
  //    console.log(pushData)
  //});

  //With above code i am getting output like this:
  // pushData[0]:
  // from:38
  // To:39
  // pushData[0]:
  // from:38
  // To:40

}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="container">
  ertertert
</div>

我想通过匹配array structure创建data-id div（这是逗号分隔，而data-id只是其他child divs的ID 以及其他div id：

这是我的div：

<div id="container">
 </div>

var pushData = [];
function CreateArray(){
 $.getJSON('My Wcf service Url', function (data) {

          //output in data:
          var data=[
           {
              "Id": 38,
               Connections":[39,40],
                   "Name":"ABc"
          },
           {
              "Id": 39,
               Connections":[40],
               "Name":"pqr"
           },
           {
               "Id": 40,
                Connections":[],
               "Name":"lmn"
           }]


               $.each(data, function (index, value) {
                    $(document.createElement('div')).addClass("latestblock")
                    .html(value.Name)
                    .attr('id', value.Id)
                    .attr('data-id', value.Connections)
                    .appendTo($("#container"));
                });

               //Above loops generates this:
                  //<div id="38" class="latestblock" data-id="39,40">ABc</div>
                  //<div id="39" class="latestblock" data-id="40">pqr</div>
                  //<div id="40" class="latestblock" data-id="">lmn</div>

                 //Here data-id:39,40 indicated that div 39 and div 40 are connected to div 38 and so i want to create my array
                 //like this:

                 Expected Output:
                 pushData[0]:
                             from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
                              To:   <div id="39" class="latestblock" data-id="40">pqr</div>

                 pushData[1]:
                             from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
                             To:   <div id="40" class="latestblock" data-id="">lmn</div>

                 pushData[2]:
                             from:  <div id="39" class="latestblock" data-id="40">pqr</div>
                              To:   <div id="40" class="latestblock" data-id="">lmn</div>


        //$('#container').find('div').each(function () {
        //    var Id = $(this).attr('id');
        //    var connections = $(this).attr('data-id').split(',');
        //    for (var i = 0; i < connections.length; i++) {
        //       pushData.push({
        //            from: userId,
        //            to: connections[i]
        //        });
        //    }
        //    console.log(pushData)
        //});

        //With above code i am getting output like this:
        pushData[0]:
                   from:38
                   To:39
        pushData[0]:
                   from:38
                   To:40
 });
}

预期输出：

 pushData[0]:
                         from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
                              To:   <div id="39" class="latestblock" data-id="40">pqr</div>

                pushData[1]:
                            from:  <div id="38" class="latestblock" data-id="39,40">ABc</div>
                             To:   <div id="40" class="latestblock" data-id="">lmn</div>

                pushData[2]:
                             from:  <div id="39" class="latestblock" data-id="40">pqr</div>
                              To:   <div id="40" class="latestblock" data-id="">lmn</div>

Answer 1

请参阅代码中的内联注释。

// The resulting array
var result = [];

// Iterate over all the objects in array
data.forEach(function (obj) {
    // Create the `from` object
    var from = $('<div id="' + obj.Id + '" class="latestblock" data-id="' + obj.Connections + '">' + obj.Name + '</div>');

    // Iterate over all connections of this item
    obj.Connections.forEach(function (id) {
        // Get the corr. data from the main array
        var connectionObj = data.find(obj => obj.Id === id),
            to = $('<div id="' + id + '" class="latestblock" data-id="' + connectionObj.Connections + '">' + connectionObj.Name + '</div>');

        // Add the object in the result array
        result.push({from, to});
    });
});

console.log(result);

Demo on JSFiddle