CODEWITHSUNDEEP
javascriptarraysjson
Erik hoeven
Erik hoeven

Reputation: 1610

join two json arrays by comparing two keys

I wan't to join two json array's by comparing two fields in each array (like the SQL join : see the if in the code) and add the value from the second array to the first array. I try to solve this by using a nested loop and pass the value from the inner loop to the outer loop (see code). But the result is alwayś 0.

Manny thanks!!

Here is the code example:

var dmNodeGraph = [ { id: 'marathonschaatsteams',
        group: '9',
        type: 'child',
        color: '33cccc' },
      { id: 'KNSB', group: '9', type: 'child', color: '33cccc' },
      { id: 'stationshuisje',
        group: '9',
        type: 'child',
        color: '33cccc' },
      { id: 'RTV', group: '9', type: 'child', color: '33cccc' },
      { id: 'wachten', group: '5', type: 'child', color: '99cc00' },
      { id: 'smartcards', group: '9', type: 'child', color: '33cccc' } ]

 var groupByLink =  [ { key: 'stationshuisje-kpn-9', values: 1 },
      { key: 'RTV-tele2-9', values: 14 },
      { key: 'Spelen-kpn-9', values: 13 },
      { key: 'hoofdsponsor-kpn-9', values: 14 },
      { key: 'schaatsen-kpn-9', values: 13 },
      { key: 'KNSB-kpn-9', values: 17 },
      { key: 'klanten-ziggo-9', values: 3 },
      { key: 'kaarten-ziggo-9', values: 1 },
      { key: 'wachten-ziggo-9', values: 1 },
      { key: 'marathonschaatsteams-kpn-9', values: 1 },
      { key: 'wachten-tele2-9', values: 1 },
      { key: 'gebruiken-kpn-9', values: 1 },
      { key: 'wachten-kpn-9', values: 1 },
      { key: 'abonnementen-kpn-9', values: 2 },
      { key: 'wachten-Glasvezel-5', values: 1 },
      { key: 'smartcards-ziggo-9', values: 2 } ]



 $('#test').append('This is from the loop <br>')
 for (var i = 0; i < dmNodeGraph.length; i++){
       var id  = dmNodeGraph[i].id
       var group = dmNodeGraph[i].group
       var value
            //$('#test').append('<br> ------------------- id: ' + id + ' group: ' + group + '--------------------'  )
       // 4.A.1.A Loop per Node through the grouped links
       for (var gl = 0 ; gl < groupByLink.length ; gl++){
         //value = 0
         var keys = groupByLink[gl].key.split('-')
         if (keys[0] == id && keys[2] == group){
           value = groupByLink[gl].values 

           // Location A 
           //$('#test').append('<br> id: ' + id + ' group: ' + group + ' values: ' + value ) 
         }
        }
                // Location B
          dmNodeGraph[i].values = value
          $('#test').append('<br> id: ' + id + ' group: ' + group + ' values: ' + value ) 
         }

