比较2组不同的数据阵列

Question

我有一个正在检索2组数据的应用。我现在要做的是获取brand的{​​{1}}以及data1 brand取决于日期，如果为真，它将呈现data2 amount。

到目前为止，这是我的代码

- 我的数据

＆＃13;

＆＃13;

data2

＆＃13;

＆＃13;

＆＃13;

和我的代码

＆＃13;

＆＃13;

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"
        }
      ]
    },
    ]
}
];

＆＃13;

＆＃13;

＆＃13;

，结果应该是这样的

Answer 1

向map添加data2result[].details，您应该能够为每个品牌呈现列：

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>

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

Answer 2

你可以map over an array而不是对象。在您的情况下，假设品牌价值的顺序相同，则仅为create a nested map function呈现品牌数量。另请参阅如何创建外部地图。你的反应课也必须有return statement。

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>

Answer 3

您可以尝试这样的事情：

注意：此答案仅解决部分处理数据而不是将值绑定到React UI

＆＃13;

＆＃13;

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"}]}]}];
  
var result = {};
data1[0].data1result.forEach(function(brand){
  data2[0].data2result.forEach(function(res){
    result[res.date] = result[res.date] || {};
    var amount = res.details.reduce(function(p,c){
      p += c.brand === brand.brand ? c.amount : 0;
      return p;
    }, 0)
    if(amount > 0)
      result[res.date][brand.brand] = amount;
  })
});

console.log(result)

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个：

export default React.createClass({

render() {
    <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(b) {
                           <td className="td-fixed">{ b.amount }</td> 
                       })
                    }
                 </tr>
              )
           })
        }
       </tbody>
    </table>
   }
})