Category: javascript

I am trying to set padding 0 of the .inner-288 class using fluentui React.
By default, it’s proving a padding of 24px on the right, left, and bottom. I want to make the padding value 0,

.inner-288 {
  padding: 0px 24px 24px;
}

I am trying to set the root style padding 0 values, but it does not work.

styles={{ root: { padding: 0 } }}

How can I make padding to 0 values?

I’m trying to replace a (WordPress) shortcode string that comes from a REST API.
Now I want to replace ‘[faq]’ with a Vue 3 component called ‘FAqItem’.
For this, I use the function resolveComponent().

This is my code:

const html = ref(props.data.text)
const FaqItem = resolveComponent('FaqItem')
if (html.value.includes('[faq]')) {
    html.value = html.value.replace('[faq]', FaqItem);
}

Then in my template I use:

<div class="block prose xl:mt-12" v-html="html"></div>

Now this seems to work, but the replace function is returning [object Object].
How can I make this show my component itself?
It’s important that only the [faq] is replaced.

Thanks in advance!

I have a specific type of errors, which I always want to report with a track system, such as Sentry, or AppInsight. So I created a class inherited from Error, and now I want to call a function every time this error is thrown. I don’t want to do it manually in each and every try-catch clause, not to mention the fact that it’s easy to forget, and other devs can ignore it. How can I do it? Of course, I can put it into the constructor, but calling the side-effect there isn’t a good idea.

In this case, I’m going to report this issue:

class ExhaustiveCheckError extends Error {}

export function exhaustiveCheck(unreachableValue: never): never {
  throw new ExhaustiveCheckError(
    'Should not have reached here. Not all cases are covered'
  );
}

Here it’s used to handle an error when using a switch case/if with data of an unexpected type from IO, for example, from the backend, or user input. I know it’s better to parse/validate data at boundaries with ZOD/Run-types, etc., but now it’s not possible to implement.

What other options do I have?

I have the following piece of text, which is perceived by notepad and the back end as 1026 characters long text (because it has a hyphen in it). But the javascript length property defines it as text 1024 characters long, which allows client validation to pass, how can this be fixed?

Example of the text:

London is the capital and largest city of England and the United Kingdom, with a population of just under 9 million.[1] It stands on the River Thames in south-east England at the head of a 50-mile (80 km) estuary down to the North Sea, and has been a major settlement for two millennia.[9] The City of London, its ancient core and financial centre, was founded by the Romans as Londinium and retains its medieval boundaries.[note 1][10] The City of Westminster, to the west of the City of London, has for centuries hosted the national government and parliament. Since the 19th century,[11] the name "London" has also referred to the metropolis around this core, historically split between the counties of Middlesex, Essex, Surrey, Kent, and Hertfordshire,[12] which since 1965 has largely comprised Greater London,[13] which is governed by 33 local authorities and the Greater London Authority.[note 2][14]

As one of the world’s major global cities,[15] London exerts a strong influence on its arts, entertainment, fashion,

Example saved in js variable:

  const text =
  'London is the capital and largest city of England and the United Kingdom, with a population of just under 9 million.[1] It stands on the River Thames in south-east England at the head of a 50-mile (80 km) estuary down to the North Sea, and has been a major settlement for two millennia.[9] The City of London, its ancient core and financial centre, was founded by the Romans as Londinium and retains its medieval boundaries.[note 1][10] The City of Westminster, to the west of the City of London, has for centuries hosted the national government and parliament. Since the 19th century,[11] the name "London" has also referred to the metropolis around this core, historically split between the counties of Middlesex, Essex, Surrey, Kent, and Hertfordshire,[12] which since 1965 has largely comprised Greater London,[13] which is governed by 33 local authorities and the Greater London Authority.[note 2][14]n' +
  'n' +
  "As one of the world's major global cities,[15] London exerts a strong influence on its arts, entertainment, fashion,"


console.log(String(text).length)

I am a beginner at the neural network. Trying to recreate some basic predict for the formula y = 2x-1 from the tensorflow.js tutorial using ml5.js but something is getting wrong. Here is my code:

