Category: javascript

<div class="row data">
  <div class="subdiv">
    <div class="check"><input type="checkbox" name="buy" value="260" checked="" onclick="javascript:basket.checkItem();">&nbsp;</div>
    <div class="img"><img src="./img/basket1.jpg" width="60"></div>
    <div class="pname">
      <span>TX2</span>
    </div>
  </div>
  <div class="subdiv">
    <div class="num">
      <div class="updown">
        <input type="text" name="p_num1" id="p_num1" size="2" maxlength="4" class="p_num" value="2" onkeyup="javascript:basket.changePNum(1);">
        <span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-up up"></i></span>
        <span onclick="javascript:basket.changePNum(1);"><i class="fas fa-arrow-alt-circle-down down"></i></span>
      </div>
    </div>
  </div>
  <div class="subdiv">
    <div class="basketcmd"><a href="javascript:void(0)" class="abutton" onclick="javascript:basket.delItem();">삭제</a></div>
  </div>
</div>

I saw the way using DOMParser().parseFromString, but this solution requires me to convert html code into one line string. Is there better way to convert or skills to make html code to string easily?

my final goal is to use appendChild() so that I can have many “row data” class div. which requires me to make html code to DOM.

Given a bewildering fhir document like https://raw.githubusercontent.com/Notarise-gov-sg/api-notarise-healthcerts/master/test/fixtures/v2/pdt_art_with_nric_unwrapped.json

I need to update the part the JSON from { "id": "NRIC-FIN", "value": "S9098989Z" } to { "id": "NRIC-FIN", "value": "foobar" } and then emit the whole JSON again with that change.

I just about know how to access the value.

const fs = require("fs");
let rawdata = fs.readFileSync("pdt_art_with_nric_unwrapped.json");
let art = JSON.parse(rawdata);

let nric = art.fhirBundle.entry
  .flatMap((entry) => entry.resource)
  .find((entry) => entry.resourceType === "Patient")
  .identifier.find((entry) => entry.id === "NRIC-FIN").value;

console.log(nric);

Though I am puzzled how to update this value since it’s so difficult to access. Am I missing a trick? I don’t want to use regex btw!

I’m trying to display a Range Bar Chart with AppexCharts for team due date tasks (2 tasks or above).

every task can have multiple bars
if the number of bars in each task is more than 2 the bars of each task get into each other
please take a look at this example that can explain my point clearly .

Thank you .

var options = {
          series: [
             {
            name: 'task1',
            data: [
                {
                x: 'Team Health',
                y: [
                  new Date('2021-03-01').getTime(),
                  new Date('2021-03-02').getTime()
                ]
              },
                   {
                x: 'Team Health',
                y: [
                  new Date('2021-03-02').getTime(),
                  new Date('2021-03-05').getTime()
                ]
              },
                 {
                x: 'Team Health',
                y: [
                  new Date('2021-03-01').getTime(),
                  new Date('2021-03-07').getTime()
                ]
              },
                   {
                x: 'Team Health',
                y: [
                  new Date('2021-03-02').getTime(),
                  new Date('2021-03-08').getTime()
                ]
              },
                    {
                x: 'Team Health',
                y: [
                  new Date('2021-03-01').getTime(),
                  new Date('2021-03-05').getTime()
                ]
              },
        
            ]
          },
            {
            name: 'task2',
            data: [
                {
                x: 'Team Health',
                y: [
                  new Date('2021-03-01').getTime(),
                  new Date('2021-03-10').getTime()
                ]
              },
            
                 {
                x: 'Team Health',
                y: [
                  new Date('2021-03-01').getTime(),
                  new Date('2021-03-03').getTime()
                ]
              },
       
                    {
                x: 'Team Health',
                y: [
                  new Date('2021-03-3').getTime(),
                  new Date('2021-03-08').getTime()
                ]
              },
        
            ]
          },
    
        ],
          chart: {
       height:400,
          type: 'rangeBar'
        },
        plotOptions: {
          bar: {
            horizontal: true,
            barHeight: '80%',
            rangeBarOverlap: false,
      
           columnWidth: '10%',
          }
        },
        xaxis: {
          type: 'datetime',
             position: 'top',
           
        },
        stroke: {
          width: 1
        },
        fill: {
          type: 'solid',
          opacity: 0.6
        },
        legend: {
          position: 'top',
          horizontalAlign: 'center'
        }
        };

