How to iterate a JSON data in HTML in LWC

Question

I have a JSON response 'result' from JS like below:

[{"Name":"Alexy Portal",
"Description":"New Record <span style="background-color:#FFFF00;">New</span>",
"Title":"New Record <span style="background-color:#FFFF00;">New</span>"}]

I need to put it in table format. I tried to use

<template for:each={result} for:item="res">
   <li key={res.Title}>
      <lightning-formatted-rich-text value={res.Title}></lightning-formatted-rich-text>
   </li>
</template>

to get the Data in HTML so that i can put it in table format. but its not working. Could anyone please suggest any solution? It will be really helpful. Thanks in Advance.

Answer 1

For LWC template for:each you MUST specify element with "key" atribute at Top level .
So this code should work.

<template for:each={result} for:item="res">
  <div key={res.Title}>
     <li key={res.Title}>
        <lightning-formatted-rich-text value={res.Title}></lightning-formatted-rich-text>
     </li>
  </div>
</template>

Also please ensure that data in JS saved as Array Not as String or Object