Tag: javascript

javascript – Can the fetch () url parameter be a local .json file, or just an internet api?

You see, my program is just to show my database data from xampp in .json format to work with fetch (), and it works fine.

But when, instead of calling my file called json.php (where my text is generated in .json) I call json.json (which I wrote all the bd by hand to verify how it worked) I release this error:
"Fetch API cannot load file: /// C: /Users/Sistemas2/Desktop/Portafolio/practicando-JSON/json.json. URL scheme must be" http "or" https "for CORS request." And I don't know why it is. Thank you.

This is the code.

     



    
    
    
    Practicing


  

  

    
      

        ID
        NAME
        COUNTRY
        AGE
        OCCUPATION

This is the script

var busqueda = document.getElementById("buscar");
busqueda.addEventListener('click', obtenerDatos);

function obtenerDatos(){
    // fetch('json.php') --- Este fetch si lo lee bien que es cuando estoy corriendo xampp
    fetch('json.json')
    .then( res => res.json() )
    .then( datos => {
        pintarTabla(datos)
    });
}
function pintarTabla(datos){
    contenido.innerHTML = "";
    for (let valor of datos){
        contenido.innerHTML += `
            
                ${valor.id}
                ${valor.nombre}
                ${valor.pais}
                ${valor.edad}
                ${valor.ocupacion}
            
        `
    }

}

My connection php when I run xampp and when I do the getAll () function to make my json.php url type .json.

set_charset("utf8");
        return $link;
    }
}
class personas{
    private $db;
    private $lista;
        public function __construct(){
            $this->db=conexion::conn();
            $this->lista=array();
        }
        public function traerTabla(){
            $tabla=$this->db->query("SELECT * FROM personas");
            while($filas=$tabla->fetch_assoc()){
                $this->lista()=$filas;
            }
            return $this->lista;
        }
        public function obtenerDatos(){
            $query=$this->db->query("SELECT * FROM personas");

            return $query;
        }
        public function getAll(){
            $datosPersonas = new personas();
            $datos = array();
            $res = $datosPersonas->obtenerDatos();
            if ($res){
                while($row = $res->fetch_assoc()){
                    $item = array(
                        'id' => $row('id_Personas'),
                        'nombre' => $row('Nombre'),
                        'pais' => $row('Pais'),
                        'edad' => $row('Edad'),
                        'ocupacion' => $row('Ocupación')
                    );
                    array_push($datos, $item);
                }
                echo json_encode($datos);
            }else{
                echo json_encode(array('mensaje' => 'No hay elementos registrados'));
            }
        }
    }
?>

The file that only generates the text in .json (json.php)

getAll();
?>

This is my file json.json that in the fetch () of the script I want to read but at the moment of running the program I get the error that I mentioned at the beginning.

(
    {
        "id":"1",
        "nombre":"Antonio",
        "pais":"Mexico",
        "edad":"26",
        "ocupacion":"Estudiante"
    },
    {
        "id":"2",
        "nombre":"Juan",
        "pais":"Ecuador",
        "edad":"30",
        "ocupacion":"Ingeniero en sistemas"
    },
    {
        "id":"3",
        "nombre":"Ximena",
        "pais":"Argentina",
        "edad":"20",
        "ocupacion":"Disenadora grafica"
    },
    {
        "id":"4",
        "nombre":"Alberto",
        "pais":"Chile",
        "edad":"29",
        "ocupacion":"Gerente de operaciones"
    },
    {
        "id":"5",
        "nombre":"Marcela",
        "pais":"Mexico",
        "edad":"24",
        "ocupacion":"Consultora"
    },
    {
        "id":"6",
        "nombre":"Carmen",
        "pais":"Chile",
        "edad":"27",
        "ocupacion":"Abogada"
    },
    {
        "id":"7",
        "nombre":"Salvador",
        "pais":"Argentina",
        "edad":"49",
        "ocupacion":"Analista de datos"
    },
    {
        "id":"8",
        "nombre":"Marcelo",
        "pais":"Mexico",
        "edad":"39",
        "ocupacion":"Desarrollador de software"
    },
    {
        "id":"9",
        "nombre":"Georgina",
        "pais":"Ecuador",
        "edad":"31",
        "ocupacion":"Recepcionista"
    },
    {
        "id":"10",
        "nombre":"Gilberto",
        "pais":"Chile",
        "edad":"23",
        "ocupacion":"Calidad"
        }
)

javascript – It's giving nan because

The field is an input that receives only 0 and 1, so I take the value and decode it using 

    $(document).ready(function() {
  $("#field").keyup(function() {
    $("#field").val(this.value.match(/(0-1)*/));
    var valor = $("#field")
      .val()
      .split("")
      .reverse()
      .join("");
    console.log(valor);
    for ((i, v) in valor) {
      var soma =+  Math.pow(2, i) * v;
    }
    console.log(soma);
  });
});

but console.log (sum) is giving NaN

javascript: get ID for a list item with JS

