Category: javascript

I need to add a select option form in the slider revolution slide WordPress, from where users can select a city and press Submit. On submission, it will open a URL link of that city.
Image with Select form

City Selected and Submitted Then it will open that city link

The code i need to work is Below:

 <form class="form form-inline" id="link">
                                            <div>
                                                <select class="button-46 " style=" padding: 14px 14px;">
                                                    <option disabled selected hidden style="width: max-content;">Select city</option>
                                                    <option  style="  background-color: black; " value="http://google.com/">Peshawar</option>
                                                    <option  style="  background-color: black; " value="http://google.com/">F7, Islamabad</option>
                                                    <option  style="  background-color: black; " value="http://yahoo.com/"   >Bahria Islamabad</option>
                                                    <option  style="  background-color: black; " value="http://bing.com/">Sialkot</option>
                                                </select>
                                            </div>
                                            <input class="button-46" style="width: 50%; padding: 6px;" type="submit" name="SUBMITBUTTON" value="Submit" />
                                            <!-- HTML !-->


                                        </form>
                                        <!--end form-->
                                    </div>
                                    <!--end col-md-6-->
                                </div>
                                <!--end row-->
                                <div>
                                   
                                </div>
                                <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
                                <script>
                                    $('#link').on('submit', function (e) {
                                        e.preventDefault();
                                        var $form = $(this),
                                                $select = $form.find('select'),
                                                links = $select.val();
                                                                                                window.open(links,"_self");

                                        if (links.length > 0) {
                                            for (i in links) {
                                                link = links[i];ccc
                                                window.open(links,"_self");
                                            }
                                        }
                                    });
                                </script>

I have been working with an API where I’m calling it from a wordpress custom plugin. One of the response parameters that i need is Uid which is a long integer
This is what i’m getting on postmon

But when I try to print same response on php it rounds the number somehow??

Here is what i get on php side

Im using wp_remote_post method from wordpress.

I am showing only year in calender view using datepicker. But I want to set maximum and minimum year range and disable year before/after range I want to set in Datepicker.

Here is my javascript code:

$("#datepicker").datepicker({
        format: "yyyy",
        viewMode: "years",
        minViewMode: "years",
        autoclose: true,
        changeYear: true,
        yearRange: '1900:' + new Date().getFullYear()
    });

But year range is not working for me. Any help will be highly appreciated.

Thanks!

Given the following 2D array: var arr = [[1,2,3],[4,5,6],[7,8,9]]

How can get [1,4,7] without using for loops?

My simplest solution is transposing and returning only the first (0th) row.
There must be a more elegant solution, Perhaps something that I can chain onto an array to make it a one-liner?

I am doing filter the data which comes from API but I am stuck at filter the data.

here is my filter.js file

import React from 'react'

  const Filter = ({
  searchInput,
  setSearchInput,
  photos,
  setFiltered
  }) => {

const handleSubmit = (e) =>{
    e.preventDefault();
}

const searchPhotos = (searchValue) =>{
    setSearchInput(searchValue)

if(searchInput) {
    const filterPhotos = photos.filter((photo)=>
        Object.values(photo)
        .join("")
        .toLowerCase()
        .includes(searchValue.toLowerCase())
    )
    setFiltered(filterPhotos)
} else {
    setFiltered(photos)
}
}
  return (
    <>
      <section className='filter'>
            <form className='form-control' onSubmit={handleSubmit}>
                <input type="search" 
                name="search" 
                id="search" 
                autoComplete='off' 
                placeholder='Search Photos'
                onChange={(e)=> searchPhotos(e.target.value)}  
                />
            </form>
        </section>
    </>
)
}
export default Filter

here is photos.jsx file

(where I supposed to filter the data comes from API). On load data comes perfectly via API search query but when I type on search box it will shows error. Uncaught TypeError: photos.filter is not a function

import React, { useEffect, useState } from 'react';
import Filter from './Filter';

const url = 'https://api.pexels.com/v1/search?query=Nature'

