Search code examples
javascriptreactjsobjectjavascript-objects

Object.keys.map only return the nth values and exclude the rest

I have an object tooltip 

var showTooltip = Object.keys(tooltip).map(function(e) {
  console.log(tooltip[e])
  <div className="tooltip bold" style={{left: x, top: y, padding: '5px', fontSize: '12px'}}>{tooltip[e].Company}</div>
});

What is currently returning

<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;">Company X, LLC</div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>
<div class="tooltip bold" style="left: 529px; top: 394px; padding: 5px; font-size: 12px;"></div>

It is returning 6 <div>'s (1,2,4,5,6 I do not need to use); how do I only return the 3rd <div> that has the Company name data, or remove the ones with empty innerHTML?

Solution

  • filter them out first:

    var showTooltip = Object.keys(tooltip).filter(k => !!tooltip[k].Company).map(function(e) {
    console.log(tooltip[e])
    <div className="tooltip bold" style={{left: x, top: y, padding: '5px', fontSize: '12px'}}>{tooltip[e].Company}</div>
});