I’m actually looking on how to implement a regex to handle a list of emails separated with commas OR semicolon.
I’ve made this regex, but I’m not sure on how to add the OR operator to handle semicolon also:

^([w+-.%]+@[w-.]+.[A-Za-z]{2,4},?)+$

Thanks

First of all, I did tons of research but I only found this topic related to Mouse positions.

I have a canvas element and I’m doing some zooming stuff with it (while clicking, scrolling etc.)

This function below shows how the zooming works.

    zoom(clicks) {;
        var pt = this.ctx.transformedPoint(this.X, this.Y);
        this.ctx.translate(pt.x, pt.y);
        var factor = Math.pow(this.scaleFactor, clicks);
        this.ctx.scale(factor, factor);
        
        this.totalzoom *= factor;
        this.ctx.translate(-pt.x, -pt.y);
        this.reDraw();
    }

X means mouseX

Y means mouseY

this.X = evt.offsetX;
this.Y = evt.offsetX;

These are working really fine until I want to use this functions to zoom only to a unique position. I edited my code like this to make it work somehow:

    zoomToItem(x,y){

        var pt = this.ctx.transformedPoint(x, y);
        this.ctx.translate(pt.x, pt.y);
        var factor = Math.pow(this.scaleFactor, 10);
        this.ctx.scale(factor, factor);
        
        this.totalzoom *= factor;
        this.ctx.translate(-pt.x, -pt.y);
        this.reDraw();
    }

The real problem is that in the original view the coordinates what I give is proper, but as I mentioned I scale the image to fit in the canvas, so the given coordinates won’t be proper anymore.

Here’s an example what I tried:

let transform = this.Core.Draw.ctx.getTransform();

let X = (this.item[i].x - this.rects.left - transform.e) / transform.a; 
let Y = (this.item[i].y - this.rects.top - transform.f) / transform.d;

this.zoomToItem(X,Y);

I use jQuery datatable in my project. The code for getting all data from database is:

var pm = _pmRepository.GetAllPMs().Reverse().ToList();

The repository pattern used for this purpose is:

 public IEnumerable<PM> GetAllPMs()
    {
        return context.PMs;
    }

My database has some columns with DateTime format. I want to convert date format. I have written a class that can do this:

public class DateTimeConverter
{
    PersianCalendar pc = new PersianCalendar();
public string DateConverter(string inputDate)
        {
            DateTime d = DateTime.Parse(inputDate);
            string[] convertedDateString = new string[3];
            convertedDateString[0] = pc.GetYear(d).ToString();
            convertedDateString[1] = pc.GetMonth(d).ToString();
            convertedDateString[2] = pc.GetDayOfMonth(d).ToString();
            string currentConvertedDate = string.Format("{0}/{1}/{2}", 
            convertedDateString[0], convertedDateString[1],
            convertedDateString[2]);
            return currentConvertedDate;
        }
}

How can I use my date converter before sending data to datatable?

I have two forms, I need a single submit button for two forms(a normal form and a upload). I’ve tried to use javascript but It would only upload the 2nd form which is the image upload. I’m sorry if the code looks weird as I’m still new to it.

{% extends "Base.html" %}
{% block title %}title{% endblock %}

{% block content %}
{% from "includes/_formHelper.html" import render_field %}
<div class="container" style="width:50em;">
<h1 class="display-4">Create Products</h1>
<form method="POST" action=" " id="firstform">
  <div class="form-group">
    {{ render_field(form.product_name, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.brand, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.category, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.quantity, class="form-control") }}
  </div>
    </form>
