Блог

Я думаю, моя проблема проста, но я не могу ее решить. Не могли бы вы помочь? Я должен сделать простую визуализацию данных в графической строке на основе данных массива JSON (часть массива JSON приведена ниже):

 {
      name: "R",
      year: 1956,
    },
    {
      name: "K",
      year: 1956,
    },
    {
      name: "P",
      year: 1982,
    },
    {
      name: "E",
      year: 1982,
    },
    {
      name: "S",
      year: 1992,
    }

 

Идея состоит в том, чтобы сопоставить <tr><div>{year}</div><div className="graph-bar" style={{ width: '${amount}px' * 10 }}></div><div>{amount}</div></tr> каждую строку, чтобы указать, сколько имен было дано в каждом году. Итак, я уменьшил массив JSON до объекта и вычислил количество повторяющихся лет:

Object { 1956: 7, 1982: 11, 1983: 2, 1989: 1, 1990: 2, 1991: 2, 1993: 2, 1994: 1, 1996: 1, 1998: 1, … } .

У меня есть два вопроса:

1. Могу ли я сопоставить объект, подобный приведенному выше в JSX, с формой, приведенной выше?
2. Как я могу использовать множитель (в данном случае 10) во встроенном CSS? Это не работает : style={{ width: '${amount}px' * 10 }} . Я заменил обратные ссылки внутри встроенного стиля, потому что я не мог заставить их работать здесь. Без множителя ширина обратной метки работает. Я также пробовал calc(), но он не работает.

В качестве плана B я также создал два простых массива:

years = [ 1956, 1982, 1983, 1989, 1990, 1991, 1993, 1994, 1996, 1998, … ]

amount = [ 7, 11, 2, 1, 2, 2, 2, 1, 1, 1, … ]

Если невозможно сопоставить объект, как я могу сопоставить два массива одновременно или это возможно?

С тем, что вы указали в коде, трудно точно определить, к чему вы стремитесь, но для сопоставления пар ключ-значение вы можете использовать это:

 for (const [key, value] of Object.entries(obj)) {
}
 

затем используйте значение вашего ключа по своему усмотрению.

Для номера 2:

style={{width: `${amount * 10}px`}}