Trying to build a custom widget, but can't figure out how to handle data

Ask for Help
,
15

hi there,
i’m back, and finally i’ve finished the widget, and now i’m looking at my code, it feels kinda weird it took me so much effort to make just few line of code, the problem that made me stuck for a week was: i made a typo on the matching input, and then no matter how i change the find method(find(),findIndex(),fliter()),it always shows undefine as reslut, here’s my code

HTML

<table>
  <tr>
    <th class="tg-0pky">Numer</th>
    <th class="tg-0pky">：</th>
    <th class="tg-0pky" id="number"></th>
  </tr></thead>
<tbody>
  <tr>
    <td class="tg-0pky">Model</td>
    <td class="tg-0pky">：</td>
    <td class="tg-0pky" id="model"></td>
  </tr>
  <tr>
    <td class="tg-0pky">Owner's Mark</td>
    <td class="tg-0pky">：</td>
    <td class="tg-0pky" id="ownersMark"></td>
  </tr>
</tbody>
</table>

JS

async function searchFor() {
  //get all the record from table.
  const getAllRecord = await grist.docApi.fetchTable('Table1');
  //get the search object i want from html input tag.
  let sbj = document.getElementById("input").value;
 //define the colum that i want to search in.
  let testObj = getAllRecord.A;
 //find the index in said colum.
  let ans1 = testObj.findIndex (function(ans2){
    return ans2 == sbj;
  });
 //print the result at certain area.
  document.getElementById("number").innerHTML = getAllRecord["A"][ans1];
  document.getElementById("model").innerHTML = getAllRecord["F"][ans1] + " " + getAllRecord["G"][ans1] ;
  document.getElementById("ownersMark").innerHTML = getAllRecord["J"][ans1];
};

thank you all for the help, it has a lot of useful information, i will post a showcase when i get time to all things together!

1 Like