Display javascript nested objects to html-CodePudding

Here is what the data looks like:

{
    "1111": {
        [{
            id: "1111",
            name: "name",
            randomvalue: "1",
        },
        {
            id: "1111",
            name: "name2",
            randomvalue: "2",
        }]
    },
    "0101": {
        [{
            id: "0101",
            name: "name3",
            randomvalue: "3"
        },
        {
            id: "0101",
            name: "name4",
            randomvalue: "1"
        }]
    },
    "0001": {
        [{
            id: "0001",
            name: "name5",
            randomvalue: "4"
        }]
    }
}

the randomvalue always changes when there is new data but the ids and names stay constant. I want the data to be displayed on html exactly as it is here but when the random values update, the html must also be updated. I am not using any frameworks just nodejs.

For clarity: for each object a new html <div> element will be created. each <div> will have three <p> values. the result will initially look like this:

<div >
    <p >1111</p>
    <p >name</p>
    <p >1</p>
</div>
<div >
    <p >1111</p>
    <p >name2</p>
    <p >2</p>
</div>
<div >
    <p >0101</p>
    <p >name3</p>
    <p >3</p>
</div>
<div >
    <p >0101</p>
    <p >name4</p>
    <p >1</p>
</div>
<div >
    <p >0001</p>
    <p >name5</p>
    <p >4</p>
</div>

if there is a randomvalue change in every object it will be:

<div >
    <p >1111</p>
    <p >name</p>
    <p > <new_random_value> </p>
</div>
<div >
    <p >1111</p>
    <p >name2</p>
    <p > <new_random_value> </p>
</div>
<div >
    <p >0101</p>
    <p >name3</p>
    <p > <new_random_value> </p>
</div>
<div >
    <p >0101</p>
    <p >name4</p>
    <p > <new_random_value> </p>
</div>
<div >
    <p >0001</p>
    <p >name5</p>
    <p > <new_random_value> </p>
</div>

CodePudding user response：

you can do something like this

const toHtml = data => data.map(({id, name, randomvalue}) => {
  return `<div >
    <p >${id}</p>
    <p >${name}</p>
    <p > ${randomvalue} </p>
</div>`

}).join('')


const initialData  = {
    "1111": 
        [{
            id: "1111",
            name: "name",
            randomvalue: "1",
        },
        {
            id: "1111",
            name: "name2",
            randomvalue: "2",
        }]
    ,
    "0101": 
        [{
            id: "0101",
            name: "name3",
            randomvalue: "3"
        },
        {
            id: "0101",
            name: "name4",
            randomvalue: "1"
        }]
    ,
    "0001": 
        [{
            id: "0001",
            name: "name5",
            randomvalue: "4"
        }]
    
}

const toArray = data => Object.values(initialData).flat()
const groupById = data => data.reduce((res, item) =>({...res, [item.id]: [...(res[item.id] || []), item]}), {})

document.getElementById('main').innerHTML = toHtml(toArray(initialData))



setTimeout(() => {
 const newData = toArray(initialData).map(item => ({...item, randomvalue: Math.ceil(Math.random() * 100)}))
 document.getElementById('main').innerHTML = toHtml(newData)

}, 3000)

<div id="main"></div>

CodePudding user response：

You’re going to need to write some recursion parsing of your object for a custom display.
If you just need the show the data, you can use json.stringify(yourData)