Comparing 2 different set of data array

Question

I have an app that are retrieving 2 sets of data. Now I want to do is get the brand of data1 and and the brand of data2 which depends on the date, if true it will render the amount of data2.

so far this is my code

-my data

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

and as for my code

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>
  }

})

and the result should be like this

Answer 1

You can map over an array and not an object. In your case to render the brand amounts just create a nested map function assuming the order of brand values is the same. Also have a look at how the outer map is created. Also you must have a return statement in you react class .

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 2

Adding a map to your data2result[].details, you should be able to render the columns for each brand:

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