My purpose is click a button and show a div with some text, but there are a lot of buttons in the page.I need to recalculate top value for my component according to browser resize. I’m a newbie and I don’t know how I can do this. I do this (angular)

<div [top]="top">

in my ts:

click(event){
this.top=(event['Y']);
}

The problem is that when resize browser and click on the one button the div is not open when I want.
I think there is some formula: event.y-event.screenY but I don’t find
Anyone can help me?

Given an array of strings of the same letter type. Return a new array, which will differ in that the length of each element is equal to the average length of the elements of the previous array.

function averageLength(a) { 
  var arr=[];
  var avg=0;
  for (var i=0; i<a.length; ++i)
    avg+=a[i].length; 
  avg/=a.length;
  avg=Math.round(avg);
  for (var i=0; i<a.length; ++i)
  {
    var c='';
    for (var j=0; j<avg; ++j)
      c+=a[i][0];
    arr.push(c);  
  }
  return arr;
}

Whtat does this part mean c+=a[i][0]and where we use j ? Thanks!

When building my app with webpack to the ./dist folder, I get a lot of file whereas I’m expecting to have only one. My ./dist folder looks like:

657.main.js
657.main.js.LICENSE.txt
657.main.js.map
726.main.js
main.js
main.js.LICENSE.txt
main.js.map

When I’m expecting:

main.js

My webpack config is the following:

const path = require('path')

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry:  './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'foobar',
  }
}

When removing all other files except main.js I get errors.

Is there a way to build my app to only one file?

I am implementing cucumber page object model with webdriverio. I need to stop the execution when a step fails.

Feature:
Given user login with <username> and <password>--- first page
And user selects configuration ---second page
And user perform some action--- third page

When I give invalid credentials code is not stopping on the first step itself.
I am getting below error message on “And user perform some action”

Error: function timed out, ensure the promise resolves within 120000 milliseconds
    at Timeout.<anonymous> (C:[email protected]:60:20)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

I tried giving the option “bail: 1” but still the same result.
Appreciate any insights.
Thanks

I am building a futures market data table for my client using an external API, JavaScript and HTML. The data from the JSON response will need to be outputted into a table that matches the following screenshot.

The dynamic data in the table will need to be loaded in two parts, with a static part in between. A code example is below. The HTML details how it should look, but the JavaScript is what I currently have working. I have attached a second screenshot showing the current output I have locally on my computer.

How can I adjust my JavaScript and HTML code to display the dynamic commodity name and symbol with the static column headings below, then dynamic data rows below that.

I am using vanilla JS and do not want any jQuery solutions. Thanks.

const futures = (() => {
  const futuresTable = document.querySelector("[data-futures]");

  // Bail if data-futures attribute does not exist in DOM
  if (!futuresTable) {
    return;
  }

  const fetchData = () => {
    const apiKey = "";
    const request = `https://api.dtn.com/markets/symbols/%40S%60%23%23%203%2C%40C%60%23%23%203%2C%40W%60%23%23%203/quotes?priceFormat=decimal&type=A&symbolLimit=10&apikey=${apiKey}`;

    fetch(request)
      .then(response => response.json())
      .then((data) => displayData(data))
      .catch(error => {
        console.log(error);
      });
  }
  fetchData();

  const displayData = (data) => {
    // marketsFeed.classList.add("loaded");
    const commodities = data;

    const locale = 'en-CA';
    const dateOptions = {
      month: 'long',
      year: 'numeric',
    };

    for (let commodity of commodities) {
      console.log(commodity);
      let name = commodity.userDescription;
      let month = new Date(commodity.contractDate).toLocaleDateString("en-CA", {
        year: 'numeric',
        month: 'long'
      });
      let description = commodity.symbol.description;
      let symbol = commodity.actualSymbol;
      let last = commodity.last.number;
      let change = commodity.change.number;
      let high = commodity.high.number;
      let low = commodity.low.number;
      let settleDate = new Date(commodity.settleDate).toLocaleDateString("en-CA", {
        year: 'numeric',
        month: 'long',
        day: '2-digit'
      });
      let settlePrice = commodity.settlePrice.number;
      dataTable(name, month, description, symbol, last, change, high, low, settleDate, settlePrice);
    }
  }

  const dataTable = (name, month, description, symbol, last, change, high, low, settleDate, settlePrice) => {
    const dataRow = `
      <thead>
        <tr>
          <th colspan="9">${name}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Month</th>
          <th>Symbol</th>
          <th>Last</th>
          <th>Change</th>
          <th>High</th>
          <th>Low</th>
          <th>Settle Date</th>
          <th>Settle Price</th>
          <th>More</th>
        </tr>
        <tr>
          <td>${month}</td>
          <td>${symbol}</td>
          <td>${last}</td>
          <td>${change}</td>
          <td>${high}</td>
          <td>${low}</td>
          <td>${settleDate}</td>
          <td>${settlePrice}</td>
        </tr>
      </tbody>
    `;
    futuresTable.insertAdjacentHTML("beforeend", dataRow);
  }
})();

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  font-family: sans-serif;
}

