How can I display the results of a users' search/query in HTML/UI?

Question

I want to return the results of the users’ search in HTML. The results will vary depending on what value they type in. How can I get my code to display the data from whatever the value of {NameOfData} is?

Myscript.js

function GetData(e){
    const nameOfData = e.target.value; 
    const url = `http://container:8004/v1/data/${nameOfData}`;
    //http request
    fetch(url,)
.then(res => res.json())
.then (json => console.log(JSON.stringify(json)))



const input = document.getElementById("input");

input.addEventListener("change", GetData);

Index.html

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>

<body>

  <form id="form" role="search">
    <input type="search" id="input" name="q" placeholder="Search Entities...">
    <button>Search</button>
  </form>

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

</body>

</html>

There are only two options for them to input/search for: site and country.

This is what the returned value will look like if {NameOfData} is site:

[
    {
        "id": "4833e18248616a04ee29b4dd08dd68abfa049ad720489677533c8507a95e7335",
        "url": "http://container:8004/v1/data/site/4833e18248616a04ee29b4dd08dd68abfa049ad720489677533c8507a95e7335",
        "type": "site",
        "name": "Head-Smashed-In Buffalo Jump",
        "legal": [
            {
                "type": "attribution",
                "text": "Data is supplied by Wikipedia",
                "link": "https://en.wikipedia.org/"
            }
        ]
    },

This is what the returned value will look like if the {NameOfData} is Country:

[
    {
        "id": "5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168",
        "url":http://container:8004/v1/data/country/5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168",
        "type": "country",
        "name": "Afghanistan",
        "legal": [
            {
                "type": "attribution",
                "text": "Data is supplied by Wikipedia",
                "link": "https://en.wikipedia.org/"
            }
        ]
    },

Welcome to SO! This question might be a duplicate of: [Adding DOM Elements, what is the Right Way?](https://stackoverflow.com/questions/15962713/adding-dom-elements-what-is-the-right-way) See if this answer helps you; if not, please clarify how your problem differs. Good luck, happy coding! — Alexander Nied, Apr 28 '22 at 03:44
The vague version is map your JSON data to HTML. We can't provide much guidance as we have no idea what the data looks like. — Jon P, Apr 28 '22 at 04:18

OrbitGum · Answer 1 · 2022-04-28T20:52:14.857

index.html


<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
    </head>
    <body>
        <form id="form" role="search">
            <input
                type="search"
                id="input"
                name="q"
                placeholder="Search Entities..."
            />
            <!-- button>Search</button -->
        </form>

        <div>
            <ul style="list-style: none" id="results"></ul>
        </div>

        <script src="yourScript.js"></script>
    </body>
</html>

yourScript.js


const createAndAppendDOM = (DOMChild, objDOMParameters, parent) => {
    // argument -> objDOMParameters must be object with parameters of HTML tag -> example { id: 'myId', textContent: 'example' }
    const DOMCreated = document.createElement(DOMChild);
    if(Object.keys(objDOMParameters).length === 0 ) {
        return {
            created: false,
            error: "Object is empty" 
        };
    }else {
        for(let parameter in objDOMParameters) {
            DOMCreated[parameter] = objDOMParameters[parameter];
        }
    }
    parent.appendChild(DOMCreated);
}

function GetData(e) {
    e.preventDefault();
    const nameOfData = e.target.value; 
    
    //const url = `http://container:8004/v1/data/${nameOfData}`;
    const url = "https://my-json-server.typicode.com/typicode/demo/posts";
    //http request
    fetch(URL)
      .then(res => res.json())
        .then(
            json => {
                //console.log(json);
                json.forEach(element => {
                        createAndAppendDOM('li', { textContent: ` ${element['title']} ` }, results);
                });
        })
}

// I don't know what for you have button tag and what for if you have listener - change - to input
// its not make sense
// so what do you want to do when you append listener to button - click - for submit? 
// If you want to use listener like - change - so you maybe delete button in you HTML code, because your code will execute when you escape from input tag
const results = document.querySelector("ul");
console.log(results);
const input = document.querySelector("input");
input.addEventListener("change", GetData);

I would almost forget that inside the forEach loop after you can push data to array and filter data using feature like filter(); — OrbitGum, Apr 28 '22 at 06:51
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 28 '22 at 14:05

How can I display the results of a users' search/query in HTML/UI?

1 Answers1