Reputation: 609

Comparing 2 different set of data array

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

Upvotes: 3

Answers (4)

Shubham Khatri

Reputation: 281646

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>

Upvotes: 1

Mayank Shukla

Reputation: 104369

Try this:

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

Upvotes: 1

Rajesh

Reputation: 24915

You can try something like this:

Note: This answer just address part of processing data and not binding values to React UI

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)

Upvotes: 1

Ashley 'CptLemming' Wilson

Reputation: 9492

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

Upvotes: 1

Comparing 2 different set of data array

Answers (4)

Related Questions