Add new key with Value to an array of nested Objects-CodePudding

i have a big array of Objects which I've converted from a CSV File with papaparse.

constructor(props) {
    super(props);

    this.state = {
        data: null
};

This Objects don't habe an ID, so I'm trying to add a "new Line" to every Object with an ID. The ID can be the same number everywhere. I currently don't care about that because I just want to add a new Line for now.

This is how the Objects currently look like in the console (console.log(result from the CSV Parser))

enter image description here

I really appreciate any help I would get. I have already tried some functions I've found but none of them werked for me. I kinda gotta get this working in the next hour or two so THANK YOU for any help

CodePudding user response：

Since you don't have any code, I will do some assumption while I'm answering your question. First of all, let's suppose to have an array with inside your data:

const data = [
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
];

Now, there is different methods to add a field to the data; a very simple and not very efficient method can be:

const addID = data => {
        let array = [];
        data.map(el => {
            el = { id: 1, ...el };
            array.push(el);
            }
        );
        return array;
};

In this way, you're simply creating a new array, modify each element with the map function and adding the, a new field. Then you insert them in a new array and returns the array.

CodePudding user response：

You can create a small helper function to add ids to the data once you've received it (from whatever source - here I'm just passing it in as a prop to the component), and before you update the state.

Note: in this minimal working example I've initialised state with an empty array rather than null.

const { Component } = React;

// `map` over the data and for each
// object return an object with an id property
function addId(data) {
  return data.map((obj, i) => {
    return { id: i   1, ...obj };
  });
}

class Example extends Component {

  constructor(props) {
    super();
    this.state = { data: [] };
  }

  // Use the helper function to add ids
  // to the data objects, then set the new state
  componentDidMount() {
    const data = addId(this.props.data);
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    if (!data.length) return <div>No data</div>; 
    return (
      <div>
        {data.map(obj => {
          return <div>{obj.id}&nbsp;{obj.name}</div>
        })}
      </div>
    );
  }

};

const data = [
  { name: 'Rita' },
  { name: 'Sue' },
  { name: 'Bob' }
];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>