CODEWITHSUNDEEP
javascripthtmlarraysjson
gezer4000
gezer4000

Reputation: 101

Displaying data from an array of objects inside document

Been trying to take specific data from an array of objects that for many reasons I cannot host on a server. The data is in stored as a variable in the document. This is what i've been trying so far to no success:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">     
        var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]

        var simpson = users.find("last_name" + "Simpson")

        document.getElementById("return").innerHTML = function myfunction() {
            simpson;
        }
</script>

</head>

<body>
<div id="return"></div>
</body>

For now I've just been trying to extract some/any data from the 'users' array, but going forward i would like to have the user search for a word and the entire 'line'/'lines' of data related to the word/words in 'users' display as results. What methods should i use to achieve this?

Upvotes: 0

Views: 103

Answers (2)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

You have some mistakes in your code. First of all, find function accept as argument a callback function.

 var simpson = users.find(a=>a.last_name=="Simpson");

If you pass function to innerHTML, you must to invoke it, like this:

document.getElementById("return").innerHTML = (function myFunction(){
     return JSON.stringify(simpson);
})();

and function must return a value in order to set the HTML content (inner HTML) of result element.

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]

var simpson = users.find(callback);
function callback(item){
    return item.last_name=="Simpson";
}
document.getElementById("return").innerHTML = (function myFunction(){
     return JSON.stringify(simpson);
})();
<body>
<div id="return"></div>
</body>

Upvotes: 2

Abhinav Galodha
Abhinav Galodha

Reputation: 9878

1. You need to pass the callback function in find method. The find method searches for an element in an array and returns the element if it is found. Otherwise undefined is returned. The Search Criteria is defined by a callback function. Something like

var simpson = users.find(currentValue => currentValue.last_name === "Simpson");

2. You might not require your innerHTML to be a function, instead it would be more appropriate that it points to meaningfull information like UserName Found.

document.getElementById("return").innerHTML = simpson.username;

Try the following code.

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]

        var simpson = users.find(currentValue => currentValue.last_name === "Simpson");

        document.getElementById("return").innerHTML = simpson.username;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">     
        
</script>

</head>

<body>
<div id="return"></div>
</body>

Upvotes: 2

Related Questions