Using Toolbox’s Run JavaScript to return a result usable on Bubble

Hi everyone,

First of all: I’ve read a lot of other forum threads on this topic and tried out a lot, but I still cannot get any result, so I count on the Bubble-community-wisdom! Hope someone can help me out here …

The facts:

  • My goal is to compare an string to a list of strings from the database and obtain that string that is the most similar to my input-string.

  • I have a Script that I run successfully on different sites where you can try out JavaScripts - it gives me a usable result (e.g. on JSFiddle.net)

  • In Bubble, I to use the Toolbox Plugin with the Action “Run Javascript” - I then have a Javascript To Bubble element on the page, that should return the result in a form that’s usable on Bubble. Only problem: It does not return anything.

  • Here you can see my settings:

The function is as follows:

function myFunction() {
}

/*
Copyright 2018 Stephen Brown

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/**
 * Calculate similarity between two strings
 * @param {string} str1 First string to match
 * @param {string} str2 Second string to match
 * @param {number} [substringLength=2] Optional. Length of substring to be used in calculating similarity. Default 2.
 * @param {boolean} [caseSensitive=false] Optional. Whether you want to consider case in string matching. Default false;
 * @returns Number between 0 and 1, with 0 being a low match score.
 */

var stringSimilarity = function (str1, str2, substringLength, caseSensitive) {
    if (substringLength === void 0) { substringLength = 2; }
    if (caseSensitive === void 0) { caseSensitive = false; }
    if (!caseSensitive) {
        str1 = str1.toLowerCase();
        str2 = str2.toLowerCase();
    }
    if (str1.length < substringLength || str2.length < substringLength)
        return 0;
    var map = new Map();
    for (var i = 0; i < str1.length - (substringLength - 1); i++) {
        var substr1 = str1.substr(i, substringLength);
        map.set(substr1, map.has(substr1) ? map.get(substr1) + 1 : 1);
    }
    var match = 0;
    for (var j = 0; j < str2.length - (substringLength - 1); j++) {
        var substr2 = str2.substr(j, substringLength);
        var count = map.has(substr2) ? map.get(substr2) : 0;
        if (count > 0) {
            map.set(substr2, count - 1);
            match++;
        }
    }
    return (match * 2) / (str1.length + str2.length - ((substringLength - 1) * 2));
};

function compareStrings() {
  const names = ["Anna H", "Luisan", "James"]
  const targetPhrase = "Anne"
  const compare = new SimilarStringFinder(targetPhrase,names, 0.3)
  console.log(compare.bestMatch.phrase)
}

class SimilarStringFinder {
  constructor (targetPhrase,phraseList, minScore = 0){
    this.targetPhrase = targetPhrase
    this.phraseList = phraseList
    this.scores = null
    this.minScore = minScore
    this.bestMatch = {phrase:null, score:null}
    this.findScores()
  }

  findScores(){
      this.scores = this.phraseList.map(phrase => {
       const score = stringSimilarity(this.targetPhrase, phrase)
       
       const currentMatch = {phrase:phrase, score:score}

       if(score < this.minScore) return currentMatch

       if (this.bestMatch.score === null || this.bestMatch.score < currentMatch.score){
         this.bestMatch = {...currentMatch}
       }
       return currentMatch
  })
  }
}

const solution = compareStrings();
bubble_fn_bestMatch(solution);

I really hope someone can help me out! Maybe someone can find a mistake I’m making?
(Maybe @mishav or @hola1 who were really helpful on a similar thread some years ago?)

I would also be open to try and display the result in an HTML element, but I don’t really get how that’s working. So any suggestions in that regard would also be appreciated!

Thanks!! :pray:

2 Likes

does it correctly console.log the result. If so then just add a return underneath or replace console.log with return. Aside from that you are correctly using the Javascript to Bubble and Run Javascript.

1 Like

Amazing, thank you!! Now it works :slight_smile: :partying_face: :pray:

1 Like

@williamtisdale or @klawdija
Silly question when you say “add a return” you just mean a blank line (i.e. return or enter on the keyboard, correct and not a js return statement?

Can you shareyour last 3 lines of js code, as I am also having an issue with my code not returning anything to bubble (console.log writes fine).

@williamtisdale 's solution of adding a return solved the problem, when used in conjunction with the “Trigger Event” switch on the Javascript to bubble element as the “publish value” option didn’t seem to give me a result.

Hi,

Basically I think I just replaced the “return” in the Javascript with the “console.log”. It’s been a long time ago so I don’t remember exactly, but it seems to be the only thing I changed. My last lines of the code are as follows:



if (this.bestMatch.score === null || this.bestMatch.score < currentMatch.score){
this.bestMatch = {…currentMatch}
}
console.log(currentMatch)
})

}

}

const solution = compareStrings();
bubble_fn_bestMatch(solution);

Thank you

I have recorded a simple video on how to run javascript and return a result on the front-end

Please let me know if you find it useful!

1 Like