Wie Array-Struktur von Div zu erstellen, meine passende Div-ID mit Daten-ID, die ID von anderen Kind Div ist?

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>

möchte ich array structure von div erstellen, indem passende data-id (die durch Komma getrennt wird und diese data-id ist nichts anderes als id anderer child divs) zusammen mit anderen div id:

Dies ist mein 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 
}); 
} 

Erwartete O Ausgabe:

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

Siehe die Kommentare inline im Code.

// 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