Category: javascript

Previously I simply input the command vTimereq=0 into the console and that seem to do the trick. However now when I try it nothing happens and the timer continues to run. I have tried a few things such as document.getElementById(‘time’).value = “0”; but that command also seems to be invalid. Any help would be greatly appreciated. This is the function that appears when I try to edit 00:04:26

I am trying do arithmetic operation using radio button (just an experiment)

browser returns value NaN

let num1 = parseInt(document.querySelectorAll('#number1:checked'));
let num2 = parseInt(document.querySelectorAll('#number2:checked'));

function addTambah() {
  result = num1 + num2;
  alert(result);
}

<p>number : </p>
<input type="radio" name="number1" id="number11" value="1">
<label for="radio">1</label>
<input type="radio" name="number1" id="number12" value="2">
<label for="radio">2</label>
<p> number 2 : </p>
<input type="radio" name="number2" id="number21" value="1">
<label for="radio">1</label>
<input type="radio" name="number2" id="number22" value="2">
<label for="radio">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

I’m pretty new to React. I’m trying to create a private route handler with the new release of react-router-dom v6, so I need to verify whether the user is authenticated or not in order to know if return the protected route or redirect the user to the login route.

import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { isLogged } from '../helpers/isLogged';

export const PrivateRoute = async ({children}) => {

  // Check if the user is authenticated 
  const userData = useSelector( store => store.user.object);
  const logged = await isLogged(userData);

  return logged 
  ? children
  : <Navigate to="/login" />;
}

The thing is i’m getting some errors due to this, but mainly the object promise one.

What’s going on? Thanks in advance!

I’ve copied code from a course I’m taking and it’s throwing an error. The message reads “Expected a JSON object, array, or literal” and I’m not entirely sure what I’ve done wrong since I’m new to using API’s (fetch). Here is the screenshot from VSCode. https://www.screencast.com/t/D5oreexoCKq.

In addition to that, this is the error that I’m getting in Chrome. https://www.screencast.com/t/Je4crxQQ4sz6

file —–> data.json

const json = {
    "books": [
        {
            "title": "Learn to Code",
            "author": "John Smith",
            "isbn": "324-23243"
        }, {
            "title": "The Adventures JSON",
            "author": "Jason Jones",
            "isbn": "3324-2-444"
        }, {
            "title": "New Objects",
            "author": "Jane Doe",
            "isbn": "2343-234-2433"
        }
    ]
}

file —–> app.js

JSON.books.forEach(function(val){
  console.log(val);
})

I have a searchbar, 2 divs that will display the id and brand name, and 2 checkboxes.

I want to retrieve brand data according to search, if I search for “Nike” then the brand-id and brand-name divs will display the brand name and id based on the checkbox below. And the checkbox below it is ticked. I’ve coded like below, but when I debug to get the brand name it merges “nikebrand”, so when I do a conditioning it doesn’t work