table th,
table td {
  padding: 0.5rem;
  border: 1px solid #ccc;
}

table th {
  text-align: left;
}

<table data-futures>
  <tbody>
    <tr>
      <th colspan="9">
        <!-- Dynamic HTML table content -->
        <!-- commodity is returned from the JSON fetch response -->
        ${commodity.userDescription}<span>${commodity.symbol}</span>
      </th>
    </tr>
    <tr>
      <!-- Static HTML table content -->
      <th scope="col">Month</th>
      <th scope="col">Last</th>
      <th scope="col">Change</th>
      <th scope="col">High</th>
      <th scope="col">Low</th>
      <th scope="col">Settle Date</th>
      <th scope="col">Settle Price</th>
      <th scope="col">More</th>
    </tr>
    <tr>
      <!-- Dynamic HTML table content -->
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
      <td>October 27, 2021</td>
      <td>1265'2</td>
      <td>Icon</td>
    </tr>
    <tr>
      <!-- Dynamic HTML table content -->
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
      <td>October 27, 2021</td>
      <td>1265'2</td>
      <td>Icon</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="9">
        <!-- Dynamic HTML table content -->
        <!-- commodity is returned from the JSON fetch response -->
        ${commodity.userDescription}<span>${commodity.symbol}</span>
      </th>
    </tr>
    <tr>
      <!-- Static HTML table content -->
      <th scope="col">Month</th>
      <th scope="col">Last</th>
      <th scope="col">Change</th>
      <th scope="col">High</th>
      <th scope="col">Low</th>
      <th scope="col">Settle Date</th>
      <th scope="col">Settle Price</th>
      <th scope="col">More</th>
    </tr>
    <tr>
      <!-- Dynamic HTML table content -->
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
      <td>October 27, 2021</td>
      <td>1265'2</td>
      <td>Icon</td>
    </tr>
    <tr>
      <!-- Dynamic HTML table content -->
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
      <td>October 27, 2021</td>
      <td>1265'2</td>
      <td>Icon</td>
    </tr>
  </tbody>
</table>

I want to serialize an object o, which has a method called, let’s say, a. The object also holds a variable, which name is _a.

I now want to parse this object to a JSON string. But the JSON looks something like this:

{
    "_a": "",
    ...
}

Question

Is there a way, to comfortably remove/ replace the _ character(s) (or any character(s)).

What I have tried

1. The rename parameter of the JSON.stringify() method.
   1.1. Didn’t work, because you can only return altered values and no keys.
2. Iterating all keys of an object, deleting them and creating a new renamed key, and assigning the value (see code below).
   2.1. This works, but is not really readable and nasty, when having “sub-object”.

Object.keys(o).forEach(key => {
    Object.defineProperty(o, key.replace("_", ""),
        Object.getOwnPropertyDescriptor(o, key));
    delete o[key];
});

sorry about the vague title – just hard to explain the specifics in brief!

