Returning vector from a function in rust and wasm

Hi,
I' am a newbie in Rust programming. I' am learning web assembly. I' have created an html which accepts 3 strings and want to show them in sorted order. Just for academic interest I want the sorting to do with my Rust library. So I pass the 3 strings from Javascript to rust function but I'am having difficulty in returning the sorted strings back. please see my Code snippet below. Can I get some help in the point of returning the sorted strings to Javascript so that I can display it back on the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SORTING OPERATIONS</title>
    <style>
      body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      #fps {
    white-space: pre;
    font-family: monospace;
      }
    </style>

  </head>
  <body>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    <h3>Enter the elements for sorting </h3>
    First element
  <input type="text" id="c1"> <br><br>
    Second element 
    <input type="text"  id="c2"> <br><br>
    Third element
    <input type="text" id="c3"><br><br>
    <button id="bt1">sort <button><br><br>

        <div id="fps"></div>
      RESULT
      <input type="text" id="c4">
     
    <script src="./bootstrap.js"></script>
  </body>
</html>
import * as wasm from "wasm-game-of-life";
const mybt=document.getElementById("bt1");
mybt.addEventListener("click", event =>
{
const val1=document.getElementById("c1").value;
const val2=document.getElementById("c2").value;
const val3=document.getElementById("c3").value;
 alert("after sorting");
 var result=[wasm.sorty(val1,val2,val3)];
 document.getElementById("c4").value=result;  
   alert(result);
});

RUST CODE

mod utils;

 extern crate web_sys;
use wasm_bindgen::prelude::*;

#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
 pub fn sorty(a: &str,b: &str,c: &str)->String
{
 let  mut v: Vec<String> = Vec::new();
 let  t=String::new();
 let str1=a.to_string();
let  str2=b.to_string();
 let str3=c.to_string();
 v.push(str1);
 v.push(str2);
 v.push(str3);
  for i in 0..2
 {let  k =3-i-1;
     for j in i..k
    {
 if v[j]>v[j+1]
         {
         let  t =v[j].clone();
         v[j]= v[j+1].clone();
         v[j+1]= t.clone();
           
       }
   }
 }
for i in v.iter(){
 web_sys::console::log_1(&i.into());
 }
 t
}

Please make your post readable by surrounding your code with backticks to mark them as code.

```
// your code here
```

and if the code is not rust, you can change the syntax highlighting like this:

```javascript
// your code here
```
1 Like

@alice I have edited my post. Please help me with the required solution.

wasm-bindgen cannot automatically translate vectors (or other arrays) between javascript and webassembly (see supported types) and this issue

i guess this makes your main options:

  • join the strings together at the webassembly side, return as one string, split them apart again at the js side (needs escaping if the separator could be in the string—some people have resorted to returning JSON)
  • construct a JsArray using js_sys on the rust side, push the strings into that, and return that
2 Likes

another option to add to @vmedea's list is to use serde. it's not necessarily for this specific example, but when it comes to "passing data between rust and js" it's gonna be a requirement sooner or later - so worth mentioning :slight_smile:

See Arbitrary Data with Serde, note the suggestion at the end to use serde-wasm-bindgen