Category: javascript

I have portfolio gallery where first item is grid 2 rows and 2 columns and right to that is 2 small images.

Portfolio has filter and if I click filter tab it filters out images but first image is small now. I have question How I can add first active item a style.

HTML:

.elementor-portfolio //class where is articles of each portfolio image
article.elementor-active //portfolio item what is active

CSS:

grid-column: 2!important;
grid-row: 2!important;

What I’ve tried:

jQuery(function($) {
   $(".elementor-portfolio article.elementor-active").first().css({
   'grid-column' : '2!important',
   'grid-row' : '2!important'
});
});

I cannot find any issue with my else statement, not able to figure out why exactly i am encountering this issue and how to make it work.

function diceWinner() {
  // <!-- Random Number generator from 1 to 6 -->
  var randomNumber1 = Math.random() * 6
  randomNumber1 = Math.floor(randomNumber1) + 1;
  console.log(randomNumber1);
  document.querySelector("img.img1").setAttribute("src", "images/dice" + randomNumber1 + ".png");

  var randomNumber2 = Math.random() * 6
  randomNumber2 = Math.floor(randomNumber2) + 1;
  console.log(randomNumber2);
  document.querySelector("img.img2").setAttribute("src", "images/dice" + randomNumber2 + ".png");

  if (randomNumber1 > randomNumber2)
  {
    document.querySelector("h1").textContent = "Player 1 Wins!";
  }
  elseif(randomNumber2 > randomNumber1)
  {
    document.querySelector("h1").textContent = "Player 2 Wins!";
  }
  else
  {
    document.querySelector("h1").textContent = "Draw!";
  }
}
diceWinner();

I am bumping in a annoying issue. I am trying to buişd a project using web3 upon other things and I get some compilation error I can not sort out :

Compiled with problems: X

ERROR in ../node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:CASnode_modulescipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

I tried lots of things but can not manage to get it work out.
Can someone help?

I am getting icon props and passing it to styled function:

const IconComponent = ({ isActive, icon }) => {
   const StyledIcons = styled(icon)`
      fill: #1f6ed4;
      & path {
         fill: ${(props) => (props.isActive ? '#1F6ED4' : '#232323')};
      }
   `
   return <StyledIcons isActive={isActive} />
}

To create stylized icons based on it. It works. But I am getting warnings like below:

i am trying to set id’s to all img tags of a page, my loop runs its iterations completely but some of the img tags doesn’t get the id’s as can be seen in the below image

here is my code

const browser = await puppeteer.launch({
    args: [
        '--no-sandbox',
    ],
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 10000 })
  await page.goto(url, {
        waitUntil: 'networkidle2',
        timeout: 0,
  });

await page.evaluate(() => {
const images = document.getElementsByTagName('img') || []
    for (let i = 0; i < images.length; i++) {
        document.getElementsByTagName('img')[i].id = `${i}`
    }
})

Am i missing anything? any help would be highly appreciated

I’m trying by using bellow sample code but is not working properly, can you know anyone kindly suggest way or what are the changers to do.

enter code here   getText: async function () {  return await new Promise(async function (resolve, reject) { return await protractor.element(protractor.by.css('simple-snack-bar>span,.mat-simple-snackbar > span')).isPresent().then(async (isPresent) => {if (isPresent) {return await protractor.element(protractor.by.css('simple-snack-bar>span,.mat-simple-snackbar > span')).getText().then(async (snackBarText) => { resolve(snackBarText); }).catch(() => { return false; })}else {reject(isPresent);return false;}}}).catch(() => { return false; })}).catch((error) => {if (error.name === 'StaleElementReferenceError') { return false; }})}

I have a classic v-for in vue, to iterate some elements (products) inside it, I want to modify the attribute of this object, but if I do it, it changes in all the rows that have that product

This is the example I have, to add basically I do a push.

