Category: javascript

Category Added in a WPeMatico Campaign

How to get a index of class onhover?

<div class="test" ></div><div class="test" ></div><div class="test" ></div><div class="test" ></div>

**For example, if i hover on 1stclass document.getElementbyClassName(‘test’)[0].
I should get index value is 0.

only Javascript please!!**

Make JSON.parse work for array of objects with quotation mark

I am trying to store an array of object as string and restore it later. However, some elements in the objects are string and they may have ‘ or “. This causes an issue when I try to convert back and forth this array of objects to string with JSON.parse. Is there an standard way to resolve this issue?

 vars = [{'date': '04-29', 'x': 'this "x" ', 'y': '<p><img src="data:image/jpeg;base64,/9j/4AADEQA/ANmAA9KdX/txX0/2Q=="></p>'}]

Différence between only one state for variables or state for every one in react

If i’m having 3 variables to handle with useState in react is doing this:


const [ user , setUser ] = useState({
name : '',
phone : '',
age : ''
})
setUser({...user, phone: value})

Or this :


const [ phone , setPhone] = useState('')
const [ name , setPName] = useState('')
const [ age , setAge] = useState('')

setPhone(value)

Is there any différence in term of performance ?
Which approach is more appropriate ?

Change a agSelectCellEditor drop down value using selenium

I am trying to access values in a drop down which when I inspect, nothing is been in element inspector. I confirmed with developer what type of drop down is that he said agSelectCellEditor drop down. We then tried using following Javascript code in console which was changing the drop down values.

