Displaying data from an array of objects inside document

Question

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?

Question is unclear, do you want to search in users array?Please explain properly — Mohd Asim Suhail
– Mohd Asim Suhail, Commented Jan 31, 2017 at 19:00

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-31 19:47:28Z

2

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>

edited Jan 31, 2017 at 19:47

answered Jan 31, 2017 at 19:04

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gezer4000 Over a year ago

@Alexandru-lonut Mihai Thanks! I'm having some trouble with the code though. Dreamweaver is saying there is an error on this line: var simpson = users.find( a=>a.last_name == "Simpson");

gezer4000 Over a year ago

Syntax error. I'm not sure how to analyse deeper than that.

gezer4000 Over a year ago

could this somehow be the problem?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

wondering if my header is wrong... (i've herd in the past that i'm using some out of date stuff.)

Mihai Alexandru-Ionut Over a year ago

@gezer4000, i updated my answer with callback function separated.

gezer4000 Over a year ago

@Alexandru-lonut Mihai Unfortunately this is still not working... nothing is displaying on my HTML doc. code snippet is working. is it perhaps an issue with the encoding?

|

Abhinav Galodha · Accepted Answer · 2017-01-31 19:24:39Z

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>

Collectives™ on Stack Overflow

Displaying data from an array of objects inside document

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related