<tr v-for="(row, index) in form.items" :key="index">    
      <input type="text" v-model="row.item.description"  class="form-control" v-show="row.edit"
            @blur="row.edit= ! row.edit;"
            :key="index"/>

how could you tell vue that the v-model change be done only on the row that is being modified?

A new row is dynamically creating on clicking “add Row” button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here

function add_row(table_row_count)
{
    $("#add-row_"+table_row_count).hide();
    $("#delete-row_"+table_row_count).hide();
    
    var table_row_count = parseInt(table_row_count);
    
    table_row_count += 1;
    
    var markup = 
    '<tr id="tbl_row_'+table_row_count+'" >'+
    '<td><label>'+table_row_count+'</label></td>'+
    '<td>'+
          '<label>Value in Range? :</label>'+ 
          '<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1"  > YES'+ 
          '<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2"  > NO'+                      
    '</td>'+
    '<td id="capacity_from_row_'+table_row_count+'" >'+
            '<label>Range From :</label><br>'+
            '<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'"  />'+                        
    '</td>'+
    '<td>'+
            '<label id="lbl_capacity_range_'+table_row_count+'" >Range Upto :</label><br>'+
            '<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+              
     '</td>'+             
    '<td class="align-middle"><a href="javascript:void(0)" class="text-success add-row" id="add-row_'+table_row_count+'"  onClick="add_row(''+table_row_count+'');" ><i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row</a></td>'+
    '<td class="align-middle"><a href="javascript:void(0)" class="text-danger delete-row" id="delete-row_'+table_row_count+'" onClick="delete_row(''+table_row_count+'');" ><i class="fa fa-trash fa-lg text-danger" aria-hidden="true"></i> Delete Row</a></td>'+
    '</tr>';
    
    var table = $("#tbl_details tbody");
    table.append(markup);
    
     
}