<form method="post" action="/" enctype="multipart/form-data" id="secondform">
    <h4>Select a file to upload</h4>
        <dl>
            <p>
                <input type="file" name="file" class="form-control" required>
            </p>
        </dl>
    </form>
  <br>
    <button type="submit" value="Submit" class="btn btn-primary" onclick="submitForms()">Save Products</button>
</div>
<style>
  h1{
  text-align:center;
  }
  p{
  color:#212529;
  font-size:16px;
  }
  h4{
  color:#212529;
  font-size:16px;
  }
</style>
{% endblock %}

JavaScript:

<script language="javascript">
submitForms = function(){
  document.getElementById("firstform").submit();
  document.getElementById("secondform").submit();
}
</script>

To conceal the pointless columns, I`m the usage of a javascript toggle textual content on my gallery filter, which goes flawlessly. However, the columns amplify each time I refresh the page, and I need to click on display all then conceal all to get it to work. And the cause I did rows is if I insert the showmore identityentification withinside the center of the columns, when I press display all, they’ll show one column on every line, but on this technique all of the columns will show normally. I attempted converting the show cost withinside the javascript to many different values, however it’s miles nevertheless now no longer running properly. Do you’ve got got any pointers for the way to clear up this?

   function togglesec1() {
    var showMoreText = document.getElementById("showmore");  
    var buttonText = document.querySelector("#moreBtn p");
    var moreIcon = document.querySelector("#moreBtn img");
    
    if (startsec.style.display === "none") {
      showMoreText.style.display = "none";
      startsec.style.display = "inline";
      buttonText.innerHTML = "Show More";    
      buttonText.classList.remove('lesser');
      moreIcon.classList.remove('lesser');
    } else {
      showMoreText.style.display = "inline";
      startsec.style.display = "none";
      buttonText.innerHTML = "Show Less";
      buttonText.classList.add('lesser');
      moreIcon.classList.add('lesser');
    }
  }

 <head>
  <link rel="shortcut icon" href="./images/favicon.ico"      type="image/vnd.microsoft.icon" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
    <link  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 </head>

<body>
<section id="work">
       <div class="container-fluid clientbox text-center py-5">
         <div class="row">
              <div class="col-12 col-md-12 col-lg-12 text-center">
         <ul>
           <li class="list-inline-item active" data-filter="all">A</li>
           <li class="list-inline-item" data-filter="B">B</li>
           <li class="list-inline-item" data-filter="C">C</li>
           <li class="list-inline-item" data-filter="D">D</li>
           <li class="list-inline-item" data-filter="M">M</li>
           <li class="list-inline-item" data-filter="UI">U</li>
           <li class="list-inline-item" data-filter="CO">CC</li>
         </ul>
        </div>
        </div>
          <div class="row g-0">

            <div class="clients C col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
                  <figcaption class="product-desc"><P>C</P></figcaption>
                  <figcaption class="product-desc2"><p>H</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B D C CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/36/268/png-transparent-ballpoint-pen-stylus-fountain-pen-waterman-pens-pen-pen-advertising-rollerball-pen.png" alt="Logo">
                  <figcaption class="product-desc"><P>b</P></figcaption>
                  <figcaption class="product-desc2"><p>k</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B C D M U CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
                  <figcaption class="product-desc"><P>n</P></figcaption>
                  <figcaption class="product-desc2"><p>P</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B C D CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
                  <figcaption class="product-desc"><P>B</P></figcaption>
                  <figcaption class="product-desc2"><p>G</p></figcaption>
                </figure>
              </a>
            </div>
            </div>
            <div id="startsec"></div>
            <div id="showmore">
            <div class="row g-0">
            <div class="clients B CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
                  <figcaption class="product-desc"><P>N</P></figcaption>
                  <figcaption class="product-desc2"><p>g</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients D B C M col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
                  <figcaption class="product-desc"><P>N</P></figcaption>
                  <figcaption class="product-desc2"><p>s</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B UI col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
                  <figcaption class="product-desc"><P>BS</P></figcaption>
                  <figcaption class="product-desc2"><p>l</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
                  <figcaption class="product-desc"><P>CN</P></figcaption>
                  <figcaption class="product-desc2"><p>C</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients D col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
                  <figcaption class="product-desc"><P>d</P></figcaption>
                  <figcaption class="product-desc2"><p>T</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B D col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
                  <figcaption class="product-desc"><P>Bl</P></figcaption>
                  <figcaption class="product-desc2"><p>E</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B D CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
                  <figcaption class="product-desc"><P>BN</P></figcaption>
                  <figcaption class="product-desc2"><p>S</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B C D M col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
                  <figcaption class="product-desc"><P>B</P></figcaption>
                  <figcaption class="product-desc2"><p>I</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B M C D CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
                  <figcaption class="product-desc"><P>N</P></figcaption>
                  <div class="product-desc2"><p>o</p></div>
                </figure>
              </a>
            </div>
            <div class="clients C B col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
                  <figcaption class="product-desc"><P>CAG</P></figcaption>
                  <figcaption class="product-desc2"><p>Jr</p></figcaption>
                </figure>
              </a>
            </div>
            <div class="clients B col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
                  <figcaption class="product-desc"><P>Brl</P></figcaption>
                  <figcaption class="product-desc2"><p>Sl</p></figcaption>
                </figure>
              </a>
            </div>
          
            <div class="clients B CC col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
                  <figcaption class="product-desc"><P>Bn</P></figcaption>
                  <figcaption class="product-desc2"><p>SP</p></figcaption>
                </figure>
              </a>
            </div>
  
            <div class="clients B col-6 col-md-4 col-lg-3">
              <a href="#">
                <figure class="client-container">
                  <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
                  <figcaption class="product-desc"><P>B</P></figcaption>
                  <figcaption class="product-desc2"><p>Wc</p></figcaption>
                </figure>
              </a>
            </div>
            </div>
          </div>
          <button onclick="togglesec1()" id="moreBtn">
            <p class="pink">Show More</p> 
            <img class="showmore" src="./images/load-more.png" alt="">
           </button>
        </div>  
      </section>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
      
      <script>$(document).ready(function (){$('.list-inline-item').click(function(){const value = $(this).attr('data-filter');if(value == 'all'){$('.clients').show('1000');}else{ $('.clients').not('.'+value).hide('1000');$('.clients').filter('.'+value).show('1000');}$(this).addClass('active').siblings().removeClass('active')})})</script>

      </body>

Hi i have a two for loop contains checking the each loop length and push into key value pair of array

for (var i=0; i<allTextLines.length; i++) {
        var data = allTextLines[i];
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) 
            {
              
               ****tarr.push({headers[j]:data[j]})****
            }
            
             lines.push(tarr);

        }
        
    } 

i need to push headers[j] as key but i can’t.How to do that in JS ? I’m literally new . please bare me.THanks

Greeting guys, I have an issue with a class component (that handle a list), the first time I mount the component works without any issue showcasing the expected values, unfortunately when I change the pathname while inside the class component it doesn’t updated.

render() {
        const service = this.state.services.find(service => service.link === window.location.pathname)
        if (service) {
            return <Service {...service} />
        }
      }

I would like to know if there is something to keep track of windows pathname in real time and maybe use the forceUpdate(); to refresh the component.

let me know if you need more information!

I want to turn an object with objects into an array of objects in javascript.

The objects looks like that

    
{
  "0": {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  },
  "1": {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  },
  "2": {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  }
}

The Keys of the object could be just ignored, so that I have an outcome like that

[
 {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  },
  {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  },
  {
    "TASKCOUNT": 1,
    "ORDERID": null,
    "WORKSTATION": 1,
    "JOBSTATE": "finished"
  }
]

Thanks for any help! 

I need to add customized title for excel file exported from Datatable.
Tried this from a stackoverflow answer but it applies to whole sheet.

$("#datatable").DataTable({
          dom: "lBfrtip",
          buttons: [
            {
              extend: "excelHtml5",
              title: "Audit Trail Report",
              messageTop: `From ${this.start_date} To ${this.end_date}`,
              customize: function (xlsx) {
                var sheet = xlsx.xl["styles.xml"];
                var tagName = sheet.getElementsByTagName("sz");
                for (let i = 0; i < tagName.length; i++) {
                  tagName[i].setAttribute("val", "22");
                }
              },
            },
            {
              extend: "pdf",
              title: "Audit Trail Report",
              messageTop: `From ${this.start_date} To ${this.end_date}`,
            },
          ],
          searching: false,
        })

I am using react with typescript. In my project, I have JSON data that contains the information of the faces detected on the video. Now I am creating bounding boxes on faces in the video, but I am facing one problem is that the bounding box information is for the video resolution 3840 x 2160, but my div has height is 500px and width is 800px and I am also using object-fill property as fill. Now when I am rendering the bounding boxes on video it displays out from the div.

How to do this so that bounding boxes display an accurate position on the div.

sample JSON data look like this:

[
  { "frame": 0, "x": 332, "y": 624, "width": 291, "height": 306 },
  { "frame": 1, "x": 1724, "y": 539, "width": 241, "height": 309 },
  { "frame": 2, "x": 2943, "y": 503, "width": 266, "height": 354 }

]

and my code:

<div ref={divRef}>
        <Video videoSource={source} ref={vRef}/>
        <svg id="svg" ref={sRef}>
        {!flag &&
            boundingBoxData.filter((x: IDataFrame) => currentFrame === x.frame).map((y: IData) => {
                return <BoundingBox x={y.x} y={y.y} height={y.height} width={y.width}/>
            })
        }
        </svg>
      </div>

I’m trying to compare an object that im receiving from a socket.io event, against an object thats in a file on my computer. I have most of it setup, i can get it to save to the file when it finds new data, however, the data seems to be string overlapping and im not sure why/how(see picture)

I tried reading this https://dmitripavlutin.com/how-to-compare-objects-in-javascript/ to see if it was an issue with reading the file, or actually comparing the two objects to see which item is new (which would be coming from the socket.io data)

        console.log(collection)
        const test = new Promise((resolve,reject) => {
            fs.access(collection, fs.F_OK, function (err) { //initial file access
                if (!err) {
                    fs.readFile(collection, 'utf8', (err, data) => { // read file for data,
                        if (err) throw err;
                        var dat = JSON.parse(data) 
                        var found = []
                          for(i in dat){
                              found.push(JSON.stringify(dat[i])) // This is the data that already exists, this is coming from the file.
                          }
                          
                          resolve(found)
                        // resolve
                    })
                }
            })
        })
            
    test.then(function(data){
        //console.log(data) // This is the data from above
        for(i in NFTCollection){ // NFTData that was just recieved from the https request (sent from socket.io)
            var item = JSON.stringify(NFTCollection[i]) // This is each new item
            var target = client.channels.cache
            //console.log(data)
            if(!data.includes(item)){ // This is where i have the issue, how do i compare the object to the object thats in the file?
                console.log("Found item! " + item) 
                var parsedItem = JSON.parse(item)
                data.push(JSON.parse(item))
            }
         
            //console.log(item)
        }
        fs.writeFileSync(collection,JSON.stringify(data)) // saves the data from, but it keeps overlapping? 
        })
    })
}) 

I commented in my code what each step is trying to accomplish, the issue is at the end. when im comparing if the items from the socket.io data, exist within the data that is the node.fs file.

I’m working with Readability library from Mozilla to show simplified content of articles and blogposts. But I would like to keep certain content based either on HTML tag or class, for example <time> elements.
How can I do that?