Tengo una aplicación que está recuperando 2 conjuntos de datos. Ahora lo que quiero hacer es obtener el brand de data1 yy el brand de data2 que depende de la fecha, si es verdadero, mostrará el amount de data2.

Hasta ahora este es mi código

-mis datos

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

Y en cuanto a mi código

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

})

Y el resultado debería ser así

enter image description here

3
kcNeko 11 ene. 2017 a las 12:54

4 respuestas

La mejor respuesta

Puedes map over an array y no un objeto. En su caso, para representar las cantidades de la marca solo create a nested map function suponiendo que el orden de los valores de la marca sea el mismo. También eche un vistazo a cómo se crea el mapa exterior. También debe tener un return statement en su clase de reacción.

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>
1
Shubham Khatri 11 ene. 2017 a las 10:22

Prueba esto:

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>
   }
})
1
Mayank Shukla 11 ene. 2017 a las 10:20

Agregando un map a su data2result[].details, debería poder representar las columnas para cada marca:

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>
  }
})
1
Ashley 'CptLemming' Wilson 11 ene. 2017 a las 10:03

Puedes probar algo como esto:

Nota: Esta respuesta solo aborda parte del procesamiento de datos y no vincula los valores a 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)
1
Rajesh 11 ene. 2017 a las 10:11