So, I’m new to coding and while trying to make a website from scratch I tried to create a JS function that would change the html page title and the css style of the navigation buttons’, depending on which webpage the user is on. I wrote the below function but only the last 5 “else if” elements work while the first two conditions aren’t being picked up. I was hoping someone could review my code and spot what’s going wrong here?

Unfortunately I can’t link to the website because I’m hosting it locally. I’ve tried clearing browser saved caches etc and I have tried different browsers but it’s not working either way.

The html/php webpage that contains the menu buttons and calls the JS function:

<body onload="stylemenu()";>
<!-- Main Menu -->
<div id="yad_SideMenu" class="sideMenu">
  <button href="javascript:void(0)" class="closebtn" onclick="closeMenu()">x</button><br><br>
  <button id="homebtn" class="navbtn" onclick="window.location.href='index.php';">  Home </button><br>
  <button id="themebtn" class="navbtn" onclick="window.location.href='themes.php';"> Reflection Themes</button><br>
  <button id="topicbtn" class="navbtn" onclick="window.location.href='topics.php';"> Reflection Topics</button><br>
  <button id="forumbtn" class="navbtn" onclick="window.location.href='forum.php';"> Discussion Forum </button><br>
  <button id="perkbtn" class="navbtn" onclick="window.location.href='perks.php';"> Perk Me Up! </button><br>
  <button id="grumblebtn" class="navbtn" onclick="window.location.href='grumble.php';"> Mumble a Grumble </button><br>
  <button id="aboutbtn" class="navbtn" onclick="window.location.href='about.php';"> About YaDunya </button>
</div>

JS Function:

function stylemenu() {
   if ((window.location.href.indexOf("index.php")) != -1){
    document.title = "YaDunya Home";
    document.getElementById("homebtn").className ="activebtn";
    }
   else if ((window.location.href.indexOf("themes")) != -1) {
    document.title = "YaDunya Themes";
    document.getElementById("themebtn").className = "activebtn";
   }
    else if ((window.location.href.indexOf("topics")) != -1){
      document.title = "YaDunya Topics";
      document.getElementById("topicbtn").className ="activebtn";
    }
    else if ((window.location.href.indexOf("forum")) != -1){
      document.title = "YaDunya Forum";
      document.getElementById("forumbtn").className ="activebtn";
    }
    else if ((window.location.href.indexOf("perk")) != -1){
      document.title = "YaDunya Perk Me Up!";
      document.getElementById("perkbtn").className ="activebtn";
    }
    else if ((window.location.href.indexOf("grumble")) != -1){
      document.title = "YaDunya Mumble a Grumble!";
      document.getElementById("grumblebtn").className ="activebtn";
    }
    else if ((window.location.href.indexOf("about")) != -1){
      document.title = "About YaDunya";
      document.getElementById("aboutbtn").className ="activebtn";
    }
}

CSS styling:

/* Style collapsing sidebar menu */
.sideMenu{
  height: 100%;
  width: 0;                                             /* To make sure the sidemenu is collapased when closed*/
  position: fixed;
  z-index: 1;                                           /* The higher z-index item will appear in front of the lower */
  top: 0;
  left: 0;
  background-image: url("graphics/sidemain.jpg");       /* Background Image dusk */
  background-repeat: no-repeat;                         /* Don't repeat background image */
  background-size: cover;
  overflow-x: hidden;                                   /* Hides anything that doesn't fit sidemenu */
  transition: 0.5s;
  padding-top:5vw;                                      /* All buttons except close button spaced from top */
}

/* Style sidebar menu buttons */
.sideMenu button {
  text-decoration: none;
  font-size: 1.5vw;
  display: block;                                       /* Makes the menu buttons appear below each other */
  transition: 0.3s;
  margin-bottom: 0px;
  cursor: pointer;                                      /* Makes a pointer hand appear over the button */
  margin-left: 0;
  padding: 2%;
  text-align: center;
  width: 100%;                                          /*Place the button full size so text is centered */
  border-radius: 1vw;
}

