如何在React中使用JSON对象

So here is the set up:

所以这里是设置：

I have simple nodejs backend (based on express and mongoose), which responds to GET request with some JSON (in the form of Object of objects).

我有简单的nodejs后端（基于express和mongoose），它使用一些JSON（以对象的Object形式）响应GET请求。

So after I get the response, I want to render a component, for each elements of said Object of objects. If it was array, I could simply use array.map(), and render a component in the callback function. But since what I have, is Object, i can not use that.

因此，在得到响应之后，我想为所述对象的对象的每个元素渲染一个组件。如果它是数组，我可以简单地使用array.map（），并在回调函数中呈现一个组件。但是，由于我拥有的是Object，我无法使用它。

So... Should I return and Array from the backend. If so how do I tell mongoose to return the result of model.find() in the form of array.

所以...我应该从后端返回和数组。如果是这样，我怎么告诉mongoose以数组的形式返回model.find（）的结果。

Or should I convert the object to array in the frontend? In this case, how would I do it without putting it through a loop of some sort?

或者我应该将对象转换为前端的数组？在这种情况下，如果不通过某种循环，我该怎么办呢？

Lastly, I tried to make it work like so:

最后，我试着让它像这样工作：

render: function() {
    //console.log('render TodoList componenr');
    var items = this.state.todoItems;
    return(
        <ul>
            {for (var item in items){
                console.log(item);
            }}
        </ul>
        ); 
}

To which i get this error:

我得到这个错误：

Uncaught SyntaxError: embedded: Unexpected token (30:9)
  28 |                  return(
  29 |                      <ul>
> 30 |                              {for (var item in items){
     |          ^
  31 |                                  
  32 |                              }}
  33 |                      </ul>

Which is super weird, as it points to empty location?

这是非常奇怪的，因为它指向空位？

Any ideas how could make this work?

任何想法如何使这项工作？

2 个解决方案

#1

To iterate over an object you could use Object.keys like so:

要遍历对象，您可以使用Object.keys，如下所示：

Object.keys(yourObject).map(function(key) {
    return renderItem(yourObject[key]);
});

The method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

该方法返回给定对象自己的可枚举属性的数组，其顺序与for ... in循环提供的顺序相同（不同之处在于for-in循环也枚举了原型链中的属性）。

It's supported by IE >= 9, Chrome >= 5, Safari >= 5, Firefox >= 4.

它支持IE> = 9，Chrome> = 5，Safari> = 5，Firefox> = 4。

#2

You can setting the object.map function equal to a variable outside the return function and then just return that variable.

您可以将object.map函数设置为等于返回函数之外的变量，然后返回该变量。

render() {

    var article = this.props.article;


    var articleNodes = article.map(function(article, key){
            if(article.iurl == ""){
                article.iurl = "basketball.jpg";
            };

            return(
            <li key={key}>
                <Image item={article}/>
                <div className="post-basic-info">
                    <h3><a target="_blank" href={article.url}>{article.title}</a></h3>
                    <span><a href="#"><label> </label>{article.team}</a></span>
                    <p>{article.description}</p>
                </div>
            </li>
            )
        });

    return(
            <div>
                {articleNodes}
            </div>
        )
}

#1