mardi 7 juillet 2020

Convert into HTML checkboxes using JSON values in react

This JSON is dynamic, coming from API and I can't change it. I want to get table.cc value and convert it into HTML checkbox.

let table = {
  id: 1,
  value: "abc",
  height: 1080,
  width: 1920,
  cc: "{"c08":false,"c07":true}"
}

let headers = Object.keys(table);
let rows = Object.values(table);
let cc = table.cc ? JSON.parse(table.cc) : null;

if(cc) {
  let output = Object.entries(cc).map(([key, value]) => {
    return `<input type="checkbox" checked=${value}>
            <label>${key}</label>`;
  }).join('');
  console.log(output);
  rows[4] = `${output}`; // I am getting a string. I am unable to convert it into HTML markup.
}

Since I am looping over Object.values(table), I want to change only the table.cc to get HTML checkboxes. So, in the case of the above example table.cc should have 2 checkboxes in HTML and the second one should be checked since the value is true. The label should be the key. Any ideas?




Aucun commentaire:

Enregistrer un commentaire