CODEWITHSUNDEEP
javascriptreactjs
Dani
Dani

Reputation: 47

How to select id object in json data and add to another json data object array

I want select one object in json data(productData) and add to another object array(saveProduct) in json data(storeData),,,

productData component :////////////

import React, { Component } from 'react'
import { dragSource, DragSource } from 'react-dnd'

const itemSource = {
beginDrag(element) {
return element.item
},
endDrag(element, monitor, component) {
if (!monitor.didDrop()) {
  return
}
return element.handleDrop(element.item.id),
console.log("Return id",element.item.id)
}
}
function collect (connect, monitor) {
return {
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
}
}
class Products extends Component {
render () {
 const { isDragging, connectDragSource, item } = this.props
 const opacity = isDragging ? 0 : 1
 return connectDragSource(
  <div>
    <div className='item' style={{ opacity}}>
      {item.name}
    </div>
  </div>
  )
  }
  }
export default DragSource('item', itemSource, collect)(Products)

storeData component : ///////////

import React, { Component } from 'react'
import { DropTarget } from 'react-dnd'

function collect (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
hovered: monitor.isOver(),
item: monitor.getItem()
}
}
class Store extends Component {
render () {
const { connectDropTarget, hovered, item } = this.props
const backcgroundColor = hovered ? 'lightgreen' : ''
return connectDropTarget(
  <div>
    <div className='Store' style={{ background: backcgroundColor }} onClick= 
      {this.props.handleSelect}>
      {this.props.itemS.name}
    </div>
  </div>
)
}
}
export default DropTarget('item', {}, collect)(Store)

productData json:

[
{
    "code": "P1",
    "id": "1",
    "name": "product-no-1",
    "size": 20,
    "temperature": -18,
    "humidity": {
        "min": 0,
        "max": 11
    }
},
{
    "code": "P1",
    "id": "2",
    "name": "product-no-2",
    "size": 20,
    "temperature": -18,
    "humidity": {
        "min": 0,
        "max": 11
    }
},
]

storeData json:

[
{
    "code": "f1",
    "name": "storage-no-1",
    "capacity": 125,
    "temperture": -18,
    "humidity": 3,
    "saveProduct":[]
},
{
    "code": "f2",
    "name": "storage-no-2",
    "capacity": 15,
    "temperture": -18,
    "humidity": 25,
    "saveProduct":[]
}
]

I asked this question a few times and did not receive a response. Please help me.

Upvotes: 0

Views: 1827

Answers (2)

gazdagergo
gazdagergo

Reputation: 6701

Use find to find the desired product by id. Than map through on the storeItems and find which one was the drop target (based on code I suppose). Then add the fount item to its saveProduct array using spread.

addItem = (productId, targetCode) => {
  this.setState(prevState => {
    const { productData, storeData } = prevState;
    const product = productData.find(product => product.id === productId);

    if (!product) return null;

    return {
      storeData: storeData.map(storeItem => {
        if (storeItem.code === targetCode) {
          return {
            ...storeItem,
            saveProduct: [...storeItem.saveProduct, product]
          }
        }
        return storeItem;
      })
    }
  })
}

Upvotes: 1

Ved_Code_it
Ved_Code_it

Reputation: 774

Try this let me know if it is working for you or not

addItem=(id)=>{
        const productData  = assign your productData json
        const savedProductData  =assign your storeData json:
        cobst productToBeAdded= productData.find(item => item.id === id);
        let saveProduct= savedProductData.find(item => item.code === productToBeAdded.code);
        if(productToBeAdded && saveProduct){
      if(!saveProduct.find(item => item.id === productToBeAdded.id)){
          saveProduct.push(productToBeAdded)
        }
    }

Upvotes: 0

Related Questions