I am using Leptos to build my project. I am having trouble passing a string from rust to js using wasm-bindgen and leptos. How to do so?

[kushasupaya]

I have some Js files that processes some info provided to it from the rust code and returns an array. Using wasm-bindgen I am able to get the array in my rust/leptos code. But I also have to pass some info from my rust code to Js file. I am using wasm-bindgen in my Leptos project. In my Js file I have an import section but trunk serve --open always creates a new wasm-js file so the import is useless or am I doing something wrong. Below is my js code

//get some value from rust here

export const getMatchups = () => {
    const teamsArr = [];
    const numTeams = 16;
    for (let i = 0; i < numTeams; i++) {
        const teamName = Array.from({ length: numTeams }, (_, i) =>
            String.fromCharCode(65 + i)
        );
        // const teamName = prompt(`Enter name for Team ${i}:`);
        teamsArr.push({
            id: i,
            name: teamName[i],
        });
    }

    return teamsArr; //this array is being used in rust
};

Also can I process the array in rust. I am being able to console log in my rust code but how can I use it as a rust vec?

[gbj]

In my Js file I have an import section but trunk serve --open always creates a new wasm-js file so the import is useless or am I doing something wrong

I'm sorry, I'm not sure what this means. All I see in what you've provided is a JavaScript snippet. I don't know what errors or issues you're facing using it from Rust.

[kushasupaya]

Sorry here is my rust code

use leptos::*;
use wasm_bindgen::prelude::*;
use serde::Deserialize;
use web_sys::console;

#[derive(Debug, Deserialize)]
struct Team {
    id: u32,
    name: String,
}
#[wasm_bindgen]
pub fn run()->JsValue{
    console::log_1(&"Hello using web-sys".into());

    let js_value: JsValue = getMatchups();
    console::log_2(&"Teams value".into(), &js_value);
    return js_value;
}

fn main() {
    leptos::mount_to_body(|| view! { <App/> });
    let js_variable =run();
    let json_string = js_variable.as_string().unwrap();
    let teams: Vec<Team> = serde_json::from_str(&json_string).expect("Failed to deserialize JSON");
    println!("{:?}", teams)
}

I am able to get the logs in the browser in the run() function. But I get Uncaught (in promise) RuntimeError: unreachable when I want to perform some operation on that JsValue in the main function.

[gbj]

A couple notes:

• you should use and enable console_error_panic_hook to get the best possible panic messages in the browser.
• println!() doesn't work in the browser, so you'll never see that final log print anywhere
• getMatchups() returns an array, but you return it and store it in js_variable and then you call js_variable.as_string().unwrap(). js_variable is not a JavaScript String, so your unwrap fails and the program panics

[kushasupaya]

Thank you @gbj for such valuable notes. I used console_error_panic_hook and the error I am getting is
called `Option::unwrap()` on a `None` value .What would be the possible solution to this problem? I want to work with the array passed from my JS in my rust.

[gbj]

Your JavaScript code returns an Array.

Your Rust code expects your JavaScript code to return a string that contains that Array serialized to JSON.

If you want to work directly with the Array, you can use something like js_sys::Array::from(js_value), and then iterate over that JS Array

If you'd like to deserialize it into a Rust data type, you can use something like serde-wasm-bindgen and call from_value to convert your JS Array into a Rust Vec<_>