var x=document.querySelector("div[aria-colindex='3'][class='ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value ag-cell-wrap-text ag-cell-focus']
x.textContent="Custodian"

So that changed the drop down value from default value to Custodian.
Now I tried to inject this code in JavaScriptExecutor like this.

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("var x=document.querySelector("div[aria-colindex='3'][class='ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value ag-cell-wrap-text ag-cell-focus']")"
+ "x.textContent="Custodian";");

It is giving me exception
org.openqa.selenium.JavascriptException: javascript error: Unexpected identifier

Please help me automating this using Selenium. How to deal with this dropdown?

Show two different size of image when url is pasted in the textbox

I’m unable to resize the image. Here’s my code

document.getElementById('btn1').addEventListener('click', function(){
  document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'"?width=400&height=400&fit=crop"/>';
});
<!DOCTYPE html>
<html>
<body>

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Show Image" id="btn1" />
</form>
<div id="photo"></div>

</body>
</html>

What I want is when I pasted the url the image will be displayed on 2 different divs and will resize automatically. However, I need two different size of the image. First div size would be the number1 and the second div is number2. I don’t know how to put this size on the javascript code.

  1. ?width=400&height=400&fit=crop
  2. ?width=800&height=450&fit=crop

How can I do that?

How the best and fast way to send multiple data into google spreadsheet?

I want to send multiple data using chrome extension into Google spreadsheet. I tried using loop but sometimes it’s replacing the data in the current process. I tried using async await but i guess i didn’t understand how it works so it didn’t give the result i wanted. I want to try doing a single batch input but i don’t know how. Here’s my Javascript code

async function sendmydata(name,num,tipe){
  const scriptURL = myurl;
  const form = new FormData();
    form.append("sheetname",name);
    form.append("id",num);
    form.append("type",tipe);

    await fetch(scriptURL, { method: 'POST', body: form})
      .then(response => console.log('skss'))
      .catch(error => console.log('fld'))
}

$('#sendbtn').click(function (e) { 
  e.preventDefault();
  var urlParams = new URLSearchParams(window.location.search);
  name = $('span.account-name').text();
  tipe = urlParams.get('type');
  vnum = $('span.orderid');
  stp = $('.status');
  jml = vnum.size();
  
  switch(tipe) {
    case 'completed':
      tipe = 'FINISH';
      break;
    case 'cancelled':
      tipe = 'FAILED';
      break;
  }

  switch (name) {
    case 'shop1':
      name = 'GH';
      break;
    case 'shop2':
      name = 'RH';
      break;
    case 'shop3':
      name = 'SL';
      break; 
  }

/* i also tried this but it's slow */
 /* (function myLoop(i) {
    setTimeout(function() {
      nresi = $('span.orderid').eq(i).text().substring(12);
      const form = new FormData();
      form.append("id",num);
      form.append("type",tipe);
      form.append("sheetname",name);
      
      //console.log(num+', '+tipe+', '+name);
      fetch(scriptURL, { method: 'POST', body: form})
      .then(response => console.log('skss'))
      .catch(error => console.log('fld'))

      if (i++ < jml) myLoop(i);   //  decrement i and call myLoop again if i > 0
    }, 250)
  })(0); 
 */
  
  for (let i = 0; i < jml; i++) {
    num = $('span.orderid').eq(i).text().substring(12);
    sendmydata(name,num,tipe);
  }

and the code.gs

var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(e.parameter['sheetname'])

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, newRow.length, newRow[0].length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Thank you !

How do I access response information from COINGECKO API for coins with more than one word id?

I have 6 crypto coins I’m getting current price from CoinGecko’s API

I have spans inside of divs set up on my html page, where the price span html updates after the ajax call.

The call is working for 4/6 coins. I’m using the ID’s to call the information. I can call perfectly the price of the coins if they’re one word like “metagods”, “affyn” but the call fails for multiple worded ID’s like “thetan-arena”, “dragon-kart-token”.

I’m using the ID’s CoinGecko provided, is there a proper way to access info for ID’s with more than one word? JS code below

let metagodsPrice = document.getElementById("metagodsPrice");
let sidusPrice = document.getElementById("sidusPrice");
let thetanArenaPrice = document.getElementById("thetanArenaPrice");
let affynPrice = document.getElementById("affynPrice");
let splinterlandsPrice = document.getElementById("splinterlandsPrice");
let dragonkartPrice = document.getElementById("dragonkartPrice");


const livePrice = {
    "async": true,
    "scroosDomain": true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=metagods%2Csidus%2Cthetan-arena%2Caffyn%2Csplinterlands%2Cdragon-kart-token&vs_currencies=USD&include_market_cap=true&include_24hr_change=true",
    "method": "GET",
    "headers": {}
}
$.ajax(livePrice).done(function (response) {
    console.log(response);
    metagodsPrice.innerHTML = response.metagods.usd;
    sidusPrice.innerHTML = response.sidus.usd;
    affynPrice.innerHTML = response.affyn.usd;
    splinterlandsPrice.innerHTML = response.splinterlands.usd;
    thetanArenaPrice.innerHTML = response.thetan-arena.usd;
    dragonkartPrice.innerHTML = response.dragon-kart-token.usd;

});

Find html text between two tags using jquery or cheerio

I thought that this would be rather straightforward but nothing really much work. I am writing this using cheerio in node js.
Basically, I have the following HTML

<h2 id="understanding-adc">
<a class="anchor" href="#understanding-adc" aria-hidden="true"><span class="octicon octicon-link"></span></a>Understanding ADC</h2>

<p>test</p>

<ol>
  <li>test</li>
  <li>test</li>
  <li>Optimization</li>
</ol>

<h2 id="data-switching">
<a class="anchor" href="#data-switching" aria-hidden="true"><span class="octicon octicon-link"></span></a>Data switching</h2>

<p>test test.</p>

So the scenario will be like this . If I pass the a h2 tag id lets say “#understanding-adc” I need to get the content between “#understanding-adc” and the next h2 tag “#data-switching”. Here I know which h2 tag I needs to pass to the function, but not the second one.

The result I’m looking for is this:

<h2 id="understanding-adc">
    <a class="anchor" href="#understanding-adc" aria-hidden="true"><span class="octicon octicon-link"></span></a>Understanding ADC</h2>
    
    <p>test</p>
    
    <ol>
      <li>test</li>
      <li>test</li>
      <li>Optimization</li>
    </ol>

Please help me

Can we configure and select Playwright launch options based on env?

Context : I am running a bunch of Playwright e2e tests for a enterprise web application, which are run on Github actions, as a part of the CI/CD process.

To launch Chromium using Playwright we have these launch options –

const options = {
  headless: true,
  slowMo: 100,
  ..
  // all args added to help run Chromium in headless mode
  args: [
    '--start-maximized',
    '--disable-dev-shm-usage',
    '--no-sandbox'
  ],
  
  video: "true"
};

When the same tests are run on the local system during the time we add new test cases, we have to manually change the headless: true to false to have a head-ful execution.

I’m wondering if we can configure this to have change based on the run – when the execution is local, it changes the headless mode to false and true when it runs on ci. Let’s say for running tests on local,

npm run test --env=local gets the headless as false, and npm run test --env=ci gets headless true in the options.

I’ve gone through Playwright’s documentation but couldn’t find anything concrete. Most of the answers on Playwright/Puppeteer are about how to change the URL’s etc, based on the env.

How to use react-big-calendar only for month view

I’m trying to use react-big-calendar, only for viewing the month and allowing the user to press a certain date, which should trigger my own function. That is I’m not interested in (and want to remove) all the functionality related to week, day, agenda or displaying the time of a day. I simply want to show the month-view, allow the user to press a date which should trigger my function onSelectSlot.

I haven’t found much on how to do this, the little I did find said to use selectable={true} and onSelectSlot={onSelectSlot} to make a function to execute ones a date has been pressed. However, this did not work. And I still wonder how to remove all the added functionalities, which I want remove as I have no use of them. Is these things possible with react-big-calender, or should I move on to trying something else? I know there are other ones out there, but I really like the look and feel of this one and would prefer to stick with it if possible.

Here is an image of how it looks, to give a better understanding of what I mean:

enter image description here

(So it’s the things in the top right corner that I want to remove, and when a pressing a certain date I want to trigger my own function and not switch to the day-view as it does by default)

import format from "date-fns/format";
import getDay from "date-fns/getDay";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import React, { useState } from "react";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "./calendar.css";

const locales = {
    "en-US": require("date-fns/locale/en-US"),
};
const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales,
});

const onSelectSlot = (pressedDate) => {
     console.log("pressed Date: ", pressedDate)
  };

function MyCalendar() {
    return (
        <div className="text-center">
            <h1>Calendar</h1>
            <Calendar localizer={localizer} selectable={true} startAccessor="start" onSelectSlot={onSelectSlot} endAccessor="end" style={{ height: 500, margin: "50px" }} />
        </div>
    );
}

export default MyCalendar;

Google script – Service error: Spreadsheets

As of a couple of weeks now, I’m getting a “Service error: Spreadsheets” error when running a script in Google Sheets. Before that, it was working fine.

It’s supposed to export a PDF while deleting some of the empty rows.

I tried adding a 1000ms delay, but that didn’t work.

Any help would be greatly appreciated. You can find the code below.


var sheetName = "PDF - B";
var sheetName2 = "Offertes";
var folderID = "XXX"; // Folder id to save in a folder.

var sourceSpreadsheet = SpreadsheetApp.getActive();
var sourceSheet = sourceSpreadsheet.getSheetByName(sheetName);
var sourceSheet2 = sourceSpreadsheet.getSheetByName(sheetName2);
var folder = DriveApp.getFolderById(folderID);
  
var invoiceName = sourceSheet.getRange("B57").getValue(); 
var invoiceDate = sourceSheet.getRange("H57").getValue();
var invoiceBusnr = sourceSheet.getRange("J1").getValue();
var invoiceDate_2 = Utilities.formatDate(invoiceDate, "CET", "yyyy-MM-dd")
var pdfName = "["+invoiceDate_2+"] "+invoiceName+" - Offerte "+invoiceBusnr+" Ventje";


var fact = sourceSheet.getRange("H60").getValue(); 
var value_f1 = sourceSheet.getRange("I53").getValue();
var value_f2 = sourceSheet.getRange("I54").getValue();
var buyerRow = sourceSheet.getRange("I61").getValue(); 
var buyerColumn = sourceSheet.getRange("J61").getValue(); 
var vColumn = sourceSheet.getRange("G61").getValue();

var f_cell = sourceSheet2.getRange(buyerRow,buyerColumn);
var f_version = sourceSheet2.getRange(buyerRow,vColumn);

if (fact=="F1") {
      f_cell.setValue(value_f1);
      f_version.setValue(2);  
}
if (fact=="F2") {
      f_cell.setValue(value_f2);
}



//Copy whole spreadsheet
var destSpreadsheet = SpreadsheetApp.open(DriveApp.getFileById(sourceSpreadsheet.getId()).makeCopy("tmp_convert_to_pdf", folder));



//repace cell values with text (to avoid broken references) 
var destSheet = destSpreadsheet.getSheets()[0]
var destSheet = destSpreadsheet.getSheetByName(sheetName)
var sourceRange = sourceSheet.getRange(1,1,sourceSheet.getMaxRows(),sourceSheet.getMaxColumns()); 
var sourcevalues = sourceRange.getValues();
var destRange = destSheet.getRange(1, 1, destSheet.getMaxRows(), destSheet.getMaxColumns());
destRange.setValues(sourcevalues);



var imageSheet = destSpreadsheet.getSheetByName("Bus foto's");
var imageRow = destSheet.getRange("B1").getValue();

var sourceImage_1 = imageSheet.getRange(imageRow, 2, 1, 1);
var destImage_1 = destSheet.getRange(4, 2, 1, 1);
var sourceImage_2 = imageSheet.getRange(imageRow, 3, 1, 1);
var destImage_2 = destSheet.getRange(4, 7, 1, 1);
var sourceImage_3 = imageSheet.getRange(imageRow, 4, 1, 1);
var destImage_3 = destSheet.getRange(6, 2, 1, 1);
var sourceImage_4 = imageSheet.getRange(imageRow, 5, 1, 1);
var destImage_4 = destSheet.getRange(6, 7, 1, 1);

sourceImage_1.copyTo(destImage_1,SpreadsheetApp.CopyPasteType.PASTE_VALUES,false);
sourceImage_2.copyTo(destImage_2,SpreadsheetApp.CopyPasteType.PASTE_VALUES,false);
sourceImage_3.copyTo(destImage_3,SpreadsheetApp.CopyPasteType.PASTE_VALUES,false);
sourceImage_4.copyTo(destImage_4,SpreadsheetApp.CopyPasteType.PASTE_VALUES,false);

//delete redundant sheets
var sheets = destSpreadsheet.getSheets();
for (i = 0; i < sheets.length; i++) {
  if (i % 10 == 0) { Utilities.sleep(3000); } // Pause the function for 3000 milliseconds after 10 iterations
  if (sheets[i].getSheetName() != sheetName){
  destSpreadsheet.deleteSheet(sheets[i]);
  }
}


//delete redundant rows

var soverig14 = destSheet.getRange("B50").getValue();
var soverig13 = destSheet.getRange("B49").getValue();
var soverig12 = destSheet.getRange("B48").getValue();
var soverig11 = destSheet.getRange("B47").getValue();
var soverig10 = destSheet.getRange("B46").getValue();
var soverig9 = destSheet.getRange("B45").getValue();
var soverig8 = destSheet.getRange("B44").getValue();
var soverig7 = destSheet.getRange("B43").getValue();
var soverig6 = destSheet.getRange("B42").getValue();
var soverig5 = destSheet.getRange("B41").getValue();
var soverig4 = destSheet.getRange("B40").getValue();
var soverig3 = destSheet.getRange("B39").getValue();
var soverig2 = destSheet.getRange("B38").getValue();
var soverig1 = destSheet.getRange("B37").getValue();

var soverig_t = destSheet.getRange("B36").getValue();
var soverig_m1 = destSheet.getRange("B35").getValue();

var sschuif = destSheet.getRange("B34").getValue();

var boverig3 = destSheet.getRange("B26").getValue();
var boverig2 = destSheet.getRange("B25").getValue();
var boverig1 = destSheet.getRange("B24").getValue();
var boverig0 = destSheet.getRange("B23").getValue();
var boverig_t = destSheet.getRange("B22").getValue();
var boverig_m1 = destSheet.getRange("B21").getValue();

var f1 = destSheet.getRange("B53").getValue();
var f2 = destSheet.getRange("B54").getValue();

var f3 = destSheet.getRange("B60").getValue();
var f4 = destSheet.getRange("B61").getValue();



  if (f4=="") {
    destSheet.deleteRow(61);
  }

  if (f3=="") {
    destSheet.deleteRow(60);
  }

  if (f2=="") {
    destSheet.deleteRow(54);
  }

  if (f1=="") {
    destSheet.deleteRow(53);
  }


  

  if (soverig14=="") {
    destSheet.deleteRow(50);
  }
  if (soverig13=="") {
    destSheet.deleteRow(49);
  }  
  if (soverig12=="") {
    destSheet.deleteRow(48);
  }
  if (soverig11=="") {
    destSheet.deleteRow(47);
  }  
  if (soverig10=="") {
    destSheet.deleteRow(46);
  }
  if (soverig9=="") {
    destSheet.deleteRow(45);
  }  
  if (soverig8=="") {
    destSheet.deleteRow(44);
  }
  if (soverig7=="") {
    destSheet.deleteRow(43);
  }
  if (soverig6=="") {
    destSheet.deleteRow(42);
  }
  if (soverig5=="") {
    destSheet.deleteRow(41);
  }
  if (soverig4=="") {
    destSheet.deleteRow(40);
  }
  if (soverig3=="") {
    destSheet.deleteRow(39);
  }
  if (soverig2=="") {
    destSheet.deleteRow(38);
  }
  if (soverig1=="") {
    destSheet.deleteRow(37);
  }

    if (soverig_t=="") {
    destSheet.deleteRow(36);
  }
  if (soverig_m1=="") {
    destSheet.deleteRow(35);
  }
  if (sschuif=="") {
    destSheet.deleteRow(34);
  }

  if (boverig3=="") {
    destSheet.deleteRow(26);
  }

  if (boverig2=="") {
    destSheet.deleteRow(25);
  }

  if (boverig1=="") {
    destSheet.deleteRow(24);
  }

  if (boverig0=="") {
    destSheet.deleteRow(23);
  }

  if (boverig_t=="") {
    destSheet.deleteRow(22);
  }

  if (boverig_m1=="") {
    destSheet.deleteRow(21);
  }



// export url
  var url = 'https://docs.google.com/spreadsheets/d/'+destSpreadsheet.getId()+'/export?exportFormat=pdf&format=pdf' // export as pdf / csv / xls / xlsx
  + '&size=A4'                           // paper size legal / letter / A4
  + '&portrait=true'                     // orientation, false for landscape
  + '&fitw=true'                        // fit to page width, false for actual size
  + '&scale=4'                            // 1 = Normal 100% -- 2 = Fit to width -- 3 = Fit to height -- 4 = Fit to Page
  //+ '&sheetnames=false&printtitle=false' // hide optional headers and footers
 // + '&pagenumbers=false&gridlines=false' // hide page numbers and gridlines
  //+ '&fzr=false'                         // do not repeat row headers (frozen rows) on each page
  + '&horizontal_alignment=CENTER'        // LEFT/CENTER/RIGHT
  //+ '&vertical_alignment=MIDDLE'          // TOP/MIDDLE/BOTTOM
  //            SET ALL MARGINS IN ORDER FOR IT TO WORK
  + '&top_margin=0.4'                   // set top margin
  + '&bottom_margin=0.4'                // set bottom margin
  + '&left_margin=0.7'                   // set left margin
  + '&right_margin=0.7'                  // set right margin
  + '&gid='+destSheet.getSheetId();    // the sheet's Id
  
  var token = ScriptApp.getOAuthToken();

  // request export url
  var response = UrlFetchApp.fetch(url, {
    headers: {
      'Authorization': 'Bearer ' +  token
    }
  });

  var theBlob = response.getBlob().setName(pdfName+'.pdf');

  // delete pdf if already exists
  var files = folder.getFilesByName(pdfName);
  while (files.hasNext())
  {
    files.next().setTrashed(true);
  }

  // create pdf
  var newFile = folder.createFile(theBlob);

  // return true;

//Delete the temporary sheet
DriveApp.getFileById(destSpreadsheet.getId()).setTrashed(true);


}

