javascriptreactjsmention

parsing markup in react-mentions package


I am using 'react-mentions' library for mentioning name from database. but the data format comes in a weird format. Now i want to make this in a json format.This is my code:

 <MentionsInput
                                                className="comments-textarea"
                                                placeholder=""
                                                value={this.state.value}
                                                onChange={this.handleChange}
                                                onSelect={this.handleSelection}
                                                onBlur={this.handleBlur}
                                                markup={this.state.markup}
                                                autoFocus
                                            >
                                                <Mention
                                                    className="comment-user"
                                                    type="user"
                                                    trigger="cli"
                                                    data={this.state.totalImageList}
                                       
                                                />
                                            </MentionsInput>

This is the onchange function for the data:

handleChange(event, newValue) {
    this.setState({ value: newValue });
    console.log("got value",event.target.value)
}

My console.log shows the data in this format:

@[bedrooom pic 5](dd246746-237f-4231-a9ae-df778a9634b4) @[bedrooom pic 4](f8c88c76-651f-4b45-83d4-8463ae76693c) @[bedrooom pic 5](dd246746-237f-4231-a9ae-df778a9634b4)

All i want format it in an array like this:

{
    "id": "dd246746-237f-4231-a9ae-df778a9634b4",
    "imageName":"bedroom pic 5 
   },

Solution

  • Here is my take on converting it, it can be improved for performance though

    var mystr=`@[bedrooom pic 5](dd246746-237f-4231-a9ae-df778a9634b4) @[bedrooom pic 4](f8c88c76-651f-4b45-83d4-8463ae76693c) @[bedrooom pic 5](dd246746-237f-4231-a9ae-df778a9634b4)`
    mystr=mystr.substring(1)
    var arry=mystr.split(" @")
    var returnArr=[]
    var obj={}
    for(var a of arry){
      var value=a.substring(
        a.lastIndexOf("[") + 1, 
        a.lastIndexOf("]"))
      var key=a.substring(
        a.lastIndexOf("(") + 1, 
        a.lastIndexOf(")"));
      obj[`imageName`]=value
      obj[`id`]=key
      returnArr.push(obj)
    }
    console.log(returnArr)