Можно ли строку перевести в объект?

Question

[Shakhrom Mukumov]

Добрый вечер. В этом деле я дилетант, поэтому возможно вопрос сформулирован не верно.

Есть форма, в форме на выбор 4 варианта ввода (email; viber; whatsapp; telegram) информации, я не стал плодить input(ы) для каждого типа ввода, а использовал один, чтобы при выборе менялись атрибуты, а значения атрибутов берутся из созданного мною (вложенного) объекта.

Вот сами объекты:

var text = {
	email:{
		name: "Eail:",
		label: "Контактный e-mail:",
		placeholder: "[e-mail]",
		type: "email"
	},
	viber:{
		name: "Vber:",
		label: "Введите номер Viber:",
		placeholder: "Введите телефон",
		type: "tel"
	},
	whatsapp:{
		name: "Watsapp:",
		label: "Введите номер WhatsApp:",
		placeholder: "Введите телефон",
		type: "tel"
	},
	telegram:{
		name: "Telegram:",
		label: "Введите номер или логин Telegram:",
		placeholder: "Введите логин",
		type: "text"
	}
};

На пункты выбора типа ввода я повесил дата-атрибуты со значениями. Эти значения атрибутов схожи с объектами.

Сложность заключается в том, что когда я кликаю на тип ввода, то получаю данные атрибута как строку, как конвертировать строку в (НЕ-СТРОКУ), чтобы я мог использовать это значение при замене информации, брать данные из объекта.

Пример на CODEPEN

Просьба сильно не ругаться, я только учусь. Возможно я делаю то что невозможное, если так, дайте знать.

Заранее спасибо.

p.s. Сейчас сделал через КОСТЫЛЬ, хотя идея была изначально сделать используя минимум кода.

Answer 1

[0xD34F]

$('.tab__list').on('click', '.tab__item', function() {
  const
    $this = $(this),
    { label, ...attrs } = text[$this.data('tab')];

  $this.siblings().removeClass('tab__item--active');
  $this.addClass('tab__item--active');
  $('#formField').attr(attrs);
  $('#formLabel').text(label);
});

Comments

[Shakhrom Mukumov]

Спасибо огромное. То что нужно :)

[Shakhrom Mukumov]

Подскажите пожалуйста где можно почитать про данную строку, их значения и т.д. и т.п.

{ label, ...attrs } = text[$this.data('tab')];

Из кода понятно всё, кроме фрагмента, который выделил. Спасибо еще раз.

[0xD34F]

Shakhrom Mukumov, rest in object destructuring.

Ну и про деструктуризацию в целом.

[Shakhrom Mukumov]

0xD34F, Спасибо

[Dima Polos]

Shakhrom Mukumov, только добавлю, что такой синтаксис не везде поддерживается, поэтому для продакшена надо бабель.

[Shakhrom Mukumov]

Dima Polos, Спасибо, учту.

Answer 2

[coderisimo]

JSON.parse(text[, reviver]); ?

Answer 3

[Shakhrom Mukumov]

Идея изначально была такая:

$(el).click(fucntion()){
  var $data = $(this).attr("data"); // получаю строку
 $(input).attr({
  "name" :  text.$data.name,
  "label" :  text.$data.label
})
}