I am trying to set up a simple subscription tool where users can subscribe or unsubscribe from several distribution lists. The idea is to select a user through a people selector (& # 39; subuser & # 39;), select a list (& # 39; sublist & # 39;) and click subscribe (to be added to the selected list) or unsubscribe (to be removed from the selected list). I have had success with the subscription part, but I got stuck canceling the subscription. I know how to remove an item from a list, but to do that I need to have an item ID (or is there any other way?). This is the part of my code that I want to use to get the item ID that includes a user selected through the people picker, but itemID is not defined:

function removeUser()     
{    
var clientContext = new SP.ClientContext(siteurl);    
var value1 = document.getElementById('subuser').value;    
var value2 = document.querySelector('input(name="sublist"):checked').value;    
var queryLookup = ""+ value1 +"";
var itemID="";

$().SPServices({    
    operation: "GetListItems",    
    async: false,    
    listName: value2,    
    CAMLViewFields: "",    
    CAMLQuery: queryLookup,    
    completefunc: function(xData,Status) {    
        itemID = $(xData.responseXML.xml).find("z\:row").attr("ows_ID");
        }
    });
}

SPServices can be replaced by any other work solution. Thanks for any suggestions.

javascript – Blur HTML5 canvas problem

The canvas does not allow me to use other domain URLs and shows an error between domains.

I have to use this demo https://tympanus.net/Development/FlowmapDeformation/index3.html but I have some interface problems.

At the front end of the demonstration, it shows blurred SVG images on the canvas.

Demonstration use under Vertex and fragment:

const vertex = `
                attribute vec2 uv;
                attribute vec2 position;
                varying vec2 vUv;
                void main() {
                        vUv = uv;
                        gl_Position = vec4(position, 0, 1);
                }
        `;
const fragment = `
                precision highp float;
                precision highp int;
                uniform sampler2D tWater;
                uniform sampler2D tFlow;
                uniform float uTime;
                varying vec2 vUv;
                uniform vec4 res;

                void main() {

                        // R and G values are velocity in the x and y direction
                        // B value is the velocity length
                        vec3 flow = texture2D(tFlow, vUv).rgb;

          vec2 uv = .5 * gl_FragCoord.xy / res.xy ;

          vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
          myUV -= flow.xy * (0.15 * 0.5);
          vec3 tex = texture2D(tWater, myUV).rgb;

          gl_FragColor.rgb = vec3(tex.r, tex.g, tex.b);
          gl_FragColor.a = tex.r;
                }
        `;

See the original SVG image: https://tympanus.net/Development/FlowmapDeformation/img/Alienation.svg

See the attached screenshot for more information.

enter the description of the image here

html – Add images dynamically with javascript

function criaImagem(){
    div = document.getElementById("imagens");
    
    image = document.createElement("img");
    image.src = prompt("Digite o nome ou link da imagem: ");
    
    div.appendChild(image);
}

How to play audio with nodeJs readFileSync and the javascript audio API?

I'm making an audio player with javascript, more specifically nodejs Y electronAt the moment I am playing the audio using the tag , putting the path to the file in the property src of the label and controlling the reproduction by javascriptHowever, I wonder if it is possible to read the audio file using the function fs.readFileSync from nodejs and put the buffer on the object Audio. Is that possible?

javascript: I can't dynamically open the image in Modal (the first image is loading in Modal)

This is my view where I want the pop-up mode to appear when I click on the image and show the same image I am clicking on:

@foreach ($products as $product)

                    

                        image }}" style="width: 100%" onclick="openModal(); currentSlide(2)" class="hover-shadow cursor">

This is my script that I am using for my Modal to display images.

function openModal() {
        document.getElementById("myModal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides(i).style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots(i).className = dots(i).className.replace(" active", "");
        }
        slides(slideIndex-1).style.display = "block";
        dots(slideIndex-1).className += " active";
        captionText.innerHTML = dots(slideIndex-1).alt;
    }

Modal shows me the same image when I click on any image. I want to see the modal image that I am clicking on.
Please someone help me. I'm stuck.

All matrix combination in javascript

  const combinations = courses.flatMap(course =>
    durations.flatMap(duration =>
      isMembers.flatMap(isMember =>
        isFreeHours.flatMap(isFreeHour => ({
          course,
          duration,
          isMember,
          isFreeHour
        }))
      )
    )
  );

If there is more combination, there will be more nesting, how to fix it?

javascript – General Q || Design and operation with SharePoint

I am new to Microsoft SharePoint. I was curious to know if anyone had a tutorial or a great explanation on how (as a site owner) I could modify a page (say the homepage for now) and add things like a header to the homepage (so every time that everyone comes, they will see the content that I have). So how do I write CSS or SCCS modularized to take effect on each page? It seems a bit confusing how I could do this, and I really don't see any way to do it. The documentation does not really show the initial steps. Once I know where and how to modify things, the real CSS part and what doesn't seem easy enough. Any help will be greatly appreciated, thanks

javascript – Momentjs: Convert local time to Epoch

I am using momentjs to convert hours, I need to convert one hour to epoch with the following format

   // hora epoch: 1582301681.084594

I use the following code to try to find the solution

var epoch1 = moment('2020-02-01T15:00:00', "YYYY-MM-DDTHH:mm:ss").valueOf();
console.log(epoch1);
// resultado: 1582327901000

but I can't make the format go with decimal point