Changing value of a specific object in array of objects - JavaScript

Question

Hi guys I am trying to create a board game using React and function components so I use hooks.

I've got an array of around 30 objects representing fields of the board:

[...,{
    "id": 3,
    "name": "Berlin",
    "country": "Germany",
    "price": 2500,
    "floorPrice": 500,
    "buildingPrice": 1500,
    "baseFee": 300,
    "maxFee": 2000,
    "pawns": [],
    "type": "city",
    "owner": {}
},
{
    "id": 4,
    "name": "Warsaw",
    "country": "Poland",
    "price": 2400,
    "floorPrice": 400,
    "buildingPrice": 1200,
    "baseFee": 250,
    "maxFee": 1800,
    "pawns": [],
    "type": "city",
    "owner": {}
},...]

When pawn steps on a specific field it can buy a property from this field just like in monopoly, by adding pawn as an owner in object. It works but when I try to buy another property/field then the last property I bought before this one lost it's owner.

This is my code for modifying copy of my array from json:

  setAllFields(
    allFields.map(item => (
      {...item, owner: (item.id !== playerOne.position ? item.owner : (item.owner = {'owner': 'playerOne'}))}
    ))
  );

I Would really appreciate any sugestions :)

let allFields = [];

const myFieldsArr = [
    {
        "id": 1,
        "name": "Wroclaw",
        "pawns": ['playerOne'],
        "owner": []
    },
    {
        "id": 2,
        "name": "Warsaw",
        "pawns": ['playerTwo'],
        "owner": []
    },
    {
        "id": 3,
        "name": "Lodz",
        "pawns": [],
        "owner": []
    }
]

allFields = myFieldsArr.map(field => (
  {...field, owner: (field.id === 1 ? (field.owner =['playerOne']) : field.owner)}
))

console.log(allFields)


allFields = myFieldsArr.map(field => (
  {...field, owner: (field.id === 2 ? (field.owner =['playerTwo']) : field.owner)}
))


console.log(allFields)

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

owner is an object. What are the key and values supposed to be? — Ayudh
– Ayudh, Commented Oct 5, 2022 at 8:10
"owner": {'owner': 'playerOne'} because later on I will ad there more data that's why there is an object — Kevin Flynn
– Kevin Flynn, Commented Oct 5, 2022 at 8:12
will all the keys inside the root owner object be "owner"? in that case just use an array like "owner": ['playerOne'] — Ayudh
– Ayudh, Commented Oct 5, 2022 at 8:13
Why are you doing item.owner = {'owner': 'playerOne'} in the false case of the conditional? That's modifying a state object, which you seem to know you're not supposed to do. — T.J. Crowder
– T.J. Crowder, Commented Oct 5, 2022 at 8:16
It turns out I needed to modify other function that was overriding my state changes using fetch. Another solution that also worked is to modify player/pawn data instead of field data by creating something like this: setPlayerTwo(existingValues => ({...existingValues, portfolio: [...playerTwo.portfolio, {'purchase': playerTwo.position}]})) — Kevin Flynn
– Kevin Flynn, Commented Oct 6, 2022 at 5:24

Ayudh · Accepted Answer · 2022-10-05 08:25:17Z

1

setAllFields(
    allFields.map(item => (
      {...item, owner: (item.id !== playerOne.position ? item.owner : ['playerOne']}
    ))
  );

Is this what you're looking for?

answered Oct 5, 2022 at 8:25

Ayudh

1,7651 gold badge32 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Flynn Over a year ago

I tried that but then it even does not add player to owner field. Strange thing is that it works with snippet I created so it seems the problem is connected to state somehow...

Collectives™ on Stack Overflow

Changing value of a specific object in array of objects - JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related