/* Menu buttons style for active page*/
.activebtn {
  background-image: url("graphics/sidelogin.jpg");                /* Background Image blue sky */
  background-repeat: no-repeat;                         /* Don't repeat background image */
  background-size: cover;
  color: white;
  border-style: outset;
  border-color: #5FB4FC;                                /*sky blue colour */
  border-width: .3vw;
  font-weight: bold;
  font-size:  2vw;
}

/* Non-active menu button style */
.navbtn {
  background-image: url("graphics/sidemain.jpg");                    /* Background Image dusk */
  background-repeat: no-repeat;                         /* Don't repeat background image */
  background-size: cover;
  font-weight: bold;
  box-shadow: 0 .5vw #685A79;                          /* purple colour same as border colour */
  border-color: #B199CD;                                /* dusky dark purple colour */
  border-style: outset;
  color: #554a63;                                       /* dusky dark purple colour */
}

/* Style non-active buttons on hover */
.navbtn:hover {
  font-weight: bold;
  color: #004600;                                       /* dark green color */
  border-color: #004600;                                /* dark green color */
  background-image: none;
  background-color: white;
  box-shadow: 0 .25vw #004600;                            /* dark green colour */
}

/* Menu buttons style for non-active pages when clicked */
.navbtn:active {
  transform: translateY(0.3vw);                           /* Move on the vertical axis to give click effect */
}

/* Style the sidemenu collapse close button */
.sideMenu .closebtn {
  position: absolute;                                   /* Takes the closebutton out of the document flow i.e. not impacted by other things in sidemenu */
  top: 0;                                               /* Place object at the very top without margin */
  right: 0vw;                                           /* Float  object completely right of the menu */
  font-size: 5vw;
  padding: 0px 0px;
  border: none;
  color:  #554a63;                                      /* dusky purple colour */
  background: none;
  text-align: right;                                    /* Move x to far right */
  margin-right: 0.5vw;                                  /* Small space between x and side of sidebar menu */
}

I’m using stripe checkout. I already collect some userdata and I don’t want customers to fill in their name twice. How can I autofill or disable the name field?

const session = await stripe.checkout.sessions.create({
        customer_email: !customerFound ? data.email : undefined,
        customer: customerFound ? customer.id : undefined,
        customer_update: customerFound
          ? {
              address: 'auto',
              name: 'auto',
            }
          : undefined,
        line_items: lineItems,
        client_reference_id: data.userId,
        payment_method_types: ['card', 'bancontact'],
        mode: 'payment',
        success_url: `${domain}/betaling-gelukt?session_id={CHECKOUT_SESSION_ID}`,
        cancel_url: `${domain}/betaling-mislukt`,
        locale: 'nl',
        billing_address_collection: 'auto',
        metadata: {
          reservation: data.reservatieId,
        },
      });

Hello all I am working on an assignment for my first semester in school and I am trying to get the message “Your information has been submitted to only be displayed if all 3 form inputs have inputs in them. Right now it mostly works but when I click validate after removing last name the message is still there. How do I get the message to disappear if one of the inputs is removed? Also not needed but would love to have a display of @ required for when the input is typed into email. Thanks!

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stephs.css">  
    <title>BodyBuilding</title>
</head>
<body class="stephsBody">
    <div id="topDisp">
    <nav>
        Index additional links to other pages: <br>
        Click here to go home:
        <a href="blank" target="_blank">
            <img class="stephsImg" id="house" width="100" src="img/house.png" alt="home icon">
        </a>
    </nav>
</div>
    <header class="sBstitle" >
    <h1>Body Building</h1>
</header>
<main class="mainContent">
    <hr>
    <hr>
    <h2>What is it?</h2>
    <div class="readableDecor">
    <p>Body building is a division of fitness that involves lifting weights and developing your muscles. The goal of a lot of bodybuilders is to alter their bodies and develop muscle mass to form parts of their body to be more defined or larger.</p>
    <br>
