Вывод строковых данных JSON в отдельные div's

Question

В этой функции данные из массива users выполняются по значению ввода в mySearch. Строка, содержащая поисковый запрос, выводится на return.

ДАННЫЕ:

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--> 

Моего вопрос

Можно ли выводить строковые данные в отдельной диве без jQuery? В настоящее время вывод представляет собой всю строку массива, относящуюся к искомому термину. Я ищу способ разбить линию и отобразить отдельные компоненты в своих собственных тегах div (или в таблице, если это проще)

Например, когда строка выводится, будет показано значение username в usernameOut, first-name в firstNameOut и т.д.

Я использовал Jput в прошлом, но это для страницы, которая отображается локально через приложение C# и компиляции JQuery в C# является немного кошмара.

Ответы на использование ванили JS оценены, но если единственный способ - через jQuery, то я не слишком суетился.

JsFiddle (that doesn't work for some reason)

(Извините, если это не ясно, я буду редактировать, если это необходимо)

Answer 1

Вот рабочая скрипку:

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

no changes were made to the code, just reposition. 

Вы устанавливаете его только для отображения, когда оно полностью равно, поэтому вам нужно ввести все, чтобы он сбросил строку json.

Кроме того, я переместил JS-скрипт в голову, потому что в противном случае он будет вызван до того, как будет определено. Это проблема с Fiddle, как указал Шилли.

UPDATE: Ошибка в том, что вы пытаетесь получить Last_name и first_name в то время как пользователи массив/объект не имеет его. Вот рабочий фрагмент, я также отредактировал его, чтобы разрешить частичные.

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>