How to display all object's values inside HTML tag using forEach instead of manually iterating over all values

Question

I have a code snippet in JS I'm altering. The original has an object called rows defined by:

function createData(name, calories, fat, carbs, protein) {
    return { name, calories, fat, carbs, protein };
}

const rows = [
    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9),
];

And displayed with

<TableBody>
  {rows.map((row) => (
    <TableRow key={row.name}>
      <TableCell component="th" scope="row">
        {row.name}
      </TableCell>
      <TableCell align="right">{row.calories}</TableCell>
      <TableCell align="right">{row.fat}</TableCell>
      <TableCell align="right">{row.carbs}</TableCell>
      <TableCell align="right">{row.protein}</TableCell>
    </TableRow>
  ))}
</TableBody>

I'm trying to move all the HTML into a function:

function my_rows() {
return rows.map((row) => (
    <TableRow key={row.name}>
        <TableCell component='th' scope='row'>
            {row.name}
        </TableCell>
        { Object.values(row).forEach(v => <TableRow align='right'>{v}</TableRow> )}
    </TableRow>
))
}

but my forEach gives back nothing...

How can this be achieved (this being "generating all the correct HTML tags for each value of the object row")?
Is this a good idea? (My thought was this: Have a python-flask server generating this row object, and let JS display the whole object, without knowing beforehand which and how much values this object has)

[forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) does not return anything. You can use [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). — devserkan, Jul 11 '20 at 21:48
@devserkan basically yes, but I still can't make it look like the original code — CIsForCookies, Jul 11 '20 at 22:16
I didn't understand the main issue here but in the original code there are multiple `TableCell`s but you are iterating for `TableRow`s in your second example. — devserkan, Jul 11 '20 at 22:31

score 1 · Accepted Answer · answered Jul 11 '20 at 22:04

1

forEach does modification in place and does not return a new array unlike map. Use map instead of forEach.

function my_rows() {
 return rows.map((row) => (
  <TableRow key={row.name}>
    <TableCell component='th' scope='row'>
        {row.name}
    </TableCell>
    { Object.values(row).map(v => <TableRow align='right'>{v}</TableRow> )}
  </TableRow>
 ))
}

answered Jul 11 '20 at 22:04

Çağatay Sel

801
7
14

This indeed helps, as now I can get an output, but it looks weird, unlike the original code... – CIsForCookies Jul 11 '20 at 22:15

score 0 · Answer 2 · answered Jul 11 '20 at 21:55

to put HTML code in JS and call it back you have to do this, if you want to load the html code when the page is being loaded you have to put the functions name in onload at body's tag like

<body onload="myFunction();">

and in JS you have to do this

      // you have to create a div to put the html code in it 
      var div = document.getElementById("ID");

      html =" <TableRow key={row.name}>"
      html += "<TableCell component='th' scope='row'>";
      html += "{row.name}";
      html += "</TableCell>";
      html += "{ Object.values(row).forEach(v => <TableRow align='right'>{v} 
      </TableRow> )}";
      html += "</TableRow>";

      div.innerHTML = html;

How to display all object's values inside HTML tag using forEach instead of manually iterating over all values

2 Answers2