</div>
<img class="stephsImg" width="300px" src="img/womenDoingCrunches.jpeg" alt="Women doing crunches.">
    <h2>Why?</h2>
    <div class="readableDecor">
    <p>I got involved with bodybuilding during my journey to lose the initial weight I desired. Specifically, I used to be 210lbs. I did research to see what ways I could live a healthier lifestyle and change my body composition and came accross bodybuilding. I began to watch videos of different workout routines and began incoporating that into my schedule.</p>
</div> 
<img class="stephsImg" width="300px" src="img/womenOnLat.jpeg" alt="Women on latpulldown machine.">
    <hr>
    <div class="womenWorkingout">
     
    </div>
    <hr>
    
    <h2>Benefits</h2>
    <div id="benefits" class="readableDecor">
    <p>There are multiple benefits to bodybuilding, while the most obvious answer may seem to be the benefit of muscle definition there are many additional benefits as well.</p>
   <ul>
       <li>Improves Posture</li>
       <li>Better Sleep</li>
       <li>Gaining Bone Density</li>
       <li>Boosts metabilsom</li>
       <li>Improves Strength and Endurance</li>
       <li>Releases endorphins (the bodies "feel good" chemical)</li>
   </ul>
</div>
<img class="stephsImg" id="benefitsImg" width="300px" src="img/womenWithBall.jpeg" alt="Women with a medicine ball.">
<h2>Example of a Workout Schedule</h2>
    <div class="readableDecor">
    <table border="3">
        <tr>
            <th>
                Monday
            </th>
            <th>
                Tuesday
            </th>
            <th>
                Wednesday
            </th>
            <th>
                Thursday
            </th>
            <th>
                Friday
            </th>
            <th>
                Saturday
            </th>
            <th>
                Sunday
            </th>

        </tr>
        <tr>
            <td>Glute focused</td>
            <td>Back and Bicep focused</td>
            <td>Quad Focused</td>
            <td>Chest and Triceps focused</td>
            <td>Abdominal focus and strectching</td>
            <td>Rest day with a low intensity walk</td>
            <td>Rest day with recovery yoga</td>
        </tr>
    </table >
</div>
    <br>
    <form class="readableDecor id="f1" method="get"> 
        <legend>Sign up for your own <em>Workout Routine</em></legend>
            <div class="stephsTable">

        Email <input class="inputBox" type="email" placeholder="[email protected]"  id="t1"><span class="error" id="t1result"></span>

       <br><br> First Name: <input class="inputBox" type="text" placeholder="Sophie" id="t2"><span class="error" id="t2result"></span>

       <br><br>Last Name: <input class="inputBox" type="text" placeholder="Smith" id="t3"><span class="error" id="t3result"></span>
       <br>
       <br>
       <span id="infoValid"></span>

       <br><br><input type="button" id="btn1" value ="Validate" onclick = "validate()">
            </div>
    </fieldset>
    </form>
    </main>
    <div class="xDecor">
    <aside class="sideSection">
        <div class="workingOutPhotos">
            
            <img class="stephsImg" width="300px" src="img/womenSquatRack.jpeg" alt="Women squatting in squatrack.">
            <img class="stephsImg" width="300px" src="img/manLifting.jpeg" alt="man lifting a bar, working out.">
            <img class="stephsImg" width="300px" src="img/womenWorkingout.jpeg" alt="Women working out with ropes.">
        </div>
    </aside>
</div>
    <footer class="cpRight">
        <h2 class="cpRight">Stephanie Brandon &copy;</h2>
    </footer>
    <script type="text/javascript" src="validationForStephs.js"></script> 
</body>
</html>

JavaScript

//Function to validate form inputs
function validate(){

    var email = document.getElementById("t1").value;

    var fname = document.getElementById("t2").value;

    var lname = document.getElementById("t3").value;

    var isValid = true;

    if(email ==""){

        document.getElementById("t1result").innerHTML=" Email is required";

        isValid=false;

    }
    else{
        document.getElementById("t1result").innerHTML="";
    }

    if(fname ==""){

        document.getElementById("t2result").innerHTML=" First Name is required";

        isValid=false;

    }
    else{
        document.getElementById("t2result").innerHTML="";
    }

    if(lname ==""){

        document.getElementById("t3result").innerHTML=" Last name is required";

        isValid=false;

    }
    else{
        document.getElementById("t3result").innerHTML="";

            document.getElementById("infoValid").innerHTML="Your information has been submitted";
    }
    
   
}

