How to select key from an array?

JavaScript
1

I data API structured like this.

const article =  [

    { "title": "title 1", "body": "body 1" }
    { "title": "title 2",  "body": "body 2" }

]

but when i tried to get the title data with

let title =  article.title

I got undefined sure when i tried this

let title = article[0].title

I got only the data in array 1. How to get all the title data?

2

You mean

Object.keys(article[0])

?

3

First of all, you have a syntax error, you are missing a comma after your first object in the array. Having said that, based on what you said, you would like to get the title key values and store those values somewhere ?

const article =  [
 { "title": "title 1", "body": "body 1" },
 { "title": "title 2",  "body": "body 2" }
]

const titles = []

for(let i = 0; i < article.length; i++) {
 if(article[i].title) {
  titles.push(article[i].title)
 }
}

console.log(titles) // output: ["title 1", "title 2"]

I am not sure if this is what you asked given that you were not very clear with what you are trying to do.

4

sorry my bad, forgot that coma

5

Gilbert’s solution surely works. It would probably be more common to use functional programming and the map method on that array.

const titles = article.map(function(a) { return a.title })

And with an ES6 arrow function, it is:

const titles = article.map(a => a.title)

Under the hood it’s doing the same thing, but I would argue that this is more readable.

Just for the halibut, I would also point out that you do not need quotes around those object properties, so your definition could be:

const article =  [
    { title: "title 1", body: "body 1" },
    { title: "title 2", body: "body 2" }
]

The only time you need the quotes is if the property name is not a valid JS identifier (like if it has a space). Also you need the quotes when you are doing a JSON file. There’s nothing inherently wrong with using the quotes, but it does look a bit odd to people used to JS.

1 Like
6

This is my code now. Thanks anyway

yeah i know that but i get that data from API that I’m using

7

but why this keep saying on console that map is not a function
I think it is like this :

 const titles = article.map(a => {
   title:  a.title
   body:  a.body
})
8

I would have to see the exact code you are using in its entirety. But if it says map is not a function that would indicate that article is not an array so it is not defined properly.

I think it is like this :

 const titles = article.map(a => {
   title:  a.title
   body:  a.body
})

No, that will not work, it will just return an array of undefined. There are a couple syntax mistakes there.

This is the entirety of the code that works:

const article =  [
    { title: "title 1", body: "body 1" },
    { title: "title 2", body: "body 2" }
]
const titles = article.map(a => a.title)
console.log(titles)
9

okay thanks. I got it. realy helpfull :blush::+1:

Actualy it is in vuejs. so the data are jumping from one tho another component

I sometimes got an array and not an array. this is where the problem comes from. I dont know why maybe its the way i call and map that data.

I get rid of the error code with this.

const article = . request.dataArticle || []

From your code i should map all data one by one right?

10

I sometimes got an array and not an array. this is where the problem comes from. I dont know why maybe its the way i call and map that data.

Well, I would want to know why. If that variable holds an array normally, than it should never hold any other data type, except perhaps undefined or null. But you should have your code detect that.

const article = . request.dataArticle || []

I don’t understand this line. That doesn’t look like valid JavaScript to me.

From your code i should map all data one by one right?

I don’t understand “one by one”. It is looking, just hidden in a prototype method.