$('.search-brand').on('keyup keypress',function(){
  const brandFilterEl = $(".filter-item .filter-label")
  
  brandFilterEl.each(function(){
    const brandValues = brandFilterEl.text().toLocaleLowerCase()
    console.log(brandValues)
    
    if($('.search-brand').val() === brandValues){
      const valFilterBrand = brandFilterEl.siblings().attr('value')
      console.log(valFilterBrand)
      $('.brand-id').text(valFilterBrand)
      $('.brand-name').text(brandValues)
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="search-brand" style="margin-bottom:20px;">

<div class="brand-id"></div>
<div class="brand-name"></div>

<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
   <input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span>
</li>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
  <input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span>
</li>

my toggle button in javascript seems to work fine in turning on lightmode from default darkmode by running a function that changes the CSS. However, when I flip the button again, it does not change. This is somewhat expected since there’s no reason it would change. How would I go about switching it back?

Button HTML:

<label for="ID_HERE" class="toggle-switchy" >
    <input checked type="checkbox" id="ID_HERE">
        <span class="toggle" onclick="lightmode();"></span>
      <span class="switch"></span>
    </span>
</label>

JS for button:

function lightmode() {
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = 'white';
  }
  /*const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.backgroundImage = '';
  } */

  const paraChanges = document.querySelectorAll('.paragraph');
  for (let i = 0; i < paraChanges.length; i++) {
    paraChanges[i].style.color = 'black';
  }
  const topTitleChanges = document.querySelectorAll('.toptitle');
  for (let i = 0; i < topTitleChanges.length; i++) {
    topTitleChanges[i].style.color = 'black';
  }
  const alphabetSChanges = document.querySelectorAll('.AlphabetS');
  for (let i = 0; i < alphabetSChanges.length; i++) {
    alphabetSChanges[i].style.color = 'black';
  }
  const arowanaContainerChanges = document.querySelectorAll('.arowanacontainer');
  for (let i = 0; i < arowanaContainerChanges.length; i++) {
    arowanaContainerChanges[i].style.background = 'white';
  }
  const fishContainerChanges = document.querySelectorAll('.fishcontainer');
  for (let i = 0; i < fishContainerChanges.length; i++) {
    fishContainerChanges[i].style.background = 'white';
  }
  const articleContainerChanges = document.querySelectorAll('.articlescontainer');
  for (let i = 0; i < articleContainerChanges.length; i++) {
    articleContainerChanges[i].style.background = 'white';
  }
  const sideTextChanges = document.querySelectorAll('.sidetext');
  for (let i = 0; i < sideTextChanges.length; i++) {
    sideTextChanges[i].style.color = 'black';
  }
  const topMenuChanges = document.querySelectorAll('.topmenu');
  for (let i = 0; i < topMenuChanges.length; i++) {
    topMenuChanges[i].style.background = '#fff2f2';
  }
  const h3Changes = document.querySelectorAll('h3');
  for (let i = 0; i < h3Changes.length; i++) {
    h3Changes[i].style.background = '#fff2f2';
  }
  const articlePageChanges = document.querySelectorAll('.articlepage');
  for (let i = 0; i < articlePageChanges.length; i++) {
    articlePageChanges[i].style.color = 'black';
  }
  const articleTeaserChanges = document.querySelectorAll('.articleteaser');
  for (let i = 0; i < articleTeaserChanges.length; i++) {
    articleTeaserChanges[i].style.color = 'black';
  }
  /*const buttonTextChanges = document.querySelectorAll('.button_text');
  for (let i = 0; i < buttonTextChanges.length; i++) {
    buttonTextChanges[i].style.color = '#0C0C0C';*/
  const box2Changes = document.querySelectorAll('.box2');
  for (let i = 0; i < box2Changes.length; i++) {
    box2Changes[i].style.color = 'rgb(245, 245, 245)';
  }
  const box3Changes = document.querySelectorAll('.box3');
  for (let i = 0; i < box3Changes.length; i++) {
    box3Changes[i].style.color = 'rgb(245, 245, 245)';
  }
  const projectPhoto1Changes = document.querySelectorAll('.projectphoto1');
  for (let i = 0; i < projectPhoto1Changes.length; i++) {
    projectPhoto1Changes[i].style.backgroundImage = 'linear-gradient(to bottom, #Fdfcfa 50%, lightgrey 50%)';
  }
  const section1Changes = document.querySelectorAll('.section1');
  for (let i = 0; i < section1Changes.length; i++) {
    section1Changes[i].style.backgroundColor = '#fff2f2';
  }
  const section1textChanges = document.querySelectorAll('.section1text');
  for (let i = 0; i < section1textChanges.length; i++) {
    section1textChanges[i].style.color = 'black';
  }
  const section1smalltextChanges = document.querySelectorAll('.section1smalltext');
  for (let i = 0; i < section1smalltextChanges.length; i++) {
    section1smalltextChanges[i].style.color = 'black';
  }
  const button_textChanges = document.querySelectorAll('.button_text');
  for (let i = 0; i < button_textChanges.length; i++) {
    button_textChanges[i].style.color = 'black';
  }
  const polygonfrontChanges = document.querySelectorAll('.polygonfront');
  for (let i = 0; i < polygonfrontChanges.length; i++) {
    polygonfrontChanges[i].style.fill = '#fff2f2';
  }
  const bgChanges = document.querySelectorAll('.bg');
  for (let i = 0; i < bgChanges.length; i++) {
    bgChanges[i].style.backgroundImage = 'url(".jpg")';
  }
  const bg2Changes = document.querySelectorAll('.bg2');
  for (let i = 0; i < bg2Changes.length; i++) {
    bg2Changes[i].style.backgroundImage = 'url(".jpg")';
  }
  const bg3Changes = document.querySelectorAll('.bg3');
  for (let i = 0; i < bg3Changes.length; i++) {
    bg3Changes[i].style.backgroundImage = 'url(".jpg")';
  }
  
}

TechWorld is a technology training center, providing training to their clients on various technologies.They need to automate the process of allocating instructors for different courses. An instructor is identified by his/her name and may be skilled in multiple technologies. Assume that the skills of an instructor are stored in an array.

Class Diagram:
enter image description here

• Instructor Class

Note:

The methods implementing the below requirements should return True for valid cases and False for invalid cases.

Assume “experience” is a positive integer.

Case sensitive string comparisons should be done wherever required.

• Parameterized Constructor – Instructor(string, float, int, string[])

It should initialize the member variables ‘instructorName’, ‘avgFeedback’, ‘experience’ and ‘instructorSkill’ with appropriate values.

• ValidateEligibility() method

The method should check the eligibility criteria as given below:

An instructor with more than 3 years of experience should have an average feedback greater than or equal to 4.5.

An instructor with less than or equal to 3 years of experience should have an average feedback greater than or equal to 4.

• CheckSkill(string technology) method

This method should accept a technology name as input parameter and check whether the instructor possesses that skill.

For checking validity of instructor call ValidateEligibilty() method

Please help me out with this:

I was making a react app for a rock-paper-scissors game where I was trying to evaluate whether the move made the user or bot the winner by comparing the values through a function written in check.js . But it seems the answer is always undefined. For understanding this issue, I tried to just compare an instance as you will be able to see below in App.js ‘s useEffect Hook. It only compares correctly when the state-variables are empty ( initial state ). The reference to the code section is given below where inside “useEffect” hook, the console.log should have printed draw but it returns nothing. The link to the sandbox project is given at the end as well.

    import { useEffect, useState } from 'react';
import './App.css';
import './App.css'
import Botchoice from './Components/Botchoice';
import Decision from './Components/Decision';
import Navbar from './Components/Navbar';
import Results from './Components/Results';
import Userchoice from './Components/Userchoice';
import game from './check'

function App() {

  let [userMove,setUserMove] = useState("");
  let [botMove,setBotMove] = useState("");
  let [loadRes, setLoadRes] = useState("");
  let [gameState,setGameState] = useState("");


  useEffect(() => {
          setTimeout(() => {
            console.log(userMove, botMove);
            
            if (userMove === "scizzor" && botMove === "scizzor") {
              console.log("draw");
            }

          }, 1000);
      },[userMove,botMove])


  const getUserMove = (move) => {

    setUserMove(()=> userMove = move);
    console.log("App comp: usermove --> " + userMove);

  }

  const getBotMove = (move) => {

    setBotMove(()=> botMove = move);
    console.log("App comp: botmove --> " + botMove);

  }

  const getLoadRes = (value) => {

      setLoadRes(()=> loadRes = value )
      console.log("updated state: " + loadRes);

  }

 
  
  return (
    <div className="App">
      
      <Navbar/>
      <Userchoice getUserMove={getUserMove} />
      <Botchoice getBotMove={getBotMove} />
      <Decision getLoadRes={getLoadRes} />

      {loadRes === "show" 
        ? <Results userMove={userMove} botMove={botMove} />
        : null
      }



    </div>
  );
}

export default App;

I have also attached the screenshot of the console inorder to show the values of userMove and botMove and yet how the if condition inside useEffect is unable to compare these values.

Screenshot of the console

Please help me out with this as I’m stuck as to what is causing this issue. Thanks

Here is the link to my sandbox of the rock-paper-scissors game

”how to make the dda line using only the :* and # icons. please answer please.
so I want to make my program on console.log view like this:
O……….
.O………
..O……..
…O…….
….O……
…..O…..
……O….
…….O…
……..O..
………O.
……….O

and this is like a diagonal but according to the name of my function dda where point a = 2.1 and point b = 8.5

you can immediately see the implementation of this in java form but only want it in javascript form

https://ideone.com/Jx3DaO
”

function dda(x1, y1, x2, y2) {
    const
        dx = x2 - x1,
        dy = y2 - y1,
        step = Math.abs(dx) > Math.abs(dy)
            ? Math.abs(dx)
            : Math.abs(dy),
        x_inc = dx / step,
        y_inc = dy / step,
        result = [];

    for (let k = 0, x = x1, y = y1; k < step; k++) {
        result.push([ Math.round(x), Math.round(y)]);
        x += x_inc;
        y += y_inc;
    }

    return result;
}

console.log(dda(2, 1, 8, 5));

this is my tables look like

in my models this is how I do it but seems not working and I don’t know why:

public function departments(){
    return $this->hasOneThrough(
        subjectlist::class,
        department::class,
        'id',
        'course_id',
        'id',
        'id'

    );

the ouput when I try to user hasOneThrough:

         {
        "id": 1,
        "department_name": "Business",
        "head": "John smith",
        "email": "[email protected]",
        "contact_number": "09300282103",
        "created_at": null,
        "updated_at": null,
          "subject_list": {
          "id": 1,
          "course_id": 1,
          "subject_code": "Math1",
          "description": "math test",
          "year_type": 1,
          "price": "200.00",
          "units": "5.00",
          "created_at": null,
          "updated_at": null,
          "laravel_through_key": 1
         }
    
    },

I wan’t the output should be like this please help me how to do it:

     {
    "id": 1,
    "department_name": "Business",
    "head": "John smith",
    "email": "[email protected]",
    "contact_number": "09300282103",
    "created_at": null,
    "updated_at": null,
       "subject_list": {
       "id": 1,
       "course_id": 1,
       "subject_code": "Math1",
       "description": "math test",
       "year_type": 1,
       "price": "200.00",
       "units": "5.00",
       "created_at": null,
       "updated_at": null,
       "laravel_through_key": 1
      },
      department {
        "id" : 1,
        "department_name" : "ComputerScience"
      }
    },

This is a chrome extension that supposes to change the look of a website to dark, I am storing the state of the checkbox from the popup then retrieving that in the background to to update the tab, the information seems to get stored but could not update the tab accordingly, I don’t know what I am doing wrong here

popup.js

      function save_options() {
    
    var chekboxState = document.getElementById('toggle_button').checked;
    chrome.storage.sync.set({
      darkMode: chekboxState
    }, function() {
      // Update status to let user know options were saved.
      console.log('chekc box is ' + chekboxState);
      
    });
  }
  
  
  // Restores select box and checkbox state using the preferences
  function restore_options() {
    chrome.storage.sync.get({darkMode: 'true',}, 
    function(item) {
        console.log('chekc box is ' + item.darkMode);
        document.getElementById('toggle_button').checked = item.darkMode;
       
    });
  }

  document.addEventListener('DOMContentLoaded', function () {

    restore_options();
    document.getElementById('toggle_button').addEventListener('change',save_options);
  });

background.js

chrome.tabs.onUpdated.addListener(function(tabId, info,tab) {
   
    if (changeState()){
        chrome.scripting.insertCSS({
            files: ['newstyle.css'],
            target: { tabId: tab.id }
        });
        console.log('style was put back');
    }else {
        chrome.scripting.removeCSS({
            files: ['newstyle.css'],
            target: { tabId: tab.id }
            
        });
        console.log('style was removed');
    }

    //  }   
   
});


function changeState(){
    
    chrome.storage.sync.get(['darkMode'], function(result) {
        console.log('Value currently is ' + result.darkMode);
        console.log('popup opened');
        if (result.darkMode == true){
            console.log('newstyle.css');
            // return 'newstyle.css';
            return true;
        }
        else {
            console.log('nostyle.css');
            // return 'nostyle.css';
            return false;
        }
        
    });

}

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({
        darkMode: true
      }, function() {
        // Update status to let user know options were saved.
        console.log('chekc box is true on instalations');
        
      });
});

I tried

await page.click("div:contains('text')")

but it doesn’t work.

Is it not possible to do so? Would I somehow have to grab the wrapper/”parent” of the HTML first, then call a click on it?

Let’s say I am trying to state a range between two integers, i.e. 0 and 3. Anything that is lower than this range will loop back from the upper end, and vice versa. It is kind of like how integers work in other languages.

For example (range 0 to 3):

cap(-4) // returns 0
cap(-3) // returns 1
cap(-2) // returns 2
cap(-1) // returns 3
cap(0)  // returns 0
cap(1)  // returns 1
cap(2)  // returns 2
cap(3)  // returns 3
cap(4)  // returns 0
cap(5)  // returns 1
cap(6)  // returns 2
cap(7)  // returns 3
cap(8)  // returns 0

The best working code that I could make is this:

const cap = (value, low, high) =>  value < low ? high - (high - value) % (high - low + 1) : (value - low) % (high - low + 1) + low

Is there a more elegant way to do this? I feel like there’s a way to do this without using conditional.

   jsonData = [
      {
        isMaster: false,
        selected: false,
        ID: 0,
        "Profile Type": "Line of Business",
        Risk: [
          {
            isMaster: false,
            selected: false,
            ID: 0.1,
            "Overall Control Effectiveness": "Not Assessed",
            "Rating": "0",
            Control: [
              {
                isMaster: false,
                selected: false,
                ID: 0.2,
                "Control Classification": "Key",
                "Control Effectiveness Rating": "Partially Effective"
              },
              {
                isMaster: false,
                selected: false,
                ID: 0.21,
                "Control Classification": "Compensating",
                "Control Effectiveness Rating": "Partially Effective"
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 0.11,
            "Overall Control Effectiveness":"Insignificant",
            "Rating": "0",
              Control: [
                {
                  isMaster: false,
                  selected: false,
                  ID: 0.12,
                  "Control Classification": "Arrangement",
                  "Control Effectiveness Rating": "Partially Effective"
                },
                {
                  isMaster: false,
                  selected: false,
                  ID: 0.13,
                  "Control Classification": "Compensating",
                  "Control Effectiveness Rating": "Effective"
                }
              ]
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 1,
        "Profile Type": "Business Unit (BU) / Support Unit (SU)",
        Risk: [
          {
            isMaster: false,
            selected: false,
            ID: 1.1,
            "Overall Control Effectiveness": "Low",
            "Rating": "2",
            Control: [
              {
                isMaster: false,
                selected: false,
                ID: 1.2,
                "Control Classification": "key",
                "Control Effectiveness Rating": "Partially Effective"
              },
              {
                isMaster: false,
                selected: false,
                ID: 1.21,
                "Control Classification": "Arrangement",
                "Control Effectiveness Rating": "Partially Effective"
              },
              {
                isMaster: false,
                selected: false,
                ID: 1.22,
                "Control Classification": "key",
                "Control Effectiveness Rating": "Effective"
              },
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 1.11,
            "Overall Control Effectiveness": "Medium",
            "Rating": "5",
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 2,
        Name: "0940375C025200FAA38ED98A F9DE03D61ADAB727BA8C26D4",
        "Business Profile Owner": "Susheel",
        Folder: "CBA / Audit",
        "Profile Type": "Business Profile Instances",
        Risk: [
          {
            isMaster: false,
            selected: false,
            ID: 2.1,
            "Overall Control Effectiveness": "High",
            "Rating": "5",
            Control: [
              {
                isMaster: false,
                selected: false,
                ID: 2.2,
                "Control Classification": "Arrangement",
                "Control Effectiveness Rating": "Not Determined"
              },
              {
                isMaster: false,
                selected: false,
                ID: 2.21,
                "Control Classification": "Arrangement",
                "Control Effectiveness Rating": "Not Tested"
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 2.11,
            "Overall Control Effectiveness": "very High",
            "Rating": "0",
          }
        ]
      },
      {
        isMaster: false,
        selected: false,
        ID: 3,
        "Profile Type": "Supplier",
        Risk: [
          {
            isMaster: false,
            selected: false,
            ID: 3.1,
            "Overall Control Effectiveness":"Lindgren",
              "Rating": "0",
            Control: [
              {
                isMaster: false,
                selected: false,
                ID: 3.2,
                "Control Classification": "Arrangement",
                "Control Effectiveness Rating": "Not Tested"
              },
              {
                isMaster: false,
                selected: false,
                ID: 3.21,
                "Control Classification": "Arrangement",
                "Control Effectiveness Rating": "Not Tested"
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 3.11,
            "Overall Control Effectiveness": "Lindgren",
            "Rating": "3",
          }
        ]
      },
    ];

Multi-select values are of the following types.

selection = [
         {
            name: "High",
            type: "Risk",
            column: "Overall Control Effectiveness"
        },
        {
           name: "5",
           type: "Risk",
           column: "Rating"
      }
    ]

 selection1 = [
             {
                name: "key",
                type: "Control",
                column: "Control Classification"
            },
            {
               name: "Not Assessed",
               type: "Risk",
               column: "Overall Control Effectiveness"
          }
        ]

 selection2 = [
             {
                name: "key",
                type: "Control",
                column: "Control Classification"
            },
            {
               name: "Not Assessed",
               type: "Risk",
               column: "Overall Control Effectiveness"
          },{
               name: "0",
               type: "Risk",
               column: "Rating"
          }
        ]

these selections are of type Dynamic.

if the selections of having only the same types (eg: type=”Risk”) we need to print all matching values.
nothing but || (OR operation)

if the selections of having the different types (eg: type=”Risk” , type=”Control”) we need to print satisfying values as nothing but && (AND operation).

if selection2 is selected then the following will be the output.

 {
    isMaster: false,
    selected: false,
    ID: 0,
    "Profile Type": "Line of Business",
    Risk: [
      {
        isMaster: false,
        selected: false,
        ID: 0.1,
        "Overall Control Effectiveness": "Not Assessed",
        "Rating": "0",
        Control: [
          {
            isMaster: false,
            selected: false,
            ID: 0.2,
            "Control Classification": "Key",
            "Control Effectiveness Rating": "Partially Effective"
          }
        ]
       }
     ]
   }

       const jsonData = [
          {
            isMaster: false,
            selected: false,
            ID: 0,
            "Profile Type": "Line of Business",
            Risk: [
              {
                isMaster: false,
                selected: false,
                ID: 0.1,
                "Overall Control Effectiveness": "Not Assessed",
                "Rating": "0",
                Control: [
                  {
                    isMaster: false,
                    selected: false,
                    ID: 0.2,
                    "Control Classification": "Key",
                    "Control Effectiveness Rating": "Partially Effective"
                  },
                  {
                    isMaster: false,
                    selected: false,
                    ID: 0.21,
                    "Control Classification": "Compensating",
                    "Control Effectiveness Rating": "Partially Effective"
                  }
                ]
              },
              {
                isMaster: false,
                selected: false,
                ID: 0.11,
                "Overall Control Effectiveness":"Insignificant",
                "Rating": "0",
                  Control: [
                    {
                      isMaster: false,
                      selected: false,
                      ID: 0.12,
                      "Control Classification": "Arrangement",
                      "Control Effectiveness Rating": "Partially Effective"
                    },
                    {
                      isMaster: false,
                      selected: false,
                      ID: 0.13,
                      "Control Classification": "Compensating",
                      "Control Effectiveness Rating": "Effective"
                    }
                  ]
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 1,
            "Profile Type": "Business Unit (BU) / Support Unit (SU)",
            Risk: [
              {
                isMaster: false,
                selected: false,
                ID: 1.1,
                "Overall Control Effectiveness": "Low",
                "Rating": "2",
                Control: [
                  {
                    isMaster: false,
                    selected: false,
                    ID: 1.2,
                    "Control Classification": "key",
                    "Control Effectiveness Rating": "Partially Effective"
                  },
                  {
                    isMaster: false,
                    selected: false,
                    ID: 1.21,
                    "Control Classification": "Arrangement",
                    "Control Effectiveness Rating": "Partially Effective"
                  },
                  {
                    isMaster: false,
                    selected: false,
                    ID: 1.22,
                    "Control Classification": "key",
                    "Control Effectiveness Rating": "Effective"
                  },
                ]
              },
              {
                isMaster: false,
                selected: false,
                ID: 1.11,
                "Overall Control Effectiveness": "Medium",
                "Rating": "5",
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 2,
            Name: "0940375C025200FAA38ED98A F9DE03D61ADAB727BA8C26D4",
            "Business Profile Owner": "Susheel",
            Folder: "CBA / Audit",
            "Profile Type": "Business Profile Instances",
            Risk: [
              {
                isMaster: false,
                selected: false,
                ID: 2.1,
                "Overall Control Effectiveness": "High",
                "Rating": "5",
                Control: [
                  {
                    isMaster: false,
                    selected: false,
                    ID: 2.2,
                    "Control Classification": "Arrangement",
                    "Control Effectiveness Rating": "Not Determined"
                  },
                  {
                    isMaster: false,
                    selected: false,
                    ID: 2.21,
                    "Control Classification": "Arrangement",
                    "Control Effectiveness Rating": "Not Tested"
                  }
                ]
              },
              {
                isMaster: false,
                selected: false,
                ID: 2.11,
                "Overall Control Effectiveness": "very High",
                "Rating": "0",
              }
            ]
          },
          {
            isMaster: false,
            selected: false,
            ID: 3,
            "Profile Type": "Supplier",
            Risk: [
              {
                isMaster: false,
                selected: false,
                ID: 3.1,
                "Overall Control Effectiveness":"Lindgren",
                  "Rating": "0",
                Control: [
                  {
                    isMaster: false,
                    selected: false,
                    ID: 3.2,
                    "Control Classification": "Arrangement",
                    "Control Effectiveness Rating": "Not Tested"
                  },
                  {
                    isMaster: false,
                    selected: false,
                    ID: 3.21,
                    "Control Classification": "Arrangement",
                    "Control Effectiveness Rating": "Not Tested"
                  }
                ]
              },
              {
                isMaster: false,
                selected: false,
                ID: 3.11,
                "Overall Control Effectiveness": "Lindgren",
                "Rating": "3",
              }
            ]
          },
        ];


const selection2 = [
                 {
                    name: "key",
                    type: "Control",
                    column: "Control Classification"
                },
                {
                   name: "Not Assessed",
                   type: "Risk",
                   column: "Overall Control Effectiveness"
              },{
                   name: "0",
                   type: "Risk",
                   column: "Rating"
              }
            ];

function isArray(val) {
  return Array.isArray(val);
}


function isObject(val) {
  return val && typeof val === 'object' && val.constructor === Object;
}
 
 function onFilter(selection2) {
   let finalOutput = [];
   let selectionType = [];
   
   selection2.map(function items(i) {
       selectionType.push(i.type)
   })
      let templist = jsonData;


     templist = templist.filter((item) => {



      if (isObject(item)) {
        objectLoop(item);
        function objectLoop(item) {
          Object.keys(item).forEach((key) => {

            selection2.map(function items(i) {
               if(items[key] == i.column) {
               

                }
            })
              


            if (isObject(item[key])) {
              objectLoop(item[key]);
            }
            if (isArray(item[key])) {
              item[key].map((subItems) => {
                if (isObject(subItems)) {
                  objectLoop(subItems);
                }
              });
            }
          });
        }
      }
      return item;
    });
    
    console.log(templist)
  }
  
onFilter(selection2)

   
            
            

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I am trying to make a filter/search table and I am using the JavaScript from this site.

Here’s the script:

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

You can change which column to be used as the filter by changing the index in “td = tr[i].getElementsByTagName(“td”)[0];”

0 means the first column will be used, 1 means the second column, etc.

Using the same script, how can I use multiple columns to be the filter?