const model = ml5.neuralNetwork({
        task: 'regression',
        inputs: ['x'],
        outputs: ['y'],
        debug: true
    });

    const trainingData = [
        {input: {x: -1}, output: {y: -3}},
        {input: {x: 0}, output: {y: -1}},
        {input: {x: 1}, output: {y: 1}},
        {input: {x: 2}, output: {y: 3}},
        {input: {x: 3}, output: {y: 5}},
        {input: {x: 4}, output: {y: 7}}
    ];

    trainingData.forEach(data => {
        model.addData(data.input, data.output);
    });

    model.normalizeData();
    model.train({epochs: 100}, () => {
        console.log('Model trained');

        const inputData = {x: 20};
        model.predict(inputData, (error, result) => {
            if (error) {
                console.error(error);
            } else {
                console.log(`Prediction: ${result[0].value}`);
            }
        });
    });

Expected: 20 => 39,
Actual result: 20 => 6.999997615814209

What am i doing wrong?

I am trying to filter/search in a deeply nested array of subarrays
In order to explain my problem it is better to show the array structure first.

const arr = [
  [
    {
      title: "title 1",
      city: [
        {
          "0": "London"
        },
        {
          "1": "LA"
        }
      ]
    },
    {
      title: "Title 2",
      city: [
        {
          "0": "New York"
        },
        {
          "1": "London"
        }
      ]
    }
  ],
  [
    {
      title: "Title 3",
      city: [
        {
          "0": "Paris"
        }
      ]
    },
    {
      title: "title 4",
      city: [
        {
          "0": "London"
        }
      ]
    }
  ]
];

As you see, in this nested Array there is a city array of of key value pair objects and my task is to search value in this city Array and return only first matching object of every subArray without flattening.

So, let’s say the filter keyword is London, I want to return the first matching object of every subArray which inlcudes that filter keyword.
So here answer would be

const filteredArr = [
  [
    {
      title: "title 1",
      city: [
        {
          "0": "London"
        },
        {
          "1": "LA"
        }
      ]
    }
  ],
  [
    {
      title: "title 4",
      city: [
        {
          "0": "London"
        }
      ]
    }
  ]
];

As you can see from first subArray only first object is returned, even though second object which has a title 2 also includes a value of London in city array.

I know that I can get the first matching object with find method like this:

const filteredCity = city.find((obj) => Object.values(obj)[0] === "London");

But how to combine and get the desired array?

I am sorry if couldn’t explain my Problem properly. Let me know if something is not clear.

Any help will be appreciated.

I am using addthis widget from addthis.com.
I am using a script tag inside head tag:

        <script
            type="text/javascript"
            src="//s7.addthis.com/js/300/addthis_widget.js#pubid=your_pubid"
            async="async"
        ></script>

Now I just need to add a html with className :

<div className="addthis_inline_share_toolbox_3xd0" />

to get a Print and More options on the page, like given image below :

But the problem is, these two options are not showing for the first time page visit. If I do refresh the page, then these two options will show.
I am not able to find what the issue here ?

Note:

I have tried to move the script tag at the last of the body tag. But not working.
I have tried to use the defer option instead of async in script tag. But not working.

how can i invoke fetch method inside single js file?
I created file with content

    const fetch = require("fetch").fetchUrl
 fetch("https://jsonplaceholder.typicode.com/todos/1").then(res =>
        res.json()).then(d => {console.log(d)
        })

then i invoke this

node fetch.js

but receiving error