const Photos = () => {

const [photos, setPhotos] = useState([]);
const [filtered, setFiltered] = useState([]);
const [searchInput, setSearchInput] = useState("");
const [isLoading, setIsLoading] = useState(true)

useEffect(()=>{
    const fetchPhotos = async () =>{
        const res = await fetch((url),{
            headers: {
                Authorization: 'MY_API_KEY'
            }
        })
        const photos = await res.json()
        setPhotos(photos)
        setIsLoading(false)
    }

    fetchPhotos()
},[])
return (
   <>
        <Filter
            searchInput={searchInput}
            setSearchInput={setSearchInput}
            setFiltered={setFiltered}
            setPhotos={setPhotos}
            photos={photos}
        />

        { 
            isLoading ? (
                <h1 className='loading'>Loading...</h1>
            ) : searchInput.length > 1 ? (
                <section className="countries">
        {
            filtered.photos.map((photo,index)=>{
            return(
                <article  key={index}>
                <div className="flag">
                  <img src={photo.src.original} alt={photo.photographer} />
                </div>
                <div className="details">
                  <h4 className="country-name">
                    Photographer Name: <span>{photo.photographer}</span>
                  </h4>
                </div>
              </article>
            )
        })}
                </section>
            ) : (
                <section className="countries">
                    {
                        photos.photos.map((p, index) =>{
                            const {photos, src} = p

                return(
                            <article key={index}>
                            <div className="flag">
                                <img src={p.src.original} alt={p.photographer} />
                            </div>
                            <div className="details">
                            <h4 className="country-name">
                                Photographer Name: <span>{p.photographer}</span>
                            </h4>
                            </div>
                        </article>
                    )
                        })
                    }
                </section>
            )
        }

        
   </>
)
}
export default Photos

API Data is

{
"page": 1,
"per_page": 15,
"photos": [
    {
        "id": 15286,
        "width": 2500,
        "height": 1667,
        "url": "https://www.pexels.com/photo/person-walking-between-green-forest-trees-15286/",
        "photographer": "Luis del Río",
        "photographer_url": "https://www.pexels.com/@luisdelrio",
        "photographer_id": 1081,
        "avg_color": "#283419",
        "src": {
            "original": "https://images.pexels.com/photos/15286/pexels-photo.jpg",
            "large2x": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
            "large": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940",
            "medium": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350",
            "small": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=130",
            "portrait": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
            "landscape": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
            "tiny": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
        },
        "liked": false,
        "alt": "Person Walking Between Green Forest Trees"
    },
    }
    ]

I want to construct an object array with key-value pair from a string array.

the string array format:

['<ISO Date> - <Log Level> - {"transactionId: "<UUID>", "details": "<message event/action description>", "err": "<Optionall, error description>"}']

the object array format:

