How to I display video in left and right column in append without duplicating it?

Question

I have video channel that I want to display all the the related video in that page. I displayed it from left to the right. But now I got problem with the same data appear twice left and right in one div. I know this is wrong but how do I corrected it ?

This is the current output that I got with my code

below is what I have tried

onst display = (id) => {
  axios.get(`${url}category?=${id}`)
    .then(function(res) {
      if (res.data.status == 'success') {
        res.data.result.map((e) => {

          $("video1").append(`
                            <div class="nk-block">
                                    <div class="row g-gs">
                                        <div class="col-xl-6">
                                            <div class="card card-bordered h-100">
                                                <div class="card-inner">
                                                    <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                                                        <div class="nk-sale-data-group flex-md-nowrap g-4">
                                                            <iframe width="430" height="300" src="${e.video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                        </div>
                                                    </div>
                                                    <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                                                        <div class="card-title" style="margin-bottom: 0px;"><h6 class="title">${e.title}</h6></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-xl-6">
                                            <div class="card card-bordered h-100">
                                                <div class="card-inner">
                                                    <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                                                        <div class="nk-sale-data-group flex-md-nowrap g-4">
                                                             <iframe width="430" height="300" src="${e.video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                        </div>
                                                    </div>
                                                    <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                                                        <div class="card-title" style="margin-bottom: 0px;"><h6 class="title"> ${e.title} </h6></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                            </div>`);

        });
      }

    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="video1"></div>

How do I achieve output like this and prevent it form duplicating it ?

My main concern is how do I display different video on left and right column. With my current code, left and right column sit on in the same div. That's the reason why I think it produce the same output.

<div class="nk-block">
   <div class="row g-gs">
        //left column
        <div class="col-xl-6"></div>
         //right column
        <div class="col-xl-6"></div>
    </div>
</div>

example of data inside my API


 "status": "success",
    "result": [
        {
            "id": 35,
            "title": "Tutorial 1",
            "video": "https://www.youtube.com/watch?v=W6NZfCO5SIk&ab_channel=ProgrammingwithMosh"
        },
          {
            "id": 37,
            "title": "Tutorial 2",
            "video": "https://www.youtube.com/watch?v=pTB0EiLXUC8&ab_channel=ProgrammingwithMosh"
        },
          {
            "id": 48,
            "title": "Tutorial 3",
            "video": "https://www.youtube.com/watch?v=8TnBZ8rom9c&ab_channel=ProgrammingwithMosh"
           
        }
    ]

your querstion need more clearity like what url you are accessing what kind of data you are dealing with — Amir Rahman, Commented Sep 26, 2021 at 8:57
@AmirRahman I'm using API to retrieve the video data, it just a simple data inside the API. My questions is more to how can I adjust the div class inside the append function. to make sure that different video sit on left and right column. — duatree, Commented Sep 26, 2021 at 9:01
you need a better layout first as i can see you are appending two videos per row and your map function is giving 1 value at a time so its duplicating it, there are two possible solutions either change your layout to manage 2 items per row automatically with grid system or make a custom for loop to iterate two items at a time — Amir Rahman, Commented Sep 26, 2021 at 9:19

Amir Rahman · Accepted Answer · 2021-09-26 10:22:54Z

this is a way to handle such situation thought i will not suggest to use this instead change your markup to one parent based and append all items in same level instead nesting 2 per row

html

<div id="video1" class="nk-block">

</div>

js

 <script>
 var exampleData = [
        {
            "id": 35,
            "title": "Tutorial 1",
            "video": "https://www.youtube.com/watch?v=W6NZfCO5SIk&ab_channel=ProgrammingwithMosh"
        },
          {
            "id": 37,
            "title": "Tutorial 2",
            "video": "https://www.youtube.com/watch?v=pTB0EiLXUC8&ab_channel=ProgrammingwithMosh"
        },
          {
            "id": 48,
            "title": "Tutorial 3",
            "video": "https://www.youtube.com/watch?v=8TnBZ8rom9c&ab_channel=ProgrammingwithMosh"
        }
]

for(let i=0;i<exampleData.length;i+=2){
    let val1 = exampleData[i], val2 = typeof exampleData[i+1] != "undefined"?exampleData[i+1]:null

    $("#video1").append(`
            <div class="row g-gs">
                <div class="col-xl-6">
                    <div class="card card-bordered h-100">
                        <div class="card-inner">
                            <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                                <div class="nk-sale-data-group flex-md-nowrap g-4">
                                    <iframe width="430" height="300" src="${val1.video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div>
                            <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                                <div class="card-title" style="margin-bottom: 0px;"><h6 class="title">${val1.title}</h6></div>
                            </div>
                        </div>
                    </div>
                </div>
                ${val2?`
                <div class="col-xl-6">
                    <div class="card card-bordered h-100">
                        <div class="card-inner">
                            <div class="align-end gy-3 gx-5 flex-wrap flex-md-nowrap flex-xl-wrap">
                                <div class="nk-sale-data-group flex-md-nowrap g-4">
                                    <iframe width="430" height="300" src="${val2.video}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            </div>
                            <div class="card-title-group align-start mb-2" style="margin-top: 30px;">
                                <div class="card-title" style="margin-bottom: 0px;"><h6 class="title">${val2.title}</h6></div>
                            </div>
                        </div>
                    </div>
                </div>        
                `:""}
            </div> 
    `);
}    
</script>

suggested layout

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,auto); /*as many col per row*/
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

"markup to one parent" meaning I have to display 1 per row ? — duatree, Commented Sep 26, 2021 at 10:06
you didnt mentioned does this code resolves your problem ? and what i mean to say is use grid that will manage row col from parent element only take a look at this w3schools.com/css/css_grid.asp — Amir Rahman, Commented Sep 26, 2021 at 10:16

Collectives™ on Stack Overflow

How to I display video in left and right column in append without duplicating it?

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
html
jquery
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascripthtmljquery or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
html
jquery
or ask your own question.