the code example is also available on in jsFidle ( https://jsfiddle.net/L67nwzs0/22/ )

Upvotes: 0

Views: 132

Answers (6)

Arshpreet Wadehra
Arshpreet Wadehra

Reputation: 1023

groupByLink.map((e)=>dmNodeGraph.push(e))
console.log(dmNodeGraph);

Upvotes: 0

Shreevardhan
Shreevardhan

Reputation: 12641

Remove redundant assignment to value

var dmNodeGraph = [
  { id: 'marathonschaatsteams', group: '9', type: 'child', color: '33cccc' },
  { id: 'KNSB', group: '9', type: 'child', color: '33cccc' },
  { id: 'stationshuisje', group: '9', type: 'child', color: '33cccc' },
  { id: 'RTV', group: '9', type: 'child', color: '33cccc' },
  { id: 'wachten', group: '5', type: 'child', color: '99cc00' },
  { id: 'smartcards', group: '9', type: 'child', color: '33cccc' }
]

var groupByLink = [
  { key: 'stationshuisje-kpn-9', values: 1 },
  { key: 'RTV-tele2-9', values: 14 },
  { key: 'Spelen-kpn-9', values: 13 },
  { key: 'hoofdsponsor-kpn-9', values: 14 },
  { key: 'schaatsen-kpn-9', values: 13 },
  { key: 'KNSB-kpn-9', values: 17 },
  { key: 'klanten-ziggo-9', values: 3 },
  { key: 'kaarten-ziggo-9', values: 1 },
  { key: 'wachten-ziggo-9', values: 1 },
  { key: 'marathonschaatsteams-kpn-9', values: 1 },
  { key: 'wachten-tele2-9', values: 1 },
  { key: 'gebruiken-kpn-9', values: 1 },
  { key: 'wachten-kpn-9', values: 1 },
  { key: 'abonnementen-kpn-9', values: 2 },
  { key: 'wachten-Glasvezel-5', values: 1 },
  { key: 'smartcards-ziggo-9', values: 2 }
]

for (var i = 0; i < dmNodeGraph.length; i++) {
  var id = dmNodeGraph[i].id
  var group = dmNodeGraph[i].group
  for (var gl = 0; gl < groupByLink.length; gl++) {
    var keys = groupByLink[gl].key.split('-')
    if (keys[0] == id && keys[2] == group) {
      var value = groupByLink[gl].values
      console.log(id + ', ' + group + ', ' + value)
    }
  }
}

Upvotes: 0

Mouradif
Mouradif

Reputation: 2704

Here is a working version of your jsfiddle. I simply took out the value variable and directly used dmNodeGraph[i].values = groupByLink[gl].values inside the inner loop.

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

remove assignment value=0.//overriding the value. 

var dmNodeGraph = [ { id: 'marathonschaatsteams',
    group: '9',
    type: 'child',
    color: '33cccc' },
  { id: 'KNSB', group: '9', type: 'child', color: '33cccc' },
  { id: 'stationshuisje',
    group: '9',
    type: 'child',
    color: '33cccc' },
  { id: 'RTV', group: '9', type: 'child', color: '33cccc' },
  { id: 'wachten', group: '5', type: 'child', color: '99cc00' },
  { id: 'smartcards', group: '9', type: 'child', color: '33cccc' } ]

var groupByLink =  [ { key: 'stationshuisje-kpn-9', values: 1 },
  { key: 'RTV-tele2-9', values: 14 },
  { key: 'Spelen-kpn-9', values: 13 },
  { key: 'hoofdsponsor-kpn-9', values: 14 },
  { key: 'schaatsen-kpn-9', values: 13 },
  { key: 'KNSB-kpn-9', values: 17 },
  { key: 'klanten-ziggo-9', values: 3 },
  { key: 'kaarten-ziggo-9', values: 1 },
  { key: 'wachten-ziggo-9', values: 1 },
  { key: 'marathonschaatsteams-kpn-9', values: 1 },
  { key: 'wachten-tele2-9', values: 1 },
  { key: 'gebruiken-kpn-9', values: 1 },
  { key: 'wachten-kpn-9', values: 1 },
  { key: 'abonnementen-kpn-9', values: 2 },
  { key: 'wachten-Glasvezel-5', values: 1 },
  { key: 'smartcards-ziggo-9', values: 2 } ]



$('#test').append('This is from the loop <br>')
for (var i = 0; i < dmNodeGraph.length; i++){
   var id  = dmNodeGraph[i].id
   var group = dmNodeGraph[i].group
   var value=0;//declare here
		//$('#test').append('<br> ------------------- id: ' + id + ' group: ' + group + '--------------------'  )
   // 4.A.1.A Loop per Node through the grouped links
   for (var gl = 0 ; gl < groupByLink.length ; gl++){
     var keys = groupByLink[gl].key.split('-');
     if (keys[0] == id && keys[2] == group){
       value = groupByLink[gl].values 
     
       // Location A 
       //$('#test').append('<br> id: ' + id + ' group: ' + group + ' values: ' + value ) 
     }
		}
				// Location B
      dmNodeGraph[i].values = value
      $('#test').append('<br> id: ' + id + ' group: ' + group + ' values: ' + value );
	 }
 
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test'>

</div>

Upvotes: 1

A.T.
A.T.

Reputation: 26312

you are initializing value to 0 with each iteration and last aggregation is lost

var dmNodeGraph = [ { id: 'marathonschaatsteams',
        group: '9',
        type: 'child',
        color: '33cccc' },
      { id: 'KNSB', group: '9', type: 'child', color: '33cccc' },
      { id: 'stationshuisje',
        group: '9',
        type: 'child',
        color: '33cccc' },
      { id: 'RTV', group: '9', type: 'child', color: '33cccc' },
      { id: 'wachten', group: '5', type: 'child', color: '99cc00' },
      { id: 'smartcards', group: '9', type: 'child', color: '33cccc' } ]
 
 var groupByLink =  [ { key: 'stationshuisje-kpn-9', values: 1 },
      { key: 'RTV-tele2-9', values: 14 },
      { key: 'Spelen-kpn-9', values: 13 },
      { key: 'hoofdsponsor-kpn-9', values: 14 },
      { key: 'schaatsen-kpn-9', values: 13 },
      { key: 'KNSB-kpn-9', values: 17 },
      { key: 'klanten-ziggo-9', values: 3 },
      { key: 'kaarten-ziggo-9', values: 1 },
      { key: 'wachten-ziggo-9', values: 1 },
      { key: 'marathonschaatsteams-kpn-9', values: 1 },
      { key: 'wachten-tele2-9', values: 1 },
      { key: 'gebruiken-kpn-9', values: 1 },
      { key: 'wachten-kpn-9', values: 1 },
      { key: 'abonnementen-kpn-9', values: 2 },
      { key: 'wachten-Glasvezel-5', values: 1 },
      { key: 'smartcards-ziggo-9', values: 2 } ]
 
 
 
 $('#test').append('This is from the loop <br>')
 for (var i = 0; i < dmNodeGraph.length; i++){
       var id  = dmNodeGraph[i].id
       var group = dmNodeGraph[i].group
       var value=0; // initiallize with 0 for ever new iteration
       for (var gl = 0 ; gl < groupByLink.length ; gl++){
         // value = 0 <-------- remove this one
         var keys = groupByLink[gl].key.split('-')
         if (keys[0] == id && keys[2] == group){
           value += groupByLink[gl].values 
         }
   		}
          dmNodeGraph[i].values = value
          $('#test').append('<br> id: ' + id + ' group: ' + group + ' values: ' + value ) 
		 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test'>

</div>

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

If you dont want to use a third variable try this

dmNodeGraph.push.apply( dmNodeGraph, groupByLink );



console.log(dmNodeGraph) // contains both dmNodeGraph and groupByLink

Upvotes: 0

Related Questions