JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"></div>

CSS

#log p {
    margin: 6px;
    border-bottom: 1px dotted #eee;
}

JavaScript

// data
var chars = ['A', 'B', 'C', 'A', 'C'];
var data = [{
    'item': 'A',
    'rank': '1'
}, {
    'item': 'B',
    'rank': '2'
}, {
    'item': 'C',
    'rank': '3'
}];

// definition
function eachChar(onMatch, onMismatch) {
    for (c in chars) {
        for (i in data) {
            if (data[i].item === chars[c]) {
                typeof onMatch === 'function' && onMatch(); 
            } else {
                typeof onMismatch === 'function' && onMismatch(); 
            }
        }
    }
}

// usage examples
eachChar(function() {
    log('> 1 > matched!', 'red');
});
log('- - - - - - - - - - - - - - - - - - - - - - - - - ', 'green');
eachChar(function() {
    log('> 2 > matched!', 'red');
}, function() {
    log('> 2 > didn\'t match...');
});


// util
function log(msg, color) {
    var p = document.createElement('p');
    p.textContent = msg;
    color && (p.style.color = color);
    document.getElementById('log').appendChild(p);
}