Изменение строкового значения в массиве, чтобы заглавные буквы каждого слова в VueJS - PullRequest
Новая
       92

Изменение строкового значения в массиве, чтобы заглавные буквы каждого слова в VueJS

1 голос
/ 13 апреля 2020

Я получаю массив объектов из вызова API: 

"data": [
  {
    "heading_one_of_the_table": 14,
     "total": 8
  },
  {
    "heading_one_of_the_table": 1,
    "total": 7
  },
  {
    "heading_one_of_the_table": 6,
    "total": 7
  }
]

, и я хотел бы создать новый массив, который будет выглядеть следующим образом: 

heards:[
  {
    text: 'Heading One Of The Table',
    value: 'heading_one_of_the_table'
  },
  {
    text: 'Total',
    value: 'total'
  }
]

I'm пытаясь заставить код обрабатывать, если заголовки больше, чем просто два элемента, поэтому, если я получил ответ с тремя объектными элементами в каждом значении массива, код может создать три заголовка. например: 

 "data": [
      {
        "heading_one_of_the_table": 14,
        "heading_two_of_the_table": 8,
         "total": 8
      },
      {
        "heading_one_of_the_table": 1,
        "heading_two_of_the_table": 8,
        "total": 7
      },
      {
        "heading_one_of_the_table": 6,
        "heading_two_of_the_table": 8,
        "total": 7
      }
    ]

для массива headers изменится так: 

heards:[
  {
    text: 'Heading One Of The Table',
    value: 'heading_one_of_the_table'
  },
  {
    text: 'Heading Two Of The Table',
    value: 'heading_two_of_the_table'
  },
  {
    text: 'Total',
    value: 'total'
  }
]

Я попытался использовать splice на "_", а затем toString().toUppderCase но это не сработало. Любые идеи приветствуются!

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Предполагая, что первая строка данных всегда содержит все заголовки. 

const data = [
      {
        "heading_one_of_the_table": 14,
        "heading_two_of_the_table": 8,
         "total": 8
      },
      {
        "heading_one_of_the_table": 1,
        "heading_two_of_the_table": 8,
        "total": 7
      },
      {
        "heading_one_of_the_table": 6,
        "heading_two_of_the_table": 8,
        "total": 7
      }
    ];

const headers = Object.keys(data[0]).map(value => ({
  text: value.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
  value,
}));

console.log(headers);
0 голосов
/ 13 апреля 2020

Вот функция, которая может преобразовать массив. 

const data = [
  {
    "heading_one_of_the_table": 14,
    "total": 8
  },
  {
    "heading_one_of_the_table": 1,
    "total": 7
  },
  {
    "heading_one_of_the_table": 6,
    "total": 7
  },
]

const transform = arr => {
  const res = []
  for (const datum of data) {
    let value = Object.keys(datum).find(k => k !== 'total')
    let text = value.split('_')
      .map(w => w.slice(0, 1).toUpperCase() + w.slice(1))
      .join(' ')
    res.push({ value, text })
  }
  return res
}

console.log(transform(data))

Вот скрипка .

...