如何处理对象数组?我有一个包含3个对象的数组,其中包含来自db的JSON数据

时间:2022-09-25 12:32:22

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

基本上,我有一系列包含3个对象的帖子:帖子[{},{},{}]

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).

我之前使用对象对象进行测试,我必须做的就是:Object.keys(this.props.data).map(this.renderPostTile)。然后我可以使用renderPostTile(key)的参数。

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

当我有一个对象数组时,如何做类似的事情?

如何处理对象数组?我有一个包含3个对象的数组,其中包含来自db的JSON数据

2 个解决方案

#1


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

演示

#2


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);

Object.keys返回一个数组,这就是你可以在它上面执行.map()的原因,这是一个Array方法。所以是的,你可以利用阵列上的地图。字面上只需调用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".

为了在其上使用Array方法并询问“我是否也可以对数组执行此操作?”,您实际上会将对象的键转换为数组。答案是“嗯......当然,你不必先把它转换成任何东西......只需调用Array的.map方法”。


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.

你一直说它说postData.map不是一个函数...但你说你的数组被命名为posts ...所以它将是posts.map。如果你正在使用的任何东西都没有map方法,那么它就不是一个数组(至少在现代浏览器中)。确保你在Array上调用它。

#1


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

演示

#2


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);

Object.keys返回一个数组,这就是你可以在它上面执行.map()的原因,这是一个Array方法。所以是的,你可以利用阵列上的地图。字面上只需调用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".

为了在其上使用Array方法并询问“我是否也可以对数组执行此操作?”,您实际上会将对象的键转换为数组。答案是“嗯......当然,你不必先把它转换成任何东西......只需调用Array的.map方法”。


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.

你一直说它说postData.map不是一个函数...但你说你的数组被命名为posts ...所以它将是posts.map。如果你正在使用的任何东西都没有map方法,那么它就不是一个数组(至少在现代浏览器中)。确保你在Array上调用它。