How to handle table JSON/form data from the body of the URL in node.JS and express

I have a question in node js express. My question concerns post request with node js express.
I want to make a post request for this data in json form. Below you can find the node js express code and the post I want to do.

node js express code:

var express = require('express');

var app = express();

app.use(express.json()); // built-in middleware for express

app.post('/', function(request, response){
    let myJson = request.body;      // your JSON
    let myValue = request.body.II.A;    // a value from your JSON
    response.send(myJson);   // echo the result back
});

app.listen(3000);

======================

The body of the post in json format:

{
            "I" : {
                "Y" : "3",
                "Z" : "2",
                "T" : "1"
            },
            "II" : [
                {
                    "A" : "4",
                    "B" : "5",
                    "C" : {"a": "4", "b" : "6"},
       
                }
            ]
        }

Bootstrap JavaScript does not toggle tabs

I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
  <button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>


<div class="tab-content">
  <div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
    bbbbb
  </div>
</div>

As you can see the tabs does not toggle.
From what I learnt:

  • include JQuery before Bootstrap: done
  • set data-bs-toggle and data-bs-target: done
  • use classes like nav-link, tab-pane, etc… : done

What still am I missing?

How can I get the value of a sibling key in a javascript object?

I have the following object and want to grab the “payroll_run_items” where month equals “2022-04-01” so s.th. like the value of a sibling key where key values Foo.