fetch(“https://jsonplaceholder.typicode.com/todos/1”).then(res =>
^

TypeError: Cannot read properties of undefined (reading ‘then’)
at Object. (C:reporustfetch.js:2:55)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47

i create an simple code like this

for (var b = 0; b < parseDataArr.length; b++) {
                    for (var c = 0; c < parseDataArr[b].data_item.length; c++) {
                        for (var d = 0; d < parseDataArr[b].data_item[c].data_receipt.length; d++) {
                            var kartonReceipt = parseDataArr[b].data_item[c].data_receipt[d].cartonIRBar
                        }
                    }
                }
                log.debug('carton for',cartonIRBar) //not all result for loop only last data has record

how get all result data from cartonIRBAr without enclosing debug in curly braces (define cartonIRBar outside the for)

enter image description here
enter image description here
The last column of table in some cases climb out of the table.
There is an js:

function buildFilesTable(data) {
  const tableBody = $('.raw-revenue-files-table tbody');
  $('.batch-remove').hide();
  $(".selectAll").prop("checked", false);
  $("#counter").html(0);
  $(".checkboxes").prop("checked", false);
  tableBody.html('');

  if (!data.length) {
    tableBody.append(
      `<td colspan="6" class='text-center'>THERE IS NO FILES</td>`
    );
  } else {
    $.each(data, function (i, item) {
      var row = `
          <tr>
              <td><input type="checkbox" 
                         name="selectId" 
                         id="${item.id}" 
                         value=${item.name} 
                         class="checkboxes" /> </td> 
              <td style="max-width:300px;width:300px;word-wrap: break-word;">${
                item.name
              }</td>
              <td>${$.utils.pretifyNumber(item.revenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.revenue.gross)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.net)}</td>
              <td>${$.utils.pretifyNumber(item.rawRevenue.gross)}</td>
              <td>
                <span class="pills ${item.validationStatus}">
                  ${item.validationStatus}
                </span>
              </td>
              <td>
                ${item.existsOnS3 ? 'true' : 'false'}
              </td>
              <td>
                <div class="row ml-0 mr-0">
                 
                  <div class="col-6 pl-0 pr-0">
                    <button
                      type="button"
                      class="btn btn01 small"
                      data-toggle="modal"
                      data-dismiss="modal"
                      data-target="#modalValidate"
                      data-file-id=${item.id}
                      data-ingestion-date=${item.ingestionDate}
                      data-validation-date=${item.validationDate}
                      data-ingestion-total=${
                        item.revenue.net || item.revenue.gross
                      }
                      data-validation-total=${item.validationTotal}
                      data-status=${item.validationStatus}
                    >
                      Validate
                    </button>
                  </div>
                </div>
              </td>
          </tr>
      `;

      tableBody.append(row);
    });
  }
}

There is html:

<div class="modal fade" id="rawRevenueFiles" role="dialog" aria-labelledby="rawRevenueFilesLabel"
             aria-hidden="true">
            <div class="modal05 modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <table class="table table01 raw-revenue-files-table">
                            <thead>
                            <tr>
                                <th>
                                    <label id="counter" for="selectAll">0</label>
                                    <input type="checkbox" class="selectAll" id="selectAll" name="selectAll">
                                </th>
                                <th>Name</th>
                                <th>Net</th>
                                <th>Gross</th>
                                <th>Net (Raw)</th>
                                <th>Gross (Raw)</th>
                                <th>Status</th>
                                <th>Existence on S3</th>
                                <th>
                                    <button type="button" class="btn btn01 small batch-remove">
                                        Remove
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

There is a css:

.summary-table td {
    vertical-align: middle;
    transition: all 0.14s ease-in-out;
}

.summary-table td p:first-child {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.summary-table td p:last-child {
    margin: 0;
    color: #a4a6a9;
}

.summary-table td p.DIFFER {
    color: #d8e02b;
}

.summary-table td p.VALID {
    color: #21A35E;
}

.summary-table td p.NOT_VALID {
    color: #E03F4A;
}

.summary-table tfoot {
    background: #242C33;
}

.summary-table thead th:first-child {
    text-align: left;
    padding-left: 10px;
}

.modal .table01.raw-revenue-files-table td {
    padding: 15px 10px;
    vertical-align: middle;
}

I’m a back-end developer, but i need to fix this issue with the last column in the table. Can you fix my css, please?

I expect a correct table view.

I am creating a modal that can be used in multiple places in my application to upload files, as a result I am not using a <form> because this may be used within an existing form that I don’t want to submit.

html

<input type="file" id="CustomerInvoices-${ogoneRef}" name="uploadFileNameForCustomerInvoices">

JavaScript

$('#CustomerInvoices-'+ogoneRef).change(function (e) {
    clickSubmitUploadFiles(e, ogoneRef);
});

I have the following JavaScript function.

function clickSubmitUploadFiles(event, ogoneRef) {
    let files = event.target.files;
    ;[...files].forEach(function (file) {
        let urlString = 'http://localhost:8085/papertrail/upload-document/'+userName+'/'+ogoneRef;

        $.ajax({
            type: "POST",
            url: urlString,
            headers: {
                "Authorization": "Basic " + btoa(username+":"+password)
            },
            data: file,
            error : function (result) {
                console.log('error', result);
                },
            success : function (result) {
                console.log('success', result)
            }
        });
    });
}

Error

Uncaught TypeError: Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

jquery-1.10.2.min.js:6 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

Problem

So I think the problem is with the data I am trying to upload is not in the correct format.

I get the data as follows:

let files = event.target.files;

and then set it in the ajax request:

            data: file,

Question

How should I set the data for the uploaded file in the request?

I’m simply passing a function to a modal

<a data-modal="modal" data-modal-id="#quick-look" data-tooltip="tooltip" @click="addToModal({{product.product_name}})"  data-placement="top" title="Quick View"><i class="fas fa-search-plus"></i></a>

which logs into this

Raw expression: @click="addToModal(Mini Zoo)"

which looks ok but makes my app crash

the complete error is

[Vue warn]: Error compiling template:

invalid expression: missing ) after argument list in

    addToModal(Mini Zoo)

  Raw expression: @click="addToModal(Mini Zoo)"


1165|    <li>
1166|  
1167|<a data-modal="modal" data-modal-id="#quick-look" data-tooltip="tooltip" @click="addToModal(Mini Zoo)" data-placement="top" title="Quick View"><i class="fas fa-search-plus"></i></a></li>
   |                                                                                                                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1168|   <li>
1169|  

(found in <Root>)

I even added a control to see if Vue reaches all the elements v-if="mounted === true "

I want to create a grid with 3 columns, each column have 4 rows. First and last one start with margin-top 0, center one start with margin-top of 15px

Above image is for example.
Thanks for the help.

I added the image, I want a code for this example in css

I want to understand once concept related to the map iterator in javascript. I want to execute multiple map iterator and I have came up with the below solution.

await Promise.all({
    arrOne.map(async first => {
         arrTwo = //call another await operation
        arrTwo.map(async second => {
            arrThree = //call another await operation
            arrThree.map(async third => {
                //return await operation and result
            })
        })
    })
})

What I want to achieve is to process the data in the parallel approach which I think through Promise.all we can achieve. I want to know if this is the good approach.

Also I want to process a large dataset. Will the above approach works because I was also thinking to process the data in batches.

I have been working on a page for a gaming group I am a part of, but I am not very experienced in HTML nor JS, but figured I would try it out. After a couple of hours of work, I realized I could have used objects… but I do not want to take the time to rebuild it now as I have put a ton of work into it.

currently I have a function to add a couple of input fields and give them personalized IDs for each

function add(){
        var teamList = parseInt($('#teamList').val())+1; 
        var feedMenu = parseInt($('#feedMenu').val())+1; 
        var inputMenu = "<p> <input type='text'  id='teamlead"+teamList+"'> <select  id='SS"+teamList+"'>  </p>";

        var feedText = "<p id=stantonList"+teamList+"> Stanton "+teamList+": '<span id=contentGen"+teamList+"></span>' | <span id=listValue"+teamList+"></span> </p>";

        $('#teamMenu').append(inputMenu); 
        $('#feedMenu').append(feedText);
        $('#teamList').val(teamList); 
        $('#feedMenu').val(feedMenu);

    }

I am trying to create a button that will collect all of the +teamList+ values for the respective field IDs, yet I am drawing a blank, and cannot find documentation on anything regarding it. (Most likely as I am the only one with a small enough of an intelligence to try it this way).