将字符串化的 JSON 数据输出到单个 div 中

Question

In this function, data from the users array is searched by the value of input into mySearch . The line that contains the search term is outputted to return .

DATA:

var users = [{"username":"nlee6p","gender":"Female","sexuality":"Down-sized asymmetric time-frame","language":"Macedonian"},
{"username":"bbrooks6q","gender":"Male","sexuality":"Multi-channelled mobile customer loyalty","language":"Luxembourgish"},{"username":"astephens6r","email":"lmiller6r@ucoz.com","gender":"Female","language":"Estonian"}]


function myFunction(e) {
    if((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton'){
        e.preventDefault();
        var searchValue = document.getElementById("mySearch").value;
        for(var i = 0; i < users.length; i++){
        if((users[i]['last_name'] === searchValue) || (users[i]['username'] === searchValue) || (users[i]['first_name'] === searchValue)){
        document.getElementById("return").innerHTML = JSON.stringify(users[i]);
        return;
       }  
    }
  }
}

HTML

<input type="search" id="mySearch"  onkeypress="myFunction(event)"/>
<button id="searchButton" onClick="myFunction(event)">SEARCH</button>

<div id="return">
    <div id="usernameOut">
    </div>
    <div id="firstNameOut"> 
    </div>
</div><!--return-->

My Question

Is it possible to output the stringified data in individual divs without jQuery? Currently the output is the entire line of the array relating to the searched term. I'm looking for a way to split the line up and display the individual components in their own div tags (or in a table if that's easier)

For example, When the string is outputted, the username value will be shown in usernameOut , first-name in firstNameOut etc.

I've used Jput in the past, but this is for a page that's being displayed locally through a C# application and compiling jQuery in C# is a bit of a nightmare.

Answers using vanilla JS are appreciated, but if the only way is through jQuery then i'm not too fussed.

JsFiddle (that doesn't work for some reason)

(Sorry if this is unclear, I will edit if needed)

Answer 1

Here is the working fiddle:

https://jsfiddle.net/zfywyyfj/2/

 no changes were made to the code, just reposition.

You set it to only show when it's completly equal, so you have to type the whole thing to make it dump the json string.

Also, i moved the JS script to the head, because otherwise it will get called before is defined. This is a Fiddle issue as pointed out by Shilly.

UPDATE: The error is because you're trying to get last_name and first_name while the users array/object doesn't have it. Here is the working snippet, i also edited it to allow partials.

 var users = [{"username":"nlee6p","gender":"Female","sexuality":"Down-sized asymmetric time-frame","language":"Macedonian"},{"username":"bbrooks6q","gender":"Male","sexuality":"Multi-channelled mobile customer loyalty","language":"Luxembourgish"},{"username":"astephens6r","email":"lmiller6r@ucoz.com","gender":"Female","language":"Estonian"},{"username":"rbishop84","gender":"Female","sexuality":"Centralized hybrid data-warehouse","language":"Amharic"},{"username":"wmorrison85","gender":"Male","sexuality":"Extended upward-trending throughput","language":"Aymara"}]; function myFunction(e){ if((e.target.id === 'mySearch' && e.keyCode === 13) || e.target.id === 'searchButton') { e.preventDefault(); var searchValue = document.getElementById("mySearch").value; for(var i = 0; i < users.length; i++) { if( ( users[i]['language'].includes(searchValue) ) || ( users[i]['username'].includes(searchValue) ) || ( users[i]['sexuality'].includes(searchValue) ) ) { document.getElementById("return").innerHTML = JSON.stringify(users[i]); return; } } } }

 <input type="search" id="mySearch" onkeypress="myFunction(event)"/> <button id="searchButton" onClick="myFunction(event)">SEARCH</button> <div id="return"> </div>