How to deal with array of objects? I have an array with 3 objects containing JSON data from my db

Question

Basically, I have an array of posts that contains 3 objects: posts[{},{},{}]

Each object looks something like this:

1: Object
__v: 0
_id: "5686e17fc64feafd4486f22c"
created_at: "2016-01-01T20:28:47.889Z"
image: "Test"
message: "Test"
title: "Test Post 1"
updated_at: "2016-01-01T20:28:47.889Z"

I'm wondering how I can get an index or something of each object, but also use that for the object's properties.

I was testing earlier with an object of objects, and all I had to do there was: Object.keys(this.props.data).map(this.renderPostTile). Then I could just use a parameter for renderPostTile(key).

How can I do something similar when I have an array of objects?

Thanks. However, how can I do something similar to Object.keys(data).map(someFunction)? I am trying to render a <p> with the titles, but not sure how I can do that. — user1354934
– user1354934, Commented Jan 2, 2016 at 21:48
Unfortunately, when I do that, it says .map is not a function. Here's what I am doing: {postData.map(this.renderTitle)} Above I have defined postData as this.props.data. — user1354934
– user1354934, Commented Jan 2, 2016 at 21:53
Why are you calling it on "postData" when you say your array is named "posts"? And why are you wrapping it with curly brackets? It's just a function call. posts.map(this.renderTitle); — Jimbo Jonny
– Jimbo Jonny, Commented Jan 2, 2016 at 22:03
sorry I have a var postData = this.props.posts sorry for the confusion — user1354934
– user1354934, Commented Jan 2, 2016 at 22:05

James Hibbard · Accepted Answer · 2016-01-02 22:21:40Z

2

Like this:

var posts = [
  { title: "Test Post 1" },
  { title: "Test Post 2" },
  { title: "Test Post 3" }
];

posts.map(function(post){
  var p = document.createElement("p"),
      t = document.createTextNode(post.title);
  p.appendChild(t);
  document.body.appendChild(p);
});

Obviously your objects are more complicated, but you get the idea.

Edit:

React-wise, you could do something like this:

var PostListRender = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.posts.map(function(post){
          return <li>{post.title}</li>;
        })}
      </ul>
    )
  }
});

var posts = [
  {title: "Test Post 1"}, 
  {title: "Test Post 2"}, 
  {title: "Test Post 3"}
];

var el = document.getElementById('post-container');
React.render( < PostListRender posts = {posts} />, el);

Demo

edited Jan 2, 2016 at 22:21

answered Jan 2, 2016 at 21:54

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

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

4 Comments

user1354934 Over a year ago

Thanks Jack. However, here is the issue. I am doing the following:

renderPostTile(key) {     return (       <PostTile key={key} index={key} postData={this.props.posts[key]} />     );   }    render() {       var postData = this.props.posts;       return (           <div className="container">                           <div className="row">               {postData.map(this.renderPostTile)}                    </div>           </div>       );   }

Unfortunately, I get an error saying TypeError: postData.map is not a function

user1354934 Over a year ago

oh god. how do I edit the code so it looks nice in the comment? here it is in a pastebin. pastebin.com/hdiq9k4t

Matt Styles Over a year ago

looks like you're just getting postData and posts mixed up, but there are other issues there. You're going to have to update the question as the question you've posed has been answered, if you still have problems they are different ones.

user1354934 Over a year ago

Hi Jack. I'm not able to create another post for another 90 minutes. Basically, I think the issue is that on reload, this.props.posts is null again for some reason. That is leading to all these issues. Since its null, can't use .map(), and I can't even output the title, etc.

Jimbo Jonny · Accepted Answer · 2016-01-02 22:07:25Z

0

Object.keys returns an Array, that's why you can do .map() on it, which is an Array method. So yeah, you can utilize map on the Array. Literally just call posts.map(myCallback);

You're literally taking something where you converted an Object's keys INTO an Array for the purposes of using an Array method on it and asking "Can I do this to an Array too?" The answer is "well...of course, you just don't have to convert it to anything first...just call the Array's .map method".

You keep saying it says that postData.map isn't a function...but you say your Array is named posts...so it would be posts.map. If whatever you're working with doesn't have a map method, then it's not an Array (at least in modern browsers). Make sure you're calling it on the Array.

edited Jan 2, 2016 at 22:07

answered Jan 2, 2016 at 21:59

Jimbo Jonny

3,5791 gold badge21 silver badges23 bronze badges

2 Comments

user1354934 Over a year ago

thanks. can you please check my first post? i updated with screenshot of console.log(this.props.post)

Jimbo Jonny Over a year ago

@user1354934 - I don't know react (you really should have stated that's what you were dealing with from the start). All I know is that a modern standards compliant JS engine will have a .map() method on any Array. If your "Array" doesn't have it then you should be double checking that you're actually referencing an Array in that spot. Keep in mind that this can refer to different things depending on the function caller...so check in that spot in the code whether what you're getting is actually the Array you expect or not.

Collectives™ on Stack Overflow

How to deal with array of objects? I have an array with 3 objects containing JSON data from my db

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related