CSS

#topDisp:hover{
    background-color: #A8ECE7;
    color: white ;
    text-shadow: 2px 1px black;
    transition: .5s;
}
#house:hover{
    background-color: #FDFF8F;
    border-radius: 30px;
}
#topDisp{
    color: white;
    padding: 10px;
    margin: 10px;
    background-color: #F4BEEE;
    border-radius: 25px;
    border:2px solid black;
    float: right;
}
.mainContent{
    float: left;
    padding: 10px;
    margin: 30px;
    background-color: #FDFF8F;
    width: 800px;
}
.stephsBody{
    background-color: #A8ECE7;
    color: black;
    text-shadow: 2px 2px #D47AE8;
    font-family: 'Lato', sans-serif;
     font-family: 'Montserrat', sans-serif;
     font-family: 'Raleway', sans-serif;
     font-family: 'Rubik', sans-serif;
 }
 .sBstitle{
     margin: 20px;
     padding: 10px;
background-color:#FDFF8F ;
border-radius: 20px;
 }
 .sideSection{
     width: 300px;
    padding: 10px;
    margin: 30px;
     float: right;
     background-color: aliceblue;

 }
 .xDecor{
    width: 250px;
    float: right;
     margin: 13px;
     padding: 10px;
     background-color: #FDFF8F;
 }
#stephsFooter{
    float:inherit;
    bottom: 0px;

 }
 .stephsImg{
     border-radius: 25px;
     padding: 10px;
     margin:5px;
     background-color: #D47AE8;
 }
 .readableDecor{
     background-color: white;
     text-shadow: none;
     border-radius: 15px;
 }
#pathToFrench{
    width: 580px;
}
#brain{
    float: right;
}
#langBen{
    width: 400px;
    float: right;
}
.cpRight{
    position: relative;
    text-align: end;
    width: 900px;
}
#benefits{
    width: 450px;
    float: left;
}
#benefitsImg{
    float: right;
}
.stephsTable{
    background-color: #F4BEEE;
color:black;
font-family: 'Roboto Mono', monospace;
}
.error{
    background-color: #FDFF8F;
    margin: 15px;
    border-radius: 20px;
}
#infoValid{
    background-color: #FDFF8F;
    margin: 15px;
    border-radius: 20px;
}

I’m working on a project that requires a csv file with stats actualized everyday (data.gov).

The goal would be to get the new csv file every day and use the new values in my script, like an API that updates every day could do.

I had the idea to convert it to JSON, to API… but I have no idea how to change the file daily. The process (to summarize) would be:

1. Get the new file
2. use the new values contains

Thanks for your help.

Here is my object:

const arr = [
  { name: 'Breaking Bad S01E07' },
  { name: 'Breaking Bad S01E06' },
  { name: 'Dexter S01E05' },
  { name: 'Dexter S01E02' },
  { name: 'Dexter S01E07' },
];

I want to extract just values and I used Object.values but it don’t change.

Here is my code:

val = Object.values(arr);
console.log(val);

But what I get is exactly the same without Object.values. It doesn’t return values. I returns keys + values.

I used map on it cuz it is an array of objects but it returns undefined!

const map = arr.map((x) => {
  Object.values(x);
});
console.log(map);

here is what I get:

[ undefined, undefined, undefined, undefined, undefined ]

i have an input type of range with 2 state values of input1 and input2. I want to make the left input unmovable and not pass when it hits the right input. How can i implement that using state values?

Below is my code. Thanks for anyone willing to help.

<div className='rate-range-container'>
    <input type='range' min='0' max='300000' step='10000' defaultValue='0' id='slider-1' onChange={this.rateMinHandler}></input>
    <input type='range' min='0' max='300000' step='10000' defaultValue='300000' id='slider-2' onChange={this.rateMaxHandler}></input>
</div>