{
  "payrollRuns": [
    {
      "company": {
        "id": 1,
        "name": "Example Ltd.",
        "country": "Germany",
        "city": "Munich",
        "zip": "80801",
        "street": "Max-Strasse",
        "house_number": "3",
        "vat": "DE12434",
        "customer_number": "1",
        "fee_offer": "59.00",
        "is_active": true
      },
      "month": "2022-06-01",
      "amount": "733.00",
      "line_items": 1,
      "payroll_run_items": []
    },
    {
      "company": {
        "id": 1,
        "name": "Example Ltd.",
        "country": "Germany",
        "city": "Munich",
        "zip": "80801",
        "street": "Max-Strasse",
        "house_number": "3",
        "vat": "DE12434",
        "customer_number": "1",
        "fee_offer": "59.00",
        "is_active": true
      },
      "month": "2022-04-01",
      "amount": "7570.02",
      "line_items": 2,
      "payroll_run_items": [
        "{amount: "3749.00", id: 68, month: {…}, offer: {…},…}",
        "{amount: "3821.02", id: 73, month: {…}, offer: {…},…}"
      ]
    }
  ],
  "setPayrollRuns": "ƒ bound dispatchSetState() {}"
}

All I came up with so far is to get all keys but how would I now check for “2022-04-01” and assign the “payroll_run_items” to a variable?

const payrollLineItems = () => (
        Object.keys(props.payrollRuns)
    )