How to send results from bash script (JSON format) into Javascript array variable (html file)?-CodePudding

My goal is to create simple search filter by name in html/javascript for data that I am getting from API in JSON format. In bash script I already formatted data so it is in right format for me to filter it later in javascript:

Data ready to be pushed/imported into let jsonData array (inside html file) from data file (example.json):

{"name":"vnode","address":"10.19.110.51","group":"windows","responsible":"Alen"},
{"name":"vnode2.izum.pri","address":"10.1.30.100","group":"windows","responsible":"Mario"},
{"name":"vnode3","address":"10.19.110.52","group":"windows","responsible":"John"}

I want to send this data from example.json and insert it into jsonData array inside javascript (index.html), How do I do it?

This is inside index.html:

<script>
      let jsonData = `[
                  **DATA GOES HERE**
      ]`

      function search_server() {
        let input = document.getElementById("myInput").value;
        input = input.toLowerCase();
        let x = document.querySelector("#myUL");
        x.innerHTML = "1";
        

        for (i = 0; i < data.length; i  ) {
          let obj = data[i];

          if (obj.name.toLowerCase().includes(input)) {
            const elem = document.createElement("li");
            elem.innerHTML = `${obj.name} , ${obj.address} , ${obj.group} , ${obj.responsible}`;
            x.appendChild(elem);
          }
        }
      }
</script>

I managed somehow to insert results from bash to html, but I only managed to do it into div class:

Method for sending bash results from file into div class element:

reg='<div >'
while IFS= read -r line; do
    printf '%s\n' "$line"
    [[ $line =~ $reg ]] && cat /usr/share/inventory/data.txt
done < /usr/share/inventory/indextemplate.html > /usr/share/inventory/index.html

So here is where I managed to send data:

<div >

</div>

No success on trying it to send into javascript:

reg='let jsonData = `['
while IFS= read -r line; do
    printf '%s\n' "$line"
    [[ $line =~ $reg ]] && cat /usr/share/inventory/data.txt
done < /usr/share/inventory/indextemplate.html > /usr/share/inventory/index.html

CodePudding user response：

I don't have much knowledge on BASH but I think I have a solution.

First use BASH script to write a JS file, then place file in your project folder.
Insert your JS code in the empty JS file with BASH.
Use BASH to read your data file (example.json) to put the data in your JS file.

Good luck

CodePudding user response：

I was able to do it with command AWK:

I created string to replace, in my example **** Then i read file example.json, replace **** with content from example.json into new file bakka.html

With command:


awk 'FNR==NR{s=s"\n"$0;next;} /[*][*][*][*]/{$0=substr(s,2);} 1' '/usr/share/inventory/example.json' '/usr/share/inventory/index.html' > '/usr/share/inventory/bakka.html'

Thank you Lawrence Cherone

CodePudding user response：

If I have understood correctly, you have retrieved and parsed the data required into JSON-formatted objects saved in a file named example.json, and you now wish to assign the data to a variable within your html page so that it may be read and used by javascript in the page. (I will proceed on that basis so apologies if I have misunderstood).

The easiest way to make the data available is to include it in an expression, which will assign it to a named variable, at the time the file was written and to include the file by naming it with a .js, extension and reference it in a script tag from within the html (before the script that will make use of it).

First however, you will have to slightly modify the format of the JSON. Currently, your JSON data is arranged as three object notations, separated by commas:

current data format (in example.JSON):

{ -- 1st -- },
{ -- 2st -- },
{ -- 3st -- },

Such a structure has no meaning in javascript. If you examine JSON fetched with a typical api, it will usually list the object structures as elements of an array. If you reformat that file when you build it, you can make it so it is ready to use:

suggested format for exmaple.js:

const JSONdat = `[{"name":"vnode","address":"10.19.110.51","group":"windows","responsible":"Alen"},
{"name":"vnode2.izum.pri","address":"10.1.30.100","group":"windows","responsible":"Mario"},
{"name":"vnode3","address":"10.19.110.52","group":"windows","responsible":"John"}]`

Note the use of back ticks to avoid conflict with quote marks, and the presence of square brackets enclosing the data list. Note also, the value of JSONdat is a string, not an array nor objects (this is the purpose of JSON, to transport data as strings)

Next, in the html, load the file as a regular script (can be in the header, must be before the data is used):

html:

<script src="example.js"></script>

The JSON string is now available to JS in your document by referencing the name you gave it (JSONdat in the example above). The variable JSONdat has global scope and is available to javascript of any scope that loads later in the document.

To be able to iterate the array and read the object data, the JSON string has to first be parsed to make it an actual javascript array of objects:

const objectArray=JSON.parse(JSONdat)

objectArray now contains valid javascript objects inside a valid javascript array, which can be iterated as you wish to use the object data.

Working example:

const JSONdat = `[{"name":"vnode","address":"10.19.110.51","group":"windows","responsible":"Alen"},
{"name":"vnode2.izum.pri","address":"10.1.30.100","group":"windows","responsible":"Mario"},
{"name":"vnode3","address":"10.19.110.52","group":"windows","responsible":"John"}]`

// that variable will be available if the file holding it was loaded as a the src attribute of a regular script element.

const objectArray = JSON.parse(JSONdat);

console.log(objectArray[1].address);
// reports the value associated with the address key in the second object;