javascript – Page 8152 – Blancer.com Tutorials and projects

Retrieve items from SharePoint list using JS

I know there are many posts like mine, but I couldn’t find any answer to why it is not working for me.

Based on that answer: https://stackoverflow.com/a/59340514/17645049

I changed the name of the columns, the list’s name and of course the list’s URL. Running the code gives me the error “Request failed. Unexpected server response data. Null”.

Any suggestion?

Browser: Edge. Full code:

var siteUrl = 'listURL';
var listName = 'listName';

function retrieveListItems() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle(listName);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name='ID'/>' + '<Value Type='Number'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += 'nID: ' + oListItem.get_id() +
            'nTitre: ' + oListItem.get_item('Titre') +
            'nCorps: ' + oListItem.get_item('Corps') +
            'nLangue: ' + oListItem.get_item('Langue');
    }
    alert(listItemInfo.toString());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

Listening onchange events on a dropdown to update a chart data list

I’m trying to figure it out how can I create an onchange event to listen to the value from the dropdown, so the chart will change it values depending on that id, for that I have the following elements:

In views.py:

def html(request, filename):
    #Data for the graph
    id = list(Device.objects.values_list('patientId', flat=True).distinct())
    labels = list(Device.objects.values_list('hour', flat=True))
    glucose_data = list(Device.objects.values_list('glucoseValue', flat=True))
    data =  glucose_data
    formatted_data = select_formatted_date(labels)
    lastPatientData = Device.objects.filter(patientId = id[-1])
    #the last element added
    hourArray = []
    glucoseArray = []
    for item in lastPatientData:
        lastPatientHour = Device._meta.get_field('hour')
        lastPatientGlucose = Device._meta.get_field('glucoseValue')
        formattedHour = lastPatientHour.value_from_object(item)
        frt_hour = formattedHour.strftime('%Y-%m-%d %H:%M:%S')
        formattedGlucose = lastPatientGlucose.value_from_object(item)
        hourArray.append(frt_hour)
        glucoseArray.append(formattedGlucose)
    device_list = list(Device.objects.all())
    for device in device_list:
        print(device)

    #f = DateRangeForm(request.POST)
    context = {"filename": filename,
               "collapse": "",
               "hourArray":hourArray,
               "glucoseArray": glucoseArray,
               "patientId": id,
               "dataSelection": formatted_data,
               "deviceList": device_list,
               "labels": json.dumps(labels, default=str),
               "data": json.dumps(data)
               }
return render(request, f"{filename}.html", context=context)

In forms.py, I have this, but I really don’t know what to do with this data:

from django import forms

idsList = forms.ModelChoiceField(queryset = Device.objects.values_list('patientIId'),widget = forms.Select(attrs = {'onchange' : "myFunction()"}))

my model is:

class Device (models.Model):
    patientId = models.IntegerField(unique=True)
    deviceId = models.CharField(unique=True,max_length=100)
    hour = models.DateTimeField()
    type = models.IntegerField()
    glucoseValue = models.IntegerField()

And in the index.html, I have the following(in data and label fields):

    <label for="patientId">Choose a patient:</label>
       <select name="patient" id="patient">
          {% for item in patientId %}
            <option value="{{item}}">
              {{item}}
            </option>
          {% endfor %}
        </select>

<div class="card-body">
 <div class="chart-area">
  <canvas id="weeklyChart"></canvas>
 </div>
</div>

The chart value is stored in a script tag, as follows:

var ctx = document.getElementById("weeklyChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ hourArray|safe}},//here in the labels
    datasets: [{
      label: "Value",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: {{ glucoseArray|safe}},//and the other coordinate is here
    }],
  }
);

My question is what is the most efficient method to change that chart values based on the id that I’m choosing from the dropdown.

Most efficient way to update an object property within an array of objects

I am wondering what is the most efficient way to update an object property that is stored in an array with 10k+ items.

For example if I have an array that holds objects like this {name:””, price:””)

I want to replace or more like update the price values if the array contains that element already.

Check if Array contains object with name = x, if so replace the price with the newest price.

I dont want to have duplicate elements in that array so its not getting to big, i figured I should update it if a property value already exists in it.

So far I have tried several ways like with using indexOf, splice, or just for loops. I am wondering what is the best way performance wise to deal with big arrays.

let array = [
{name:"abc", price: 24},
{name:"cde", price: 25},
{name:"fgh", price: 22},
{name:"gfds", price: 21},
]

function addToArray(elem){
  //check if array contains elem by checking for name property value
  if(array.filter(el => el.name === elem.name).length > 0){
    //update the array element that has the name of the passed elem
  }
}

Replace empty values with previous values in Objects Array

I am trying to replace empty values with previous non-empty values with dynamic keys.

