javascript - 比较 2 组不同的数据数组

Question

我有一个正在检索 2 组数据的应用程序。现在我想做的是获取 data1 的 brand 和 data2 的 brand 这取决于日期，如果为真，它将呈现 data2 的 amount。

到目前为止这是我的代码

-我的数据

const data1 = [
{
  "data1result": [
    {
      "brand": "brand1"
    },
    {
      "brand": "brand2"
    },
    {
      "brand": "brand3"
    },
    {
      "brand": "brand4"
    }
  ]
}		
];

const data2 = [
{
  "data2result": [
    {
      "date": "12-01",
      "details": [
        {
          "amount": 24250,
          "brand": "brand1"
        },
        {
          "amount": 68350,
          "brand": "brand2"
        },
        {
          "amount": 60,
          "brand": "brand3"
        },
        {
          "amount": 11078,
          "brand": "brand4"
        }
      ]
    },
    {
      "date": "12-02",
      "details": [
        {
          "amount": 27340,
          "brand": "brand1"
        },
        {
          "amount": 16500,
          "brand": "brand2"
        },
        {
          "amount": 210,
          "brand": "brand3"
        },
        {
          "amount": 23229,
          "brand": "brand4"
        }
      ]
    },
    ]
}
];

至于我的代码

export default React.createClass({

  render() {
  	<table>
	    <thead>
	      <tr>
	          <th></th>
	          {
	              data1.map(function(i) {
	                return <th>{i.data1result.brand}</th>;
	              })
	            }
	      </tr>
	    </thead>

	    <tbody>
	        {data2.map(function(a) {

	          return (
	            <tr className="salesTarget">
	                <td className="td-fixed"><b>{a.data2result.date}</b></td>
                      //help me here
	                <td className="td-fixed">brand1 amount of date **-**</td>
	                <td className="td-fixed">brand2 amount of date **-**</td>
	                <td className="td-fixed">brand3 amount of date **-**</td>
	                <td className="td-fixed">brand4 amount of date **-**</td>
	            </tr>
	            )
	        })}
	    </tbody>
	</table>
  }

})

结果应该是这样的

Answer 1

您可以映射数组 而不是对象。在您呈现品牌数量的情况下，假设品牌值(value)的顺序相同，只需创建一个嵌套的 map 函数。还可以查看外部 map 是如何创建的。此外，您的 React 类中必须有一个 return 语句。

var App =  React.createClass({

  render() {
    const data1=[{data1result:[{brand:"brand1"},{brand:"brand2"},{brand:"brand3"},{brand:"brand4"}]}];

    const data2=[{data2result:[{date:"12-01",details:[{amount:24250,brand:"brand1"},{amount:68350,brand:"brand2"},{amount:60,brand:"brand3"},{amount:11078,brand:"brand4"}]},{date:"12-02",details:[{amount:27340,brand:"brand1"},{amount:16500,brand:"brand2"},{amount:210,brand:"brand3"},{amount:23229,brand:"brand4"}]}]}];

    return (
  	<table>
	    <thead>
	      <tr>
	          <th></th>
	          {
	              data1[0].data1result.map(function(i) {
	                return <th>{i.brand}</th>;
	              })
	            }
	      </tr>
	    </thead>

	    <tbody>
	        {data2[0].data2result.map(function(a) {

	          return (
	            <tr className="salesTarget">
	                <td className="td-fixed"><b>{a.date}</b></td>
                     
                    {a.details.map(function(item){
                        return (
                            <td className="td-fixed">{item.amount}</td>
	                
                        )
                    })}
	                
	            </tr>
	            )
	        })}
	    </tbody>
	</table>
    )
  }

})
  
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>