function delete_row(table_row_count)
{
    var r = confirm("Are you sure to delete row");
    if(r == false){
        return;
    }
    
    var table_row_count = parseInt(table_row_count);
    var previous_row = table_row_count - 1;
    $("#add-row_"+previous_row).show();
    if(previous_row != 1){
        $("#delete-row_"+previous_row).show();
    }
    
    $("#tbl_row_"+table_row_count).remove();
            
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
        <h3>Enter Details</h3>
        <table class="table table-striped" id="tbl_details">    
        <tbody>     
        <tr id="row_1">
        <td>1.</td>
        <td>
          <label>Value in Range? :</label> 
          <input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES  
          <input type="radio" name="option" id="option_2_row_1" value="2" > NO       
        </td>
        <td id="capacity_from_row_1" >
            <label>Range From :</label><br>
            <input type="text" name="capacity_from[]" id="capacity_from_1" />        
        </td>
        <td>
            <label id="lbl_capacity_range_1" >Range Upto :</label><br>
            <input type="text" name="capacity_upto[]" id="capacity_upto_1" />                   
        </td>   
        <td class="align-middle"><a href="javascript:void(0)" class="text-success add-row" id="add-row_1" onClick="add_row(1);" ><i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row</a></td>
        <td class="align-middle"></td>
        </tr>
        </tbody>
        </table>
</body>
</html>

How to solve the issue. kindly help me.
Thanks in advance.

I’m trying to remove the event listener that I’ve added in for loop but it didn’t work

Is there a way to do this with pure js?

for (let i = 0; i < drumPads.length; i++) {
    drumPads[i].addEventListener("click", func)
    function func() {
      display.innerHTML = music[i][0];
      sound.src = music[i][1];
      sound.play();
    }
}

I got an error in JavaScript when I open my website in Chrome or MSEdge. Error is Uncaught TypeError: Cannot read properties of null (reading ‘toLowerCase’). When I open in Internet Explorer 11, it’s working perfectly. But in Chrome, when i click on tabs in Navbar, it got JS errors. May I know how can I fix that? I will insert both html and JavaScript.

    <?php
include("_include/checklogin.php"); 
include("_config.php");


echo "<html>";
echo "<head><title>" . $toolsname . "</title>";
echo "<link rel="stylesheet" type="text/css" href="web/jquery/css/custom-theme/jquery-ui-1.8.6.custom.css"/>";
echo "<script src="web/jquery/js/jquery-1.4.4.min.js" type="text/javascript"></script>";
echo "<script src="web/jquery/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>";
echo "<script src="web/jquery/js/pointer_edge.js" type="text/javascript"></script>";
echo "<link rel="stylesheet" type="text/css" href="web/jquery/css/global.css">";

echo "<link rel="stylesheet" type="text/css" href="_local.css"/>";
echo "<script src="_tabadd.js" type="text/javascript"></script>";
echo "<script src="_tabedit.js" type="text/javascript"></script>";
echo "<script src="_tabhist.js" type="text/javascript"></script>";
echo "<script src="_tabProbSearch.js" type="text/javascript"></script>";
echo "<script src="probEquipProgram/_tabProbEquip.js" type="text/javascript"></script>";
echo "<script src="_common.js" type="text/javascript"></script>";
echo "</head>";
echo "<body>";

//include ($_SERVER['DOCUMENT_ROOT'] . "librarycommonapewsheader.php");
include("//sgewsnant21.amk.st.com/ewsweb/wwwroot/library/common7/apewsheader.php");

echo "<form name="equipment" method="post" target="_self">";
    echo "<div class="divprojname">" . $toolsname . "</div>";
    //<p align=center style="margin-top: -20px;"><font color=red size=3px><b>**Please Add New Equipment to ePCR**</b></font></p>
    echo "<div class="divcontainer">";
        echo "<div id=tabs style="width=100%;">";
            echo "<ul>";
                echo "<li><a href="#tabs-1">Edit Equipment</a></li>";
                echo "<li><a href="#tabs-2">Add Equipment</a></li>";
                echo "<li><a href="#tabs-3">Queue for Approval</a></li>";
                echo "<li><a href="#tabs-4">History</a></li>";
                echo "<li><a href="#tabs-5">Equip Config</a></li>";
                echo "<li><a href="#tabs-6">Prober Search Tool</a></li>";         
                echo "<li><a href="#tabs-7">Prober Equipment Program</a></li>";    
            echo "</ul>";
            echo "<div id=tabs-1>"; include("tabedit_filter.php"); echo "</div>";
            echo "<div id=tabs-2>"; include("tabadd_form.php"); echo "</div>";
            echo "<div id=tabs-3>"; include("tabque.php"); echo "</div>";
            echo "<div id=tabs-4>"; include("tabhist_filter.php"); echo "</div>";
            echo "<div id=tabs-5>";
                echo "<table cellpadding=2 cellspacing=2 align=center width=500px>";
                    echo "<tr>";
                        echo "<td>";
                            echo "<table cellpadding=0 cellspacing=0 width=100% style="border: 1px solid navy;">";
                                echo "<tr>";
                                    echo "<td nowrap valign=middle width=100% style="border-bottom: 1px solid" bgcolor=#6699CC>";
                                        echo "<table border=0 cellpadding=2 cellspacing=2>";
                                            echo "<tr><td><font class=ft10 color=navy><b>Tester and Prober Configuration</b></font></td></tr>";
                                        echo "</table>";
                                    echo "</td>";
                                echo "</tr>";
                                echo "<tr>";
                                    echo "<td nowrap valign=middle width=100%>";
                                        echo "<table border=0 cellpadding=2 cellspacing=2 width=90%>";
                                            echo "<tr>";
                                                // echo "<td align=left width="10%">&nbsp;   <a href="javascript:void();" onclick="javascript:FileDownload('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/APEWS_Testers_Config.xls');"><img border="0" src="".$grpnicon."xls.gif"></a></td>";
                                                echo "<td align=left width="10%">&nbsp;   <a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/APEWS_Testers_Config.xlsx','_blank');"><img border="0" src="".$grpnicon."xls.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>APEWS Tester Configuration</font></td>";
                                            echo "</tr>";
                                            echo "<tr>";
                                                echo "<td align=left width="10%"><a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/TEL - Configurations.pdf', '_blank')"><img border="0" src="".$grpnicon."pdf.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>TEL Configuration</font></td>";
                                            echo "</tr>";
                                            echo "<tr>";
                                                echo "<td align=left width="10%"><a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/ACCRETECH - Configurations.pdf', '_blank')"><img border="0" src="".$grpnicon."pdf.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>ACCRETECH Configuration</font></td>";
                                            echo "</tr>";
                                            echo "<tr>";
                                                echo "<td align=left width="10%"><a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/SEMICS - Configurations.pdf', '_blank')"><img border="0" src="".$grpnicon."pdf.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>SEMICS Configuration</font></td>";
                                            echo "</tr>";
                                            echo "<tr>";
                                                echo "<td align=left width="10%"><a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/EG - Configurations.pdf', '_blank')"><img border="0" src="".$grpnicon."pdf.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>EG - Configurations</font></td>";
                                            echo "</tr>";
                                        //  echo "<tr>";
                                        //      echo "<td align=left width="10%">  &nbsp; <a href="javascript:void();" onclick="javascript:FileDownload('d:/webdata/tpmc/report/equip/EWS GRR Masterlist.xlsx');"><img border="0" src="".$grpnicon."xls.gif"></a></td>";     //closed requested by Audie
                                        //      echo "<td align=left width="90%"><font class=ft10 color=#000000>EWS GR&R Masterlist</font></td>";
                                        //  echo "</tr>";
                                            echo "<tr>";
                                                echo "<td align=left width="10%"> <a href="javascript:void();" onclick="window.open('http://sgewsweb.amk.st.com/webdata/tpmc/report/equip/Calibration Service Providers Certificates', '_blank')"><img border="0" src="".$grpnicon."service.gif"></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>CAL Service Providers Certificates</font></td>";//W:ReportequipCalibration Service Providers Certificates
                                            echo "</tr>";       
                                        
                                        
                                        if($badgeno == "018359" || $badgeno == "018432" || $badgeno == "016919" || $badgeno == "230933"){
                                            echo "<tr>";
                                                echo "<td align=left width="10%"> <a href="javascript:void();" onclick="Upload();"><img border="0" src="".$grpnicon."upload.jpg" width=40px height=40px></a></td>";
                                                echo "<td align=left width="90%"><font class=ft10 color=#000000>Upload RnR Report</font></td>";
                                            echo "</tr>";   
                                        }
                                            //end   
                                                                                
                                        echo "</table>";                            
                                    echo "</td>";
                                echo "</tr>";
                            echo "</table>";
                        echo "</td>";
                    echo "</tr>";
                echo "</table>";  
            echo "</div>";
      echo "<div id=tabs-6>"; include("tabProbSearch_filter.php"); echo "</div>";
      echo "<div id=tabs-7>"; include("probEquipProgram/tabProbEquip_filter.php"); echo "</div>";
        echo "</div>";
    echo "</div>";
echo "</form>";
echo "</body>";
echo "</html>";
?>

Below codes are JavaScript codes. Error line is under 4.1.

    /**
 * This array is used to remember mark status of rows in browse mode
 */
var marked_row = new Array;


/**
 * Sets/unsets the pointer and marker in browse mode
 *
 * @param   object    the table row
 * @param   interger  the row number
 * @param   string    the action calling this script (over, out or click)
 * @param   string    the default background color
 * @param   string    the color to use for mouseover
 * @param   string    the color to use for marking a row
 *
 * @return  boolean  whether pointer is set or not
 */
function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
{

    var theCells = null;

    // 1. Pointer and mark feature are disabled or the browser can't get the
    //    row -> exits
    if ((thePointerColor == '' && theMarkColor == '')
        || typeof(theRow.style) == 'undefined') {
        return false;
    }

    // 2. Gets the current row and exits if the browser can't get it
    if (typeof(document.getElementsByTagName) != 'undefined') {
        theCells = theRow.getElementsByTagName('td');
    }
    else if (typeof(theRow.cells) != 'undefined') {
        theCells = theRow.cells;
    }
    else {
        return false;
    }

    // 3. Gets the current color...
    var rowCellsCnt  = theCells.length;
    var domDetect    = null;
    var currentColor = null;
    var newColor     = null;
    // 3.1 ... with DOM compatible browsers except Opera that does not return
    //         valid values with "getAttribute"
    if (typeof(window.opera) == 'undefined'
        && typeof(theCells[0].getAttribute) != 'undefined') {
        currentColor = theCells[0].getAttribute('bgcolor');
        domDetect    = true;
    }
    // 3.2 ... with other browsers
    else {
        currentColor = theCells[0].style.backgroundColor;
        domDetect    = false;
    } // end 3

    // 4. Defines the new color
    // 4.1 Current color is the default one
    if (currentColor == ''
        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
        if (theAction == 'over' && thePointerColor != '') {
            newColor              = thePointerColor;
        }
        else if (theAction == 'click' && theMarkColor != '') {
            newColor              = theMarkColor;
        }
    }
    // 4.1.2 Current color is the pointer one
    else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
             && (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
        if (theAction == 'out') {
            newColor              = theDefaultColor;
        }
        else if (theAction == 'click' && theMarkColor != '') {
            newColor              = theMarkColor;
            marked_row[theRowNum] = true;
        }
    }
    // 4.1.3 Current color is the marker one
    else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
        if (theAction == 'click') {
            newColor              = (thePointerColor != '')
                                  ? thePointerColor
                                  : theDefaultColor;
            marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
                                  ? true
                                  : null;
        }
    } // end 4

    // 5. Sets the new color...
    if (newColor) {
        var c = null;
        // 5.1 ... with DOM compatible browsers except Opera
        if (domDetect) {
            for (c = 0; c < rowCellsCnt; c++) {
                theCells[c].setAttribute('bgcolor', newColor, 0);
            } // end for
        }
        // 5.2 ... with other browsers
        else {
            for (c = 0; c < rowCellsCnt; c++) {
                theCells[c].style.backgroundColor = newColor;
            }
        }
    } // end 5

    return true;
} // end of the 'setPointer()' function