[{"timestamp": <Epoch Unix Timestamp>, "loglevel": "<loglevel>", "transactionId: "<UUID>", "err": "<Error message>" }]

stringArray = [
   "2021-08-09T02:12:51.259Z - error - {"transactionId":"9abc55b2-807b-4361-9dbe-aa88b1b2e978","details":"Cannot find user orders list","code": 404,"err":"Not found"}",
   "2022-08-09T02:12:51.275Z - error - {"transactionId":"9abc55b2-807b-4361-9dbe-aa88b1b2e978","details":"Cannot find user orders list","code":404,"err":"Cannot find user orders list"}"
];

objectArray = [
   {
      "timestamp":1628475171259,
      "loglevel":"error",
      "transactionId":"9abc55b2-807b-4361-9dbe-aa88b1b2e978",
      "err":"Not found"
   },
   {
      "timestamp":1660011171275,
      "loglevel":"error",
      "transactionId":"9abc55b2-807b-4361-9dbe-aa88b1b2e97",
      "err":"Cannot find user orders list"
   }
];

function countB3(string, position = 0, count_letter = 0, count = 0){
    if(position < string.length){
        if(string.charAt(position) == 'B'){
            position ++;
            count_letter ++;
            countB3(string, position, count_letter)
        }else{
            position ++;
            countB3(string, position, count_letter);
        }
    }return count_letter
}

This is the code, Idk why the output when i console.log is always 1 no matter what, i manage to do it with a for loop but no idea here….

I am getting Uncaught TypeError: Cannot read property ‘extend’ of undefined error. So anyone please suggest me a solution toenter image description here.

Thanks.

I am newly Interactive video quiz developed, I am working Interactive quiz get Question show particular seconds. But I will face one issue, click on skipping question window not closed. The timeupdate event passes seconds multiple time how to get one time pass seconds. Please help me.

getVideoPlayingOnTime(event) {
    if (this.isVideoQuizFound) {
      var curTimeTrack = 0;

      const timeInMiliseconds = event.target.currentTime;

      const vidDuration = event.target.duration;

      var sec_num = parseInt(timeInMiliseconds, 10);
      var hours = Math.floor(sec_num / 3600);
      var minutes = Math.floor((sec_num - hours * 3600) / 60);
      var seconds = sec_num - hours * 3600 - minutes * 60;

      var x = hours < 10 ? "0" + hours : hours;
      var y = minutes < 10 ? "0" + minutes : minutes;
      var z = seconds < 10 ? "0" + seconds : seconds;

      var getHours = x + ":" + y + ":" + z;

      var a = getHours.split(":");

      var getSeconds = +a[0] * 60 * 60 + +a[1] * 60 + +a[2];

      var getAtSeconds = seconds * 60;

      const timeQuiz = this.interactiveVideoQuiz.map((el) => {
        return el;
      });

      const timeArray = this.interactiveVideoQuiz.map((e)=>{
        return e.quiz_time;
      })


      // if (timeArray.indexOf(getAtSeconds)!== -1) {
      //   console.log('yes the value exists!');
      // }else{
      //   console.log("No, the value is absent.");

      // }

      timeQuiz.some((x) => {
        if (parseInt(x.quiz_time) === getAtSeconds) {
          this.videoStream.nativeElement.pause();
          this.videoQuizId = x.quiz_id;
          this.getVideoQuizz = x.questions;
          this.pager.count = this.getVideoQuizz.length;
          this.activeQuiz = "block";
          this.videoQuizRequired = x.is_required;
        }
      });
    }
  }

Getting below error after installed latest node.js(v16.13.1)

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
I have created static pages for my application and use sass and gulp

I have a static pages and using Sass in the page and use gulp to run on the browser.(npm install). Below are the version whihc wokred my application:-
Node.js – 12.18.0
gulp – “4.0.2”
“gulp-sass”: “4.1.0”

Package.json file

“scripts”: {
“start”: “gulp watch”
},
“dependencies”: {
“@fortawesome/fontawesome-free”: “5.15.1”,
“@ttskch/select2-bootstrap4-theme”: “^1.5.2”,
“bootstrap”: “4.5.3”,
“bootstrap-datepicker”: “^1.9.0”,
“jquery”: “3.5.1”,
“jquery.easing”: “^1.4.1”,
“select2”: “^4.1.0-rc.0”,
“gulp”: “4.0.2”
},
“devDependencies”: {
“browser-sync”: “2.26.13”,
“del”: “6.0.0”,
“gulp”: “4.0.2”,
“gulp-autoprefixer”: “7.0.1”,
“gulp-clean-css”: “4.3.0”,
“gulp-header”: “2.0.9”,
“gulp-plumber”: “^1.2.1”,
“gulp-rename”: “2.0.0”,
“gulp-sass”: “4.1.0”,
“gulp-uglify”: “3.0.2”,
“merge-stream”: “2.0.0”
}

Even using this command npm rebuild node-sass is not changing anything.

Kindly help me to fix this issues.

Hi guy’s i’ve been working with next.js, redux and sanity.io. It’s been awful… Lol

Anyways here’s the code i’m stuck with

ServiceCards.js 

import React from 'react';
import { useSelector } from 'react-redux';
import { getNavItems } from '../redux/actions/navItems';

const ServicesCards = () => {
  const services = useSelector((state) => state.services.services);

console.log(services)

  return (
    <>
    {Object.keys(services).map((item) => {

   

return(
  <h2>{item}</h2>
)



     
  
    })}
   
    </>
  );
};
export default ServicesCards;

as you can see i am connecting to the redux store perfectly and the data is been retuned like:

{0: {…}, 1: {…}, 2: {…}}
0:
body: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug: {_type: 'slug', current: 'patios'}
title: "Patios"
_id: "70f4ad81-f8eb-414a-8e76-da8bf98cc4de"
[[Prototype]]: Object
1: {_id: 'cc9548aa-ccf5-4688-a6ac-3b1a41f9896d', body: Array(10), locations: Array(1), mainImage: {…}, slug: {…}, …}
2:
body: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug:
current: "tree-removal"
_type: "slug"
[[Prototype]]: Object
title: "Tree Removal"
_id: "f63a0092-4b89-4ea9-9e49-f618d5f5f0b9"
[[Prototype]]: Object
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

So the structure of the data i am getting back is

{
0:{...},
1: {...},
2:{...}

}

Usually i just use Object.keys to map objects and i have no issues using this, so why will it not work here?

Closer look at Object.keys

return (
    <>
      {Object.keys(services).map((item) => {
        return <h2>{item}</h2>;
      })}
    </>
  );

and this is what i get back from render

0
1
2

With no data at all.

store.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { createWrapper } from 'next-redux-wrapper';
import reducer from './reducers/pages';

const middleware = [thunkMiddleware];

const initialState = {
  pages: {},
  navItems: {},
  services: []
};

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

const initStore = () => {
  return store;
};

const wrapper = createWrapper(initStore, { debug: true });

export default wrapper;

i Have had to set initialState in next-redux-wrapper to get it to work, don’t ask me why… I wish i would have stayed with Gatsby.js.

I really help someone can help with this as it’s driving me crazy, i bet it’s so simple!!

Using chart.js (v3.7.0)

Set up a Radar chart using multiple datasets that include 0 values (and needs to be kept as 0 for tooltip & data purposes).

Trying to find a way to set/include a drawn tick marker for 0 values on the chart.

beginAtZero option has no effect whatsoever on the initial tick display position.

Current Chart Display (image) – Desired Chart Display (image)

Is this what’s supposed to happen with the beginAtZero option, and there’s been some sort of regression? If not, is this even possible with chart.js?

Options:

options = {
    scales: {
      r: {
        min: 0,
        max: 99,
        beginAtZero: true,
        angleLines: {
          display: false
        },
        ticks: {
          display: false,
          stepSize: 33.333
        }
      }
    }
  }

Sample Data:

data = {
    labels: ['Field 1','Field 2','Field 3','Field 4','Field 5','Field 6' ],
    datasets: [
      {
        label: 'Dataset 1',
        data: [ 10, 99, 0, 76, 0, 0 ]
      },
      {
        label: 'Dataset 2',
        data: [ 99, 35, 0, 0, 54, 0 ]
      }
    ],
  }

Thanks in advance!

I would like to compare 2 arrays of numbers by checking if all numbers in the second array are greater than each number in the first array.

Example:

const arr1 = [1,2,3,4] 
const arr2 = [2,3,4,5] 
// return true

//-----------------

const arr1 = [3,3,3,3] 
const arr2 = [2,3,4,5] 
// return false

I’m not finding a solution for this. Somebody can help?

I am trying learn to transition between multiple charts using buttons. Here, i want to transition between bar and scatter chart (and may be add a line chart button as well). I have been able to show respective charts by the click of the button. But, i am not able to figure out how to exit one chart when the button for the other chart is clicked and vice-versa. Following is screenshot of the interactive figure that i have created. Here, we can see that both charts show together.

Following is the data (data.csv) i am using to create the interactive chart:

Below is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Scatter to Bar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="container" class="container">
        <h1>Transition from one chart to other</h1>
        <div id="main" role="main">
            <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" id="bar" class="btn btn-default">Bar</button>
                <button type="button" id="scatter" class="btn btn-default">Scatter</button>
            </div>
            <div id="vis"></div>
        </div>
    </div>

    <script src="d3.v6.js"></script>
    <script src="transition.js"></script>
     
</body>
</html>

And the D3.js code:

//load data----


async function createApp(){
    const dataset= await d3.csv('data.csv')

    //create dimensions---
    let dimensions={
        width: 800,
        height:600,
        margins: {
            left: 50,
            right: 20,
            top:20,
            bottom: 50,
        },
    };

    //bound dimensions
    dimensions.boundedwidth=dimensions.width-
        dimensions.margins.left-
        dimensions.margins.right;
    dimensions.boundedheight=dimensions.height-
        dimensions.margins.top-
        dimensions.margins.bottom;


    //Draw canvas----
    wrapper=d3.select("#vis")
        .append("svg")
        .attr("width", dimensions.width)
        .attr("height", dimensions.height);

    bounds=wrapper.append("g")
        .style("transform", `translate(${
            dimensions.margins.left
        }px, ${
            dimensions.margins.top
        }px)`);
        
    //create scales------
    const xScatterscale= d3.scaleLinear()
        .range([0, dimensions.boundedwidth])
        .nice()        

    const yScatterscale= d3.scaleLinear()
        .range([dimensions.boundedheight, 0])
        .nice()     

    const xBarscale= d3.scaleBand()
        .range([0, dimensions.boundedwidth])
        .padding(0.2)
    
    const yBarscale=d3.scaleLinear()
        .range([dimensions.boundedheight, 0])
        .nice()

    //Draw perpherals--axes-------
    //create axis generators
    const xAxisgeneratorscatter= d3.axisBottom()
        .scale(xScatterscale)
        .ticks(8)      

    const yAxisgeneratorscatter= d3.axisLeft()
        .scale(yScatterscale)
        .ticks(9)
      
    const xAxisgeneratorbar=d3.axisBottom()
        .scale(xBarscale)

    const yAxisgeneratorbar=d3.axisLeft()
        .scale(yBarscale)

    const xAxis= bounds.append("g")
        .attr("class", "x-axis")
            .style("transform", `translateY(${
                dimensions.boundedheight
            }px)`)  
            
    const yAxis=bounds.append("g")
            .attr("class", "y-axis")

   //binding data to empty request----- 
    const requests= bounds.append("g")
            .attr("class", "request")

    const chartgroups= requests.selectAll(".request")
                .data(dataset)
                .enter().append("g")

    let duration = 750           

    const updateTransition = d3.transition().duration(duration) 
    
     scatterplot()
    
    //create functions to draw data scatter plot----
    function scatterplot(){

        const xAccessorscatter= d=> +d.risk
        const yAccessorscatter= d=> +d.return

        xScatterscale.domain([0, d3.max(dataset, xAccessorscatter)+0.05])
        yScatterscale.domain([0, d3.max(dataset, yAccessorscatter)+0.02])

        xAxis.call(xAxisgeneratorscatter)            

        yAxis.call(yAxisgeneratorscatter)
     
        const newscattergroup= chartgroups.append("circle")
            .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
            .attr("cy", dimensions.boundedheight)
            .attr("r", 0)

        const scattergroups= newscattergroup.transition(updateTransition)
            
            scattergroups
                .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
                .attr("cy", d=>yScatterscale(yAccessorscatter(d)))
                .attr("r", 5)
                .attr("fill", "cornflowerblue")               
                       
} 

    //create functions to draw data bar plot----
    function plotbar(){

        const xAccessorbar = d=> d.id
        const yAccessorbar = d=> +d.equity

        xBarscale
            .domain(dataset.map(xAccessorbar))
            
        yBarscale
            .domain([0, d3.max(dataset, yAccessorbar)+0.1])
      
        xAxis.call(xAxisgeneratorbar)

        yAxis.call(yAxisgeneratorbar)

        const newbarsgroups= chartgroups.append("rect")
            .attr("x", d=> xBarscale(d.id))
            .attr("height", 0)
            .attr("y", dimensions.boundedheight)
            .attr("width", xBarscale.bandwidth())

        const t= newbarsgroups
                .transition()
                .duration(duration)        
      
        t
            .attr("x", d=> xBarscale(d.id))
            .attr("y", d=> yBarscale(d.equity))
            .attr("width", xBarscale.bandwidth())
            .attr("height", d=>dimensions.boundedheight- yBarscale(yAccessorbar(d)))
            .attr("fill", "cornflowerblue")
                               
    }
 
        d3.select("#scatter").on("click", function () {
            scatterplot()
                      
          });
        
        d3.select("#bar").on("click", function () {
            plotbar()
          
          });

}

createApp()

I am new to d3.js and still trying to figure out the Enter, Update, Exit trinity. I have found some examples where button is has been used to transition/update bar charts with new data. However, i am struggling to figure out how to exit one chart when the other chart gets drawn and vice versa on the click of the button.

Any suggestions on how to accomplish this will be highly appreciated.

Thanks a lot!

I am trying to parse through a 2D array, remove empty cells, and then push it to a new 2D array. When I do the .push([]) step before the IF statement, everything works fine but unfortunately that pushes an empty array every iteration of the for loop. When I try to put that line within the If statement, I get the following error: TypeError: Cannot read property ‘push’ of undefined.

This doesn’t work:

  var i=0;
  var oA = [];

  for(i; i<bRows;i++)
  {  
  
    if(nbaValues[i][0]){
      oA.push([]);
      for(var j=0;j<bCol;j++){
          
        oA[i].push(nbaValues[i][j]);
        }
    }

  }
  Logger.log(oA);

While this works:

  var i=0;
  var oA = [];

  for(i; i<bRows;i++)
  {  
    oA.push([]);
    if(nbaValues[i][0]){
      
      for(var j=0;j<bCol;j++){
          
        oA[i].push(nbaValues[i][j]);
        }
    }

  }
  Logger.log(oA);

Thanks in advance!