How can I print only one of the elements in an object in html?

JavaScript
#1

I’ll leave an example of JSON data below. I filter the names in this data using beginWith (“P”), but I just want the names beginning with “P” to appear and write that name to a DOM element. Below is the code I used but failed. You can take a look at my codepen account to see how my code works better. codepen: https://codepen.io/BerkayAkgurgen/pen/RwoKBrG

const dd = document.getElementById("deneme");

let dene = data.map(item =>item.name.startsWith("P"))

dd.innerHTML = dene

// DATA
let data = [{
        _id: "5e652aa6baec2fe6fea7ed2c",
        index: 0,
        guid: "25743f49-50b9-417a-93c3-12bb3f80514c",
        isActive: true,
        balance: "$2,339.94",
        picture: "http://placehold.it/32x32",
        age: 37,
        eyeColor: "blue",
        name: "Pate Henry",
        gender: "male",
    },{
        _id: "5e652aa69cb94a55a21dbd24",
        index: 1,
        guid: "7fbd5a0a-5d8b-4cdd-97b7-f7715183ea60",
        isActive: true,
        balance: "$3,929.51",
        picture: "http://placehold.it/32x32",
        age: 30,
        eyeColor: "brown",
        name: "Carole Daniels",
        gender: "female",
    }
]
#2

Instead of map, you should use filter.

At the moment, as you see the output is ‘true,false,false’, since the first object starts with “P”, and the other ones don’t. .map basically replaces each object with the value of the condition you provide.

The way filter works is, it basically keeps only the objects that meet the specified condition, which is what you want in this case.
So just replace .map with .filter like so:
let dene = data.filter(item =>item.name.startsWith(“P”))

This will return an array of all objects that met the condition, so you’ll have to add a minor change, but I’ll let you figure that out on your own :wink:

Of course, if it doesn’t seem to work feel free to ask.

#3

I tried this but gave me all of that object. I just want to get the “name” property from that object. that’s what i can’t do anyway .

#4

This is because it returns an Array. If you want to access a specific element in that array, say the first one, I think you know how to do that :slight_smile:
And now you will have only one object. But you don’t really need the entire object, but only the name property. So access that specific property in the object. Again, I think you know how to do that.

This will solve the issue.

Btw. using console.log() is really a great help in these situations, since you will actually be able to see what you are dealing with, instead of this annoying [object Object] output

#6

I do not know. I’m searching, but I guess I can’t find the answer because I’m looking in the wrong place.

#7

Alright here are two possible solutions:

let dene = data.filter(item =>item.name.startsWith("P"))
dene = dene.map(item => item.name)

dd.innerHTML = dene

// or:

let dene = data.filter(item =>item.name.startsWith("P"))

dd.innerHTML = dene[0].name

As a reference: Challenge on the .filter method

1 Like
#8

Thanks Michael. I knew the second solution but wanted to know it dynamically. but luckily the answer I’m looking for.