Object.keys.map возвращает только n-е значения и исключает остальные - PullRequest
Новая
       3

Object.keys.map возвращает только n-е значения и исключает остальные

0 голосов
/ 09 января 2020

У меня есть объект 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>
});

Что в настоящее время возвращает 

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

Это возвращает 6 <div> 's (1,2,4,5, 6 мне не нужно использовать); как мне вернуть только 3-й <div>, в котором есть данные названия компании, или удалить те, у которых пустое внутреннее HTML?

Ответы [ 3 ]

2 голосов
/ 09 января 2020

filter их сначала: 

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>
});
1 голос
/ 09 января 2020

Возврат null для товаров без компании: 

class Demo extends React.Component {
  render() {
    var tooltip = this.props.tooltip;
    
    var showTooltip = Object.keys(tooltip).map(function(e) {
      var company = tooltip[e].Company;

      return company ? (
        <div key={e} className="tooltip bold" style={{left: 0, top: 0, padding: '5px', fontSize: '12px'}}>{company}</div>
      ) : null;
    });
    
    return (
      <div>
        {showTooltip}
      </div>
    );
  }
}

var tooltip = { a: { Company: 'a' }, b: {}, c: { Company: 'c' }};

ReactDOM.render(
  <Demo tooltip={tooltip} />,
  root
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
0 голосов
/ 09 января 2020

Object.keys (подсказка) возвращает Массив ключей в данном объекте. Вот почему все функции массива могут использоваться здесь.

map () создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Метод filter () создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

В соответствии с вопросом, кажется, вы хотите фильтровать по названию компании. поэтому вы можете просто попробовать (может быть синтаксическая ошибка): 

var showTooltip = Object.keys(tooltip).map( e => tooltip[e].Company && 
   tooltip[e].Company !== '');

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

Ссылка:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

...