Question

我有一个小阵列。

var a = [{"id":"firstName","value":["Sam3","Sam5"]},{"id":"lastName","value":["Jones4","Jones5"]}]

如何显示这样的值

<div>
<span>key1val: key2val0,key2val1 </span> // firstName: Sam3, Sam5 (for object 1)
<span>key1val: key2val0,key2val1 </span> .... so on  lastName: Jones4, Jones5 (for object 1)
</div>

由于我现在是一个小物体，因此我可以无循环地执行此操作。但是我想通过循环来容纳大对象。我正在用这个来做React。这是演示小提琴-Demo

Answer 1

如果您正在使用react，则可以这样做

a.map((obj,key) =>(
     <span key={key}>
         {obj.id}:  {obj.value.join(',')}
     </span>
))

或

a.map((obj,key) =>(
     <span key={key}>
         {obj.id}:
         {
             obj.value.map((name, key) => (
                 <span key={key}>{name}</span>
             ))
          }
     </span>
))

Answer 2

因此，您要做的是创建一个html表，这样就不必通过先获取名字然后再获取姓氏来进行两次迭代。

然后您可以执行以下操作：

return (
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        {a.map(item => (
            <tr>
                <td>{item.firstName}</td>
                <td>{item.lastName</td>
            </tr>
        )}
    </table>
)

如何遍历此对象并以逗号分隔的方式显示它们？

2 个答案: