Ekstrakcja zawartości tablicy do kluczy obiektu

Question

Witam.

Działam sobie w React i wpadłem na pomysł aby do stanu można było automatycznie dodawać nowe klucze i wartości do kluczy na podstawie generowanych danych z formularza. 

Na razie jestem na etapie, że na sztywno utworzyłem sobie 4 klucze w stanie. 

Pobieram sobie zdarzeniem onSubmit po e.target wartości pól formularza i jak wiadomo jest to tablica. W momencie gdy próbuję jak kolwiek dodać dane z tej tablicy do kluczy obiektu jest kicha. 

 

Jeżeli zrobię taki zapis jak poniżej i wpisze ręcznie jest ok jak na ironię losu. 

for(let key in obj){
    obj[key] = 'coś'
}

No to wtedy dziala tylko wtedy wszędzie mam identyczną wartość. 

Tylko dlaczego to nie działa po mojej myśli w przykładowym przypadku jak poniżej:

const values = [...e.target]

values.forEach(item => { 
    for(let key in obj){
        obj[key] = item.value
    }
}

Robiąc nawete pętlę for in wewnątrz forEach czy kombinując w forEache próbując dodawać w zależności od indexu jest to samo. 

 

Dlaczego mogę sobie do tego obiektu ręcznie wpisać co chcę, a z tablicy nie mogę przerzucić kolejno do każdego klucza osobno każdej wartości.

 

 

Comments

Tyl­ko dla­cze­go to nie dzia­ła po mojej my­ś­li w przyk­ła­do­wym przy­pa­d­ku

A jak jest po twojej myśli? ;) Opisz co ma być, a co jest.

W tym

values.forEach(item => { 
    for(let key in obj){
        obj[key] = item.value
    }
}

wyliczasz dla każdego pola w formularzu wszystkie klucze w obj. Jeśli ostatnim polem w formularzu jest submit, to przypisujesz ostatecznie dla wszystkich kluczy w obj jego wartość, być może równą pustemu ciągowi znaków.

---

Pobieram sobie zdarzeniem onSubmit po e.target wartości pól formularza i jak wiadomo jest to tablica.

+

const values = [...e.target]
 
values.forEach(item => { 

@nanosoft, jesteś pewien, że e.target to kolekcja elementów, a nie pojedynczy element? Targetem zdarzenia submit na formularzu jest raczej sam formularz, a nie kolekcja jego pól (kontrolek). Pola formularza powinny być dostępne pod e.target.elements.

Wg mnie, ten forEach w ogóle nie powinien działać, a nawet już na etapie rozpakowywania e.target powinien pojawić się błąd, że nie jest iterablem.

Może zacznij od sprawdzenia, czy w konsoli przeglądarki nie ma błędu?

Answer 1

Nie podałeś kodu formularza, więc dla przykładu użyłem takiego

<form>
  <input type="text" name="color1" value="red">
  <input type="text" name="color2" value="green">
  <input type="text" name="color3" value="blue">
  <input type="submit" name="submit">
</form>

 

zapisując w ten sposób

const values = [...e.target]
 
values.forEach(item => { 
    for(let key in obj){
        obj[key] = item.value
    }
}

w ostatecznym wyniku nadpisujesz wartości w obj, wartością z elementu submit (value w tym przypadku wtedy jest puste domyślnie)

const colors = { color1:'', color2:'', color3:'' };

const f = document.querySelector('form');
f.addEventListener('submit', submit);

function submit(e) {
  e.preventDefault();
  const values = [...e.target];

  console.info(values);
  
  values.forEach((item) => { 
    for (const key in colors) {
      console.log(key, item.value);
      colors[key] = item.value;
    }
  })
  
  console.info(colors);
}

 

po usunięciu submit-a

const colors = { color1:'', color2:'', color3:'' };

const f = document.querySelector('form');
f.addEventListener('submit', submit);

function submit(e) {
  e.preventDefault();
  const values = [...e.target];
  values.pop();

  console.info(values);
  
  values.forEach((item) => { 
    for (const key in colors) {
      console.log(key, item.value);
      colors[key] = item.value;
    }
  })
  
  console.info(colors);
}

 

nie chodzi Tobie czasem o ...?

const colors = {};

const f = document.querySelector('form');
f.addEventListener('submit', submit);

function submit(e) {
  e.preventDefault();
  const values = [...e.target];
  values.pop();

  console.info(values);
  
  for (const item of values) {
    console.log(item.name, item.value);
    colors[item.name] = item.value;
  }
  
  console.info(colors);
}

można też

const values = ([...e.target]).slice(0,-1);
//values.pop();

 

Answer 2

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

zawsze mozesz wyjsc z pętli - lepsza i wydajniejsza opcja niż forEach
dodatkowo  funkcja forEach ro funkcja korzystac  wywołania zwrotnego pozwala  zachować tę zmienną w jej zakresie . Jeśli przypisałeś zmienną zewnętrzną i użyjesz jej ponownie w ramach forEach, zmienna zewnętrzna zachowa swoją wartość.

Nie wiem co jest nie tak i o co konkretnie Ci chodzi, ale może użyj mapy? W mapie klucz -> wartosć pod wartością możesz trzymać cały obiekt i z niego przypisac jego klucz jako klucz główny mapy lub np podzielic to na klucz wartosc 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
tu np https://www.javascripttutorial.net/es6/javascript-map/ 

const obiekt= {
  firstName: 'Luke',
  lastName: 'Skywalker',
  occupation: 'Jedi Knight',
}

const map = new Map(Object.entries(obiekt));

klucz => wartość  to :  firstName -> 'Luke'  i tak dalej