I have an object array with the structure in the code below. I have a requirement that if array[i][j].ShipLoc equals the location to be removed that I remove the parent from the array, so I would be removing array[i] from the array which should also remove all of the children. For Example, If I wanted to use ShipLoc = “MALVESEQ” the records that would be removed would be array(1) and array(2). I know I could do nested for loops and loop through the values, but that doesn’t seem like the most optimized solution. Is there a better way to do this or should I be using nested for loops to accomplish this

array = [
          [
              {
                  "ShipLOC": "SANCO",
                  "attributes": [
                      {
                          "ucmlLat": "43.881431",
                          "ucmlLng": "-92.496931",
                         
                      }
                  ],
                  "totalLocationProductLength": 184,
                  "distanceFromKage": 159.39214641507564,
                 
              }
          ],
          [
              {
                  "ShipLOC": "MALVESEQ",
                  "attributes": [
                      {
                          "ucmlLat": "40.936476",
                          "ucmlLng": "-72.653116",
                          
                      }
                  ],
                  "totalLocationProductLength": 96,
                  "distanceFromKage": 1691.1958136706187,
                  
              }
          ],
          [
              {
                  "ShipLOC": "SANCO",
                  "attributes": [
                      {
                          "ucmlLat": "43.881431",
                          "ucmlLng": "-92.496931",
                          
                      }
                  ],
                  "totalLocationProductLength": 184,
                  "distanceFromKage": 159.39214641507564,
                  
              },
              {
                  "ShipLOC": "MALVESEQ",
                  "attributes": [
                      {
                          "ucmlLat": "40.936476",
                          "ucmlLng": "-72.653116",
                         
                      }
                  ],
                  "totalLocationProductLength": 96,
                  "distanceFromKage": 1691.1958136706187,
                  
              }
          ]
      ]

for (i = 0; i < document.querySelectorAll('span.movie-cast-title').length; i++)
{
  if (document.querySelectorAll('span.gcharacter')[i].innerText, == 'null') {
    continue;
  }
  data.actor.push({
    "@type": "PerformanceRole",
    "actor": {
      "@type": "Person",
      "name": document.querySelectorAll('span.movie-cast-title')[i].innerText,
      "url": document.querySelectorAll('a.movie-cast-url')[i].href,
    }
    "characterName": document.querySelectorAll('span.gcharacter')[i].innerText,
  });
}

how to skip queryselectorall does not exist or null
“characterName”: document.querySelectorAll(‘span.gcharacter’)[i].innerText

Okay so I was doing my research and I found something but in vue 2, which is quite interesting, however doesn’t seems to be possible for the vue 3(I tested it already). See the reference on here

However myself I was trying to do something “quite experimental”

So see below my “v-for”

                <span
                  v-for="model in sortIndex(colour.relatedModels)"
                  :key="model.id"
                  :style="{ color: colour.colourHex.hex }">
                    <pill-search
                    @pushUp="pushUp($event)"
                    :primColor="colour.primaryColour"
                    :secColor="colour.secondaryColour"
                    :slug="colour.slug"
                    :modelName="model.modelName"
                    ></pill-search>
                </span>

So I have this ” v-for=”model in sortIndex(colour.relatedModels)”

Where sortIndex() is a method that receive an object array and then I try to orderBy

    sortIndex(arrayModels){

   return _.orderBy(arrayModels, [arrayModels.index]);
    },

but actually don’t do anything

Important to say in that index, is nothing else more than a field inside relatedModels object, which is quite a fav range.

See an extract sample of my graph on here

[
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    {
      "colorName": "green",
      "slug": "green",
      "colourDescription": "",
      "colourHex": {
        "hex": "#C3E300"
      },
      "colourSerie": "XX2",
      "id": "58375424",
      "secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
      "relatedModels": [
        {
          "id": "48355512",
          "index": "6",
          "modelName": "modelFour"
        },
        {
          "id": "48354230",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355529",
          "index": "7",
          "modelName": "modelThree"
        }
      ]
    },
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    ...
  ]

So any help or advice of a different approach of this will be very helpful