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

Question

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.

@holydragon productData id adding to saveProduct array in storedData — Dani
– Dani, Commented Jan 25, 2019 at 7:54
What's the relationship or condition to add? Or add it like n x n? — holydragon
– holydragon, Commented Jan 25, 2019 at 7:55
I think the forEach should be a map function to return values — Björn Heiß
– Björn Heiß, Commented Jan 25, 2019 at 7:58
How to know that this product id go to which store data object in the array? — holydragon
– holydragon, Commented Jan 25, 2019 at 8:34

gazdagergo · Accepted Answer · 2019-01-25 15:34:57Z

1

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

edited Jan 25, 2019 at 15:34

answered Jan 25, 2019 at 8:13

gazdagergo

6,7811 gold badge36 silver badges50 bronze badges

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

17 Comments

Dani Over a year ago

I want to store each of these objects by drag and drop in saveProduct array

Dani Over a year ago

We chose an object using the find method, We must store this object in another array(saveProduct), Each of Jason storeData objects we choose

gazdagergo Over a year ago

Can you pls describe how can I select which storeData object should I put the product? Or it will go in every storeData item's saveProduct?

Dani Over a year ago

we have two json data one productData(Product list) and the other storeData(store list), Now we want by drag and drop add products to json storeData that place of store this products named saveProduct(array object), we want to drop product on any of these storeData objects save to saveproducts arraye same place

gazdagergo Over a year ago

come back to chat

|

Ved_Code_it · Accepted Answer · 2019-01-25 07:59:07Z

0

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

answered Jan 25, 2019 at 7:59

Ved_Code_it

7746 silver badges10 bronze badges

1 Comment

Dani Over a year ago

i'm want delete product select and add to saveProduct array,, function addItem deleted product select but does not add.

Collectives™ on Stack Overflow

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

2 Answers 2

17 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related