Question 206379 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – i am mapping over an object and making <tr> from it using info from it and making an html table render with react but there are some extra empty <tr>

Essentially, I used Object.entries() on an object and then .map() over it and a lot more complicated stuff

This is the code I used.

           {Object.entries(ratings).map((item) => {
            item.filter(n => n);
            return (item.map((Item) => {
              if (!Item.points === []) return (<></>);
              if (Item.points) {
                console.log(Item.points);
                return (
                  <tr key={uuidv4()}>
                    <td>{Item.points.at(-1)}</td>
                  </tr>
                )
              }
            }))
           }) ?? null}

and ratings looks like this

[
    {
      "name": "Bullet",
      "points": []
    },
    {
      "name": "Blitz",
      "points": [
        [2023, 6, 4, 864],
        [2023, 6, 9, 1106],
        [2023, 6, 10, 1139],
        [2023, 6, 11, 1174]
      ]
    },
    {
      "name": "Rapid",
      "points": [
        [2023, 6, 3, 1082],
        [2023, 6, 4, 1035],
        [2023, 6, 5, 1054],
        [2023, 6, 6, 1081],
        [2023, 6, 7, 1076],
        [2023,6,8,1157],
        [2023,6,9,1131],
        [2023,6,10,1145],
        [2023,6,11,1157]
      ]
    },
    {
      "name": "Classical",
      "points": [
        [2023,6,9,1262]
      ]
    },
    {
      "name": "Correspondence",
      "points": []
    },
    {
      "name": "Chess960",
      "points": []
    },
    {
      "name": "King of the Hill",
      "points": []
    },
    {
      "name": "Three-check",
      "points": [
        [2023,6,5,1628]
      ]
    },
    {
      "name": "Antichess",
      "points": [
        [2023,6,5,1090]
      ]
    },
    {
      "name": "Atomic",
      "points": []
    },
    {
      "name": "Horde",
      "points": []
    },
    {
      "name": "Racing Kings",
      "points": []
    },
    {
      "name": "Crazyhouse",
      "points": []
    },
    {
      "name": "Puzzles",
      "points": [
        [2023,6,3,1353],
        [2023,6,4,1404],
        [2023,6,5,1306],
        [2023,6,8,1499],
        [2023,6,9,1514],
        [2023,6,10,1838],
        [2023,6,11,1766],
        [2023,6,12,1781]
      ]
    },
    {
      "name": "UltraBullet",
      "points": []
    }
  ]

As you can see, it has some empty arrays like for "Bullet". React keeps creating a bunch empty that I don’t want. How can I remove them. This is my code, but at some point it got a little out of hand and I’m now confused.
ive also tried filtering with length but it says Cannot read properties of undefined (reading ‘length’)

changed my code to this

           {Object.entries(ratings).map((item) => {
            return (Object.keys(item).filter(o => o.points?.length).map((Item) => {
                return (
                  <tr key={uuidv4()}>
                    <td>{Item.points.at(-1)}</td>
                  </tr>
                )
            }))
           }) ?? null}

and now i dont get any errors but no elements are being created

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    fixed it by changing the code to this

    {Object.values(ratings).filter(o => o.points.length).map((item) => {
      return (
          <tr key={uuidv4()}>
             <td>{item.points.at(-1)}</td>
          </tr>
       )
}) ?? null}

  2. 0

    You can filter by the length of the points array of each object before mapping.

    return item.filter(o => o.points.length).map(Item => {
    // ...
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search