Как вернуть новый массив с динамически заполненными свойствами?

Question

Так что мой звонок возвращает что-то вроде:

data:
        {
          nameData: 'Test33333',
          emailData: email@email.com,
          urlLink: link.com
          additionalDetails: [
               {
                 field: 'email',
                 value: 'other@email.com'
                },
                {
                 field: 'name', 
                 value: 'name1223'
                }
            ]
         } 

Теперь я хочу создать функцию, которая будет принимать переданный параметр (данные) и создавать массив объектов, который должен выглядеть следующим образом. Это должно быть сделано более универсальным способом.

Ожидаемое значение вывода массива:

fullData = [
      {
        name: 'data_name'
        value: 'Test33333'
      },
      {
        name: 'data_email',
        value: 'email@email.com'
      },
      {
        name: 'data_url',
        value: 'Link.com'
      },
      extraData: [
        //we never know which one will it return
      ]
];

Это должно быть сделано в функции с именем, например:

generateDataFromObj(data)

так

generateDataArrFromObj = (data) => {
    //logic here that will map correctly the data
}

Как этого достичь? Я не очень хорошо разбираюсь в JavaScript, спасибо.

Answer 1

Предполагая, что вы храните свои ключи свойств данных в camelCase, это будет работать для любых добавляемых вами данных, а не только для данных в примере. Здесь я использовал planetLink. Он reduce s для ключей объекта, используя исходный пустой массив), извлекает имя нового ключа из существующего ключа свойства и объединяет каждый новый объект с возвращаемым массивом.

const data = { nameData: 'Test33333', emailData: 'email@email.com', planetLink: 'Mars' };

function generateDataArrFromObj(data) {
  const regex = /([a-z]+)[A-Z]/;

  // `reduce` over the object keys
  return Object.keys(data).reduce((acc, c) => {

    // match against the lowercase part of the key value
    // and create the new key name `data_x`
    const key = `data_${c.match(regex)[1]}`;
    return acc.concat({ name: key, value: data[c] });
  }, []);
}

console.log(generateDataArrFromObj(data));

Answer 2

Просто запустите карту по ключам объекта, это вернет массив, заполненный каждым элементом, а затем в функциональной карте запустит каждый элемент, создайте объект следующим образом:

Object.keys(myObj).map(key => {return {name: key, value: myObj[key]}})