All geek questions in one place

How to navigate JavaScript object in HTML?

I want to loop through an object JavaScriptand repeat the htmlscript as many times as the length of the object.

Here I have a script tag

<script>
  var obj;

  ipcRenderer.on('requests-results', (event, hosSchema) => {
    obj = hosSchema
  })
</script>

objis an array obtained from the database Mongo, as shown in the figure below:

enter image description here

and I have the following tag <body>:

<div class="row">
                <div class="col-md-4 col-sm-4">
                   <div class="card">
                        <div class="card-content">
                          <span class="card-title">.1.</span>
                          <p>.2.</p>
                        </div>
                        <div class="card-action">
                          <a href="#">.3.</a>
                          <a href="#">.4.</a>
                        </div>
                      </div>
                </div>
            </div>

How can I go through objto repeat the code between a tag <div>as many times as there are obj.length?

+4
source share
3 answers

I suggest you use Handlebarsas mentioned by @Amit.

first move the code inside <div id="page-inner">as shown below:

<div id="page-inner">

</div>

<script id= "requests-template" type="text/x-handlebars-template">
    <div class="row">
        {{#each requests}}
        <div class="col-md-4 col-sm-4">
            <div class="card">
                <div class="card-content">
                    <span class="card-title">{{this.fieldName}}</span>
                    <p>{{this.fieldName}}</p>
                </div>
                <div class="card-action">
                    <a href="#">{{this.fieldName}}</a>
                    <a href="#">{{this.fieldName}}</a>
                </div>
            </div>
            </div>
            {{/each}}
    </div>

</script>

script text/javascript obj/hosSchema :

<script type="text/javascript">
var requestInfo = document.getElementById('requests-template').innerHTML;

        var template = Handlebars.compile(requestInfo);

        var requestData = template({
            requests: obj
        })
        $('#page-inner').html(requestData);
</script>

: Handlebars (npm install handlebars --save)

+1

templating script Handlebars.js, Mustache.js underscore.js. . .

http://www.creativebloq.com/web-design/templating-engines-9134396

0

Try the following:

var divlist = document.getElementsByTagName['div'];
var duplicate = null;
var rowIndex = -1;
var found = false;
for(var i = 0;i<obj.length;i++)
{
    if(!found)
    for(var p = 0;p<divlist.length;p++)
        {
            if(rowIndex != -1 && duplicate != null)
                {
                    //set a Boolean to true and break
                    found = true;
                    break;  
                }

            if(divlist[p].className == "col-md-4 col-sm-4")
                {
                    //copy the element
                    duplicate = divlist[p];
                }
            else if(divlist[p].className == "row")
                {
                    //identify the row index
                    rowIndex = p;
                }
        }
            //append the duplicate
            divlist[rowIndex].appendChild(duplicate);
}
0
source

Source: https://habr.com/ru/post/1683489/

More articles:


All Articles