How can I navigate the properties of an object to save data in an array-like property?

Question

How can I navigate the properties of an object to save data in an array-like property?

Navigation

#1 by (1 votes)

0

Hello, I have a structure that is an object that has several arrays as properties.

Example: items: {Dogs: [], Cats: [], ....}

I want to go through these properties comparing each one with a variable with the name and the conincida to save the item that also happened as data in the corresponding property's array. The code that I put saves the items but in all the properties, so it is not filtering by property name. Any suggestions?

 class App extends Component {

 constructor() {
 super();
 this.state = {
 lists: [], // this holds the name of each list
 items: {} // this property names of this object are the names of the lists; 
 //their values are arrays of the items in each list
 };
 }

  handleAddItem(s) {
  //Aqui el codigo que no funciona como deseo
  let itemObj = s.ListName;
  let items = Object.assign({}, this.state.items);  
  for(itemObj in items){
    if(items.hasOwnProperty(itemObj)){
      items[itemObj].push(s);
    }
  }
  this.setState({ items  });
  }

javascript es6 reactjs react

asked by user3821102 19.03.2018 в 22:50

source

1 answer

Sort matrix ascending and descending How can an ionic form be sent to an email of mine

score 1 · Answer 1

Hi, I already solved my problem. Solution was that in the AddItem.js component it was not correctly generating the state newItem: {}. Now I am 100%. I attach the correct code.

 ---App.js
class App extends Component {

constructor() {
super();
this.state = {
lists: [], // this holds the name of each list
items: {} // this property names of this object are the names of the lists; 
their values are arrays of the items in each list
};
}

handleAddItem(s) {
  // Implement this function!

  let items = Object.assign({}, this.state.items);  
  items[s.List].push(s.name);
  this.setState({ items  });
  console.log(this.state.items);
} 
  render() {
    return (
    <div className="App">
    <AddList addList={this.handleAddList.bind(this)} />
    <div id="listsDiv" className="List">
      <Lists lists={this.state.lists} items={this.state.items} addItem=
   {this.handleAddItem.bind(this)} />
    </div>
    </div>
   );
   }

} --- AddItem.js class AddItem extends Component {

  constructor(props) {
  super(props);
  this.state = {
   newItem:{}
  }
  }

  handleSubmit(e) {
  e.preventDefault(); // this prevents the page from reloading -- do not 
  delete this line!
 let newItem = Object.assign({}, this.state.newItem); 
 newItem.name = {name : this.refs.id.value};
 newItem.List = this.props.idName;
 this.setState({ newItem: this.state.newItem = newItem.name });
 this.props.addItem(newItem);
  console.log(this.state.newItem);
  // Implement the rest of this function here!
   }


 render() {
  var divName = 'add' + this.props.idName;
  return (
  <div className='addItemDiv'>
  <h4>Add {this.props.idName}</h4>
  <form ref='form' onSubmit={this.handleSubmit.bind(this)}>
  <div id={divName} ref={divName}>
    <label>Name</label><br />
    <input type='text' ref='id' />
    </div>
    <br />
    <input type='submit' value='Submit' />
    <br />
  </form>
  </div>
   );
  }

  }