i am new to next js and
i been trying to to use getStaticProps in my dymnamic pages in my next js
and i get this error

Error: getStaticPaths is required for dynamic SSG pages and is missing for ‘/query/[itmid]’

[itmid].jsx

function Query({ posts }) {
  
  return (
 
        {posts.map((itm, k) => {
          return (
            <>
              <Head>
                <title> {itm.Name} - wixten </title>
              </Head>
            
              <div key={itm._id} className="Question-one">
                <h1> {itm.Name}</h1>
                <h2>{itm.Summary}</h2>
              </div>
              <div className="username">
                <span className="username2">--{itm.username}</span>
              </div>
            </>
          );
        })}
      </>
   
  
      <div className="multi-container">
        <Answershooks id={gotid} />
        <RealtedPost />
      </div>
    </>
  );
}

export async function getStaticProps() {
 
  const res = await fetch("https://ask-over.herokuapp.com/questone/" + gotid);
  console.log("check");
  console.log("dada");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}
export default Query;

why am i getting this error can someone pls help me

i am egtiign this error
Server Error
Error: getStaticPaths is required for dynamic SSG pages and is missing for ‘/query/[itmid]’.

Consider below example:

const obj ={
price:[{multiple items},{multiple items}],
name:"",
id:"",
}

i want to apply foreach on price property but the issue is the property name is changing wrt cases like saleprice , taxprice etc.

