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

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)

@devserkan basically yes, but I still can't make it look like the original code — CIsForCookies
– CIsForCookies, Commented Jul 11, 2020 at 22:16
I didn't understand the main issue here but in the original code there are multiple TableCells but you are iterating for TableRows in your second example. — devserkan
– devserkan, Commented Jul 11, 2020 at 22:31

Çağatay Sel · Accepted Answer · 2020-07-11 22:04:18Z

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, 2020 at 22:04

Çağatay Sel

8107 silver badges14 bronze badges

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

1 Comment

CIsForCookies Over a year ago

This indeed helps, as now I can get an output, but it looks weird, unlike the original code...

Yad Hersh · Accepted Answer · 2020-07-11 21:55:19Z

0

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;

answered Jul 11, 2020 at 21:55

Yad Hersh

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related