[{
        "ACRI": "1298",
        "APL": "231.123",
        "BDTV": "8667.29",
        "BPOS": "29.43"
    },
    {
        "ACRI": "",
        "APL": "",
        "BDTV": "8667.29",
        "BPOS": "29.43"
    }
]

this array need to be converted into like below

[{
            "ACRI": "1298",
            "APL": "231.123",
            "BDTV": "8667.29",
            "BPOS": "29.43"
        },
        {
            "ACRI": "1298",
            "APL": "231.123",
            "BDTV": "8667.29",
            "BPOS": "29.43"
        }
    ]

I referred this Question but this only working with fixed keys not the dynamic keys.

x-model Alpinejs cant read value. Programmatic access for x-model

I`m try to Programmatic access for x-model. But it is undefined. What is wrong?

this.$refs['SCOPE']._x_model.get()

this.$refs[‘SCOPE’]._x_model – undefined.

<select x-model="scope" x-ref="SCOPE" name="form-scope" id="form-scope" class="js-choice">
   <option value="">Выберите сферу применения</option>
</select>

Doc – https://alpinejs.dev/directives/model#programmatic%20access

Sign SHA512-HMAC with private key in java

I want to build a function that sign a SHA512 HMAC with a Private key with a password to open that file. I have done that with Javascript but I’m not able to do it in JAVA. here is my code in Javascript:-

const fs = require('fs')
const crypto = require('crypto');

const getSignatureByInput = (input, crt) => {
    let privatePem = fs.readFileSync(crt);
    let key = privatePem.toString('ascii');
    let sign = crypto.createSign('RSA-SHA512');
    sign.write(input)
    let signature = sign.sign({ key, passphrase: 'Password' }, 'hex')
    return signature;
}

// Usage
let hamc = crypto.createHmac("sha512", '12345678-73a8-414c-9832-fcd4b2d9b362').update(
    JSON.stringify({
    "body": {
        "Id": "123"
    }
})
).digest("hex");


console.log(hamc)

let signatureSignedByPrivateKey = getSignatureByInput(hamc,'./private.key');
console.log(signatureSignedByPrivateKey)

and the below is the example of my private key:-

Appreciate your support!
Thanks in advance…

How to see if values are in the same “line” within an object in javascript

Not sure how to approach this problem, but I want to see if two values are in the same ‘line’

var inventory_needed = [
    { section: "hardware",          supplies: "hammers"                       },
    { section: "plumbing",          supplies: "pipes"                         },
    { section: "garden",            supplies: "grass seeds"                   },
    { section: "cleaning supplies", supplies: ["hand sanitizer", "detergent"] },
    { section: "appliances",        supplies: ["fridges", "dishwashers"]      } 
];

psuedocode of what I want to try to attempt

if(section.value && supplies.value in the same line) {
    return true;
}
else {
    return false;
}

//example 1
if("appliances" && "fridges" in the same line) {
    return true; //would return true
}
else {
    return false;
}

//example 2
if("plumbing" && "fridges" in the same line) {
    return true; 
}
else {
    return false; //would return false
}

Filling up one dropdown with same value of the other

Currently I have 2 dropdown boxes with the same options. These options are all filled from the backend. Now I want it so that whenever I choose 1 option in the dropdown box, the other dropdown also automatically chooses the same value and this works both ways. The following is my dropdown box code:

        <select name="lead_status" id="leadstatus" class="form-control">
          <option value="">Select</option>
          <?php foreach($leadstatus as $key => $status): ?>
          <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>
          <?php endforeach; ?>
        </select>
        <select name="lead_status" id="leadstatus2" class="form-control">
          <option value="">Select</option>
          <?php foreach($leadstatus as $key => $status): ?>
          <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>
          <?php endforeach; ?>
        </select>

I’ve tried creating a function for onclick where it creates a check saying:

if (document.getElementById('leadstatus').value == '1')
  document.getElementById("leadstatus2").value = '1';

But this wont work since I have a lot of data in the dropdown lists and it is dynamic.

How to get a date format from date string value? [duplicate]

Need to get dd/MMM/yyyy (date format) from 01/jan/2022(date string)?

Is there any possible way available?

html inside latex

I am new to Latex, want to know how to add html to latex.
e-g here the is sample code

begin{equation}
        begin{aligned}
        3r&= <div id="someid123">This is some div</div> quad text{(problem statement)} \
        r&=? quadtext{(divide both side)} \
        6r + 3 &= 6 * ? + 3 = ? quadtext{(substitute in $r$)}
        end{aligned}
     end{equation}

What I want is to call the div using JavaScript and replace content after latex code is generated, any idea how to do that? because right now when I add html code to latex it just messes everything up.

This is how the output looks if I add html

begin{equation} begin{aligned} 3r&=
This is some div
quad text{(problem statement)}  r&=? quadtext{(divide both side)}  6r + 3 &= 6 * ? + 3 = ? quadtext{(substitute in )} end{aligned} end{equation}

How to enable Autocomplete as well as costum inputs in the same input-field in Angular?

How do I enable Autocomplete as well as costum inputs in the same input-field in Angular?
The user should have the option to input ” * ” for getting the autocomplete “All items” and he should be able to input ” * abc * ” and search for this specific value. However after inputing “*” the autocomplete gets triggered and the user cant go on typing.

a_enum contains a value “*” which means search for all items in a_enum.

Removing [value] in the visible input-field breaks the autocomplete. Items are not transferred to the visible input-field.

<input [id]="a" [value]="a_enum">
<input [id]="a" [value]="a_enum" hidden="hidden">
<div *ngFor="item of items">{{item}}<div>

React routing not loading pages

Hi i am learning react and i got stuck on a problem. i have started working on routing but its not working at all. Code:

 import {Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';


function App() {
  return (
      <div>
        <Route path = '/'>
          <AllMeetupsPage />
        </Route>
        <Route path = '/new-meetup'>
          <NewMeetupsPage />
        </Route>
        <Route path = '/favorites'>
          <FavoritesPage />
        </Route>
      </div>
  );
}

export default App;

i have a blank screen even though the pages should load. Each page when open should only print one line just to see that i can see routing working however all i see is a blank space meaning its not working correctly.You can view the full code here: https://github.com/Kroplewski-M/Routing
thank you in advance

Is there any other way around which I can use to add any property to head seaction of the app in nuxtjs without using nuxt head method

I want to have similar feature like WordPress, where I can add meta tags or insert external script from front-end and it will injected to actual website.

Like I non programmer admin can add any third party script from admin panel and it will be inject to SSR nuxt application.

Please help it’s possible to to, I really appreciate

Need to add one input field in file upload component

I have one component in which we have file upload facility. I need to add one additioonal input filed so when user clicks on the upload button one input filed and one file should be sent to server.
since its class component I am not able to use hook. its legacy application.

import axios from 'axios';

import React,{Component} from 'react';

class App extends Component {

    state = {

    // Initially, no file is selected
    selectedFile: null
    };
    
    // On file select (from the pop up)
    onFileChange = event => {
    
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
    
    };
    
    // On file upload (click the upload button)
    onFileUpload = () => {
    
    // Create an object of formData
    const formData = new FormData();
    
    // Update the formData object
    formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
    );
    
    // Details of the uploaded file
    console.log(this.state.selectedFile);
    
    // Request made to the backend api
    // Send formData object
    axios.post("api/uploadfile", formData);
    };
    
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
    
    if (this.state.selectedFile) {
        
        return (
        <div>
            <h2>File Details:</h2>
            
<p>File Name: {this.state.selectedFile.name}</p>

            
<p>File Type: {this.state.selectedFile.type}</p>

            
<p>
            Last Modified:{" "}
            {this.state.selectedFile.lastModifiedDate.toDateString()}
            </p>

        </div>
        );
    } else {
        return (
        <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
        </div>
        );
    }
    };
    
    render() {
    
    return (
        <div>
            <h3>
            File Upload using React!
            </h3>
            <div>
                <input type="file" onChange={this.onFileChange} />
                <button onClick={this.onFileUpload}>
                Upload!
                </button>
            </div>
        {this.fileData()}
        </div>
    );
    }
}

export default App;

I tried a lot but it is not working properly. if you need I can put the modified code. since its quite messy I put only working code without input field.
Could you please help me to add one input field, please.

How to make smooth progress bar that doesn’t jump/skip when incrementing large increments

It’s easy to make a simple progress bar like this one. It looks smooth enough: https://jsfiddle.net/H4SCr/

—
Also shown below:

var d = document.getElementById('child');

function run(div,i){
i += 1;
div.style.width = i+'px';
 if(i > 200) i = 200;
div._timer = setTimeout(function () {
run(div,i)
 },100);

}

run (d,0);

#bar{
    width:200px;
    height:20px;
    background-color:black;
    position:relative;
}
#child{
    position:abosoute;
    top:0px;
    left:0px;
    background-color:red;
    height:20px;
}

<div id="bar">
    
    <div id="child"></div>
    
</div>

However, in the example, it’s only smooth because I’m incrementing by one. If I chose to increment by 50 or 30, it is really choppy and doesn’t look smooth.
I’m recieving the progress amount from a third party API, so this is how the progress will look as I recieve the data:
5%, 23%, 72%, 77%, and 100%

Instead of incrementing the progress bar by 1, I have 5 different progress statuses. How do I make large increments and still make it look smooth?