if i am using obj.keys() method it doesn’t work because it returns key as a string.

The user can choose the category in which another select will appear depending on what was selected. I create the 2nd component in another .js. I can already view the data but how can I pass the value of my 2nd component to the parent component?

I wanted to pass the value of the select from the size1,js to the demo.js

Link: https://codesandbox.io/s/category-selection-oiu7d

demo.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Size1 from "./size1";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      selected: {age}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Category</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="S-XL">S-XL</MenuItem>
          <MenuItem value="Size2">Size2</MenuItem>
        </Select>
      </FormControl>
      {age === "S-XL" && (
        <>
          <Size1 />{" "}
        </>
      )}
    </Box>
  );
}

size1.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export const Size1 = ["XS", "S", "M", "L", "XL"];

export default function BasicSelect() {
  const [size1, setSize1] = React.useState("");

  const handleChange = (event) => {
    setSize1(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      chosen size: {size1}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size1}
          label="size1"
          onChange={handleChange}
        >
          <MenuItem value="XS">XS</MenuItem>
          <MenuItem value="S">S</MenuItem>
          <MenuItem value="M">M</MenuItem>
          <MenuItem value="L">L</MenuItem>
          <MenuItem value="XL">XL</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

I am new to amcharts and js overall. In my project i want to show male and female population graph according to their age group and so far i have created the graph to show the data i have but it only works for bigger screen.When i run that project on smaller screen the graph shrinks to a line.So i want to show the labels in front of the graph like the example i have shown below.

[I want to display like in 10 to 14 ageGroup of this example][1]
[1]: https://i.stack.imgur.com/NPiYT.png

This is the graph i have
[And the graph is looking pretty decent on bigger screen][2]
[2]: https://i.stack.imgur.com/3uKE8.png

But the problem i have is [It shrinks to a single line on mobile view][3]
[3]: https://i.stack.imgur.com/e8Sh8.png

Here is the code i have,

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
chart.responsive.enabled = true;

// Themes end

var mainContainer = am4core.create(“agewise”, am4core.Container);
mainContainer.width = am4core.percent(100);
mainContainer.height = am4core.percent(100);
mainContainer.layout = “horizontal”;

let myData = {!! json_encode($agewise) !!};
var usData = myData;

var maleChart = mainContainer.createChild(am4charts.XYChart);
maleChart.paddingRight = 0;
maleChart.data = JSON.parse(JSON.stringify(usData));

// Create axes
var maleCategoryAxis = maleChart.yAxes.push(new am4charts.CategoryAxis());
maleCategoryAxis.dataFields.category = “age_group”;
maleCategoryAxis.renderer.grid.template.location = 0;
//maleCategoryAxis.renderer.inversed = true;
maleCategoryAxis.renderer.minGridDistance = 15;

var maleValueAxis = maleChart.xAxes.push(new am4charts.ValueAxis());
// console.log(maleChart.xAxes);
maleValueAxis.renderer.inversed = true;
maleValueAxis.min = 0;
maleValueAxis.max = 15;
maleValueAxis.strictMinMax = true;

maleValueAxis.numberFormatter = new am4core.NumberFormatter();
maleValueAxis.numberFormatter.numberFormat = “#.#’%'”;

// Create series
var maleSeries = maleChart.series.push(new am4charts.ColumnSeries());
maleSeries.dataFields.valueX = “male”;
maleSeries.dataFields.valueXShow = “percent”;
maleSeries.calculatePercent = true;
maleSeries.dataFields.categoryY = “age_group”;
maleSeries.interpolationDuration = 1000;
maleSeries.columns.template.tooltipText =
“पुरूष, {categoryY}: {valueX} ({valueX.percent.formatNumber(‘#.0’)}%)”;
//maleSeries.sequencedInterpolation = true;

var femaleChart = mainContainer.createChild(am4charts.XYChart);
femaleChart.paddingLeft = 0;
femaleChart.data = JSON.parse(JSON.stringify(usData));

// Create axes
var femaleCategoryAxis = femaleChart.yAxes.push(new am4charts.CategoryAxis());
femaleCategoryAxis.renderer.opposite = true;
femaleCategoryAxis.dataFields.category = “age_group”;
femaleCategoryAxis.renderer.grid.template.location = 0;
femaleCategoryAxis.renderer.minGridDistance = 15;

var femaleValueAxis = femaleChart.xAxes.push(new am4charts.ValueAxis());
femaleValueAxis.min = 0;
femaleValueAxis.max = 15;
femaleValueAxis.strictMinMax = true;
femaleValueAxis.numberFormatter = new am4core.NumberFormatter();
femaleValueAxis.numberFormatter.numberFormat = “#.#’%'”;
femaleValueAxis.renderer.minLabelPosition = 0.01;

// Create series
var femaleSeries = femaleChart.series.push(new am4charts.ColumnSeries());
femaleSeries.dataFields.valueX = “female”;
femaleSeries.dataFields.valueXShow = “percent”;
femaleSeries.calculatePercent = true;
femaleSeries.fill = femaleChart.colors.getIndex(4);
femaleSeries.stroke = femaleSeries.fill;
//femaleSeries.sequencedInterpolation = true;
femaleSeries.columns.template.tooltipText =
“महिला, {categoryY}: {valueX} ({valueX.percent.formatNumber(‘#.0’)}%)”;
femaleSeries.dataFields.categoryY = “age_group”;
femaleSeries.interpolationDuration = 1000;

}); // end am4core.ready()

And sorry for my English..

as you can see my data

{
"age" : "18",
"altKategoriler" : [ "Dramalar" ],
"category" : [ "Aksiyon", "Heyecanlı", "Gerilim" ],
"id" : 5240718100,
"img" : "https://i.ibb.co/k8wx5C8/AAAABW9-ZJQOg-MRljz-Zwe30-JZw-Hf4vq-ERHq6-HMva5-ODHln-Ci-OEV6ir-Rcjt88tcnm-QGQCKpr-K9h-Oll-Ln-Sbb-EI.jpg",
"izlenilmeSayisi" : 0,
"logo" : "https://i.ibb.co/Rb2SrcB/AAAABfcrhh-Rni-Ok-Ct2l-Rys-ZYk-Oi-T0-XTeagkrw-Mkm-U0h-Lr-WIQZHEHg-VXihf-OWCwz-Vv-Qd7u-Ffn-DFZEX2-Ob.webp",
"oyuncuKadrosu" : [ "Diego Luna", "Michael Pena", "Scoot McNairy", "Tenoch Huerta", "Joaquin Cosio" ],
"senarist" : [ "Doug Miro" ],
"time" : "3 Sezon",
"title" : "Narcos: Mexico",
"type" : "Dizi",
"videoDescription" : "Guadalajara Karteli'nin yükselişinin gerçek öyküsünü anlatan bu yeni ve cesur Narcos hikâyesinde, Meksika'daki uyuşturucu savaşının 1980'lerdeki doğuşuna tanıklık edin.",
"videoQuality" : "HD",
"videosrc" : "https://tr.vid.web.acsta.net/uk/medias/nmedia/90/18/10/18/19/19550785_hd_013.mp4",
"year" : "2021",
"yonetmen" : [ "Carlo Bernard", "Chris Brancato" ]
}

I can access elements such as id , title or logo because they are not arrays.

How can I loop through the data inside the array since there is an array in the category in yield?

var data = this.database.filter((item) => item.type == searchType)

var data = this.database.filter((item) => item.category == searchCategory)

It’s okay because my type value doesn’t have an array.

But when I enter my category value, it only gets the first index[0]. It does not look at other indexes.

How can I fulfill this request?