Matching up two lists in Javascript

I have two lists that I want to display side-by-side on the screen so that the differences between them are clearly visible to the user. Each list would have a blank where the other list has an entry something like this:

https://s3.amazonaws.com/jwhance/lists.JPG

So I have two sorted arrays like:

var A0 = ['a', 'b', 'c', 'd', 'f'];
var B0 = ['a', 'b', 'c', 'e', 'f'];

and I want to end up with something like the following so that I can make it display as above:

var A1 = ['a', 'b', 'c', 'd', '', 'f'];
var B1 = ['a', 'b', 'c', '', 'e', 'f'];

I’m just drawing a blank on a clean way to do this.

	function xxx(){
		
		const A0 = ['a', 'b', 'c', 'd'];
		const B0 = ['b', 'd', 'e', 'f', 'g', 'q', 'r'];
		
		var completed = false;
		var i = 0;
		while(!completed){
			if(A0[i] === B0[i] || A0[i] === '' || B0[i] === ''){
				i++;
				
				if(i === Math.max(A0.length, B0.length)){
					completed = true;
				}
				
				continue;
			}
			
			if(A0[i] < B0[i] || B0[i] === undefined){
				// Add one to B
				B0.splice(i, 0, '');
			} else if(A0[i] > B0[i] || A0[i] === undefined){
				// Add one to A
				A0.splice(i, 0, '');
			}
			
			i = 0;
		}
		
		console.log(A0, B0)			
	}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.