in Javascript, I want the code to return only the name that has the same ID on different line in HTML

Question

let users = [
            {id: "Ca", name: "John"},
            {id: "Ca", name: "Pete"},
            {id: "Ca", name: "Zed"},
            {id: "Cb", name: "Xed"},
            {id: "Cb", name: "Cas"},
            {id: "Cb", name: "Fre"},
            {id: "Cc", name: "Pete"},
            {id: "Cc", name: "Mary"}
        ];

        let user = users.filter(item => {
                    return item.id === 'ca';
        })

        console.log(user.id);

i want the code display on html web page to be
if id = 'ca'
John
Pete
Zed
and if ID='Cb'
Xed
Cas
Fre

where in the page should it be displayed? is there some specific DIV that should contain the value? — Kamil Janowski, May 16 '20 at 12:36

score 1 · Accepted Answer · edited May 16 '20 at 14:54

1

There is mistake in your approach.

.filter returns an array. so, you should loop over user (returned value) to print user.id. And '===' is case sensitive, if u check for 'ca', as per your data, there will be no return. Use 'Ca' to check return data

Example:

let users = [
            {id: "Ca", name: "John"},
            {id: "Ca", name: "Pete"},
            {id: "Ca", name: "Zed"},
            {id: "Cb", name: "Xed"},
            {id: "Cb", name: "Cas"},
            {id: "Cb", name: "Fre"},
            {id: "Cc", name: "Pete"},
            {id: "Cc", name: "Mary"}
        ];

let user = users.filter(item => {
            return item.id === 'Ca';
    })

user.forEach(el => document.write(el.name, '<br>'));

edited May 16 '20 at 14:54

Mister Jojo

20,093
6
21
40

answered May 16 '20 at 12:42

Byrisetti Hemanth

202
1
4
15

I've copied your pen to the answer - the SO snippets work very similar to fiddle/pen but keep the code in one place (in SO). Also fixed your typo in the last line, hope that's ok. – freedomn-m May 16 '20 at 12:54
Thanks Boss. It Worked – Juliet Gift May 16 '20 at 17:27

score 0 · Answer 2 · answered May 16 '20 at 12:45

let users = [
        {id: "Ca", name: "John"},
        {id: "Ca", name: "Pete"},
        {id: "Ca", name: "Zed"},
        {id: "Cb", name: "Xed"},
        {id: "Cb", name: "Cas"},
        {id: "Cb", name: "Fre"},
        {id: "Cc", name: "Pete"},
        {id: "Cc", name: "Mary"}
    ];
const output = document.querySelector('#output');
    users.filter(item => item.id === "Ca").forEach(item => {
    output.innerHTML += '<p>'+item.name+'</p>';
    })

<div id="output"></div>

score 0 · Answer 3 · answered May 16 '20 at 12:52

You can use the .map function:

let userNames = users.filter(item => {
                return item.id === 'Ca';
    }).map(item => item.name);

You now have an array of names that you can output as desired, updated snippet:

let users = [
            {id: "Ca", name: "John"},
            {id: "Ca", name: "Pete"},
            {id: "Ca", name: "Zed"},
            {id: "Cb", name: "Xed"},
            {id: "Cb", name: "Cas"},
            {id: "Cb", name: "Fre"},
            {id: "Cc", name: "Pete"},
            {id: "Cc", name: "Mary"}
        ];
        
var names = users.filter(item => {
      return item.id === 'Ca';
    })
    .map(x => x.name);
    
console.log(names)  
// or join / loop to get on separate lines, this outputs as an array in the console

Note that ca !== Ca so changed in the code above for simplicity. If you want case-insensitive comparison there are various methods described in this SO question

in Javascript, I want the code to return only the name that has the same ID on different line in HTML

3 Answers3