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

Shubham Khatri · Accepted Answer · 2017-01-11 10:22:13Z

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>

edited Jan 11, 2017 at 10:22

answered Jan 11, 2017 at 10:10

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajesh Dixit Over a year ago

I have updated data with minified version to emphasis on render and updtaed logic. If edit is not required, please roll it back.

kcNeko Over a year ago

thank you all for the wonderful solution, really appreciated it. Though can I ask if its posible to add all brands in that particular date?

Rajesh Dixit Over a year ago

@kcNeko if its possible? Yes. It is possible, but I'd request you to take current answers (all answers) and try to deduce solution. Try/Play with them and then if you get stuck, post another question and you will get solution. Try to break problem into smaller sections and solve them individually. This will take sometime, but you will learn how to do certain stuff and in turn you'll help someone. So best of luck :-)

Ashley 'CptLemming' Wilson · Accepted Answer · 2017-01-11 10:03:47Z

1

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

answered Jan 11, 2017 at 10:03

Ashley 'CptLemming' Wilson

9,6122 gold badges35 silver badges36 bronze badges

1 Comment

Shubham Khatri Over a year ago

Its incorrect, a.details will be undefined since it is an object of a.data2result event a.data2result.date will give you undefiend

Rajesh Dixit · Accepted Answer · 2017-01-11 10:11:09Z

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)

Mayank Shukla · Accepted Answer · 2017-01-11 10:20:33Z

1

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

edited Jan 11, 2017 at 10:20

answered Jan 11, 2017 at 10:12

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

Comparing 2 different set of data array

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related