Splitting string into array then using one of the values to be displayed in JavaScript

Question

I have the code below which is in JSX format. r.invoice_details gives me an output that looks like this

{"rate":1522,"quantity":1,"discount":null,"itemName":"Gold Members club (offline)","amount":1522,"noEdit":true}

It's in a form of string. All I want is itemName inside the string to be displayed. What's the best way to write as an inline function?

{
  id: "itemName",
  label: "Item",
  customCell: (r, i) => {
    return <td key={`${i}-itemName`}>
      {r.invoice_details}
      </td>;
  }
},

if it's a string, use JSON.parse and you should be good no ? — Brewal
– Brewal, Commented Oct 25, 2021 at 13:22

Abheeth Kotelawala · Accepted Answer · 2021-10-25 13:55:00Z

1

You can use JSON.parse()

const json = '{"rate":1522,"quantity":1,"discount":null,"itemName":"Gold Members club (offline)","amount":1522,"noEdit":true}';
const obj = JSON.parse(json);

console.log(obj.itemName);

So your end code will look something like this,

{
  id: "itemName",
  label: "Item",
  customCell: (r, i) => {
    return <td key={`${i}-itemName`}>
      {JSON.parse(r.invoice_details).itemName}
      </td>;
  }
},

edited Oct 25, 2021 at 13:55

answered Oct 25, 2021 at 13:28

Abheeth Kotelawala

1421 gold badge1 silver badge7 bronze badges

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

3 Comments

john smith Over a year ago

Thanks but how do I write it in the format above?

john smith Over a year ago

Thanks, the only issue is. I am getting this error Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

Abheeth Kotelawala Over a year ago

Please provide more information on this error, if it is a cross-origin error might have to check the backend as well, again without information it is not possible to help

GabrielMC · Accepted Answer · 2021-10-25 13:51:22Z

0

You can use the JSON.parse() function:

{JSON.parse(r.invoice_details).itemName}

So your final code will look like this:

{
  id: "itemName",
  label: "Item",
  customCell: (r, i) => {
    return <td key={`${i}-itemName`}>
      {JSON.parse(r.invoice_details).itemName}
      </td>;
  }
},

edited Oct 25, 2021 at 13:51

answered Oct 25, 2021 at 13:22

GabrielMC

2882 silver badges7 bronze badges

4 Comments

GabrielMC Over a year ago

done. mdn link added

GabrielMC Over a year ago

@Paul this should be exactly what you need

john smith Over a year ago

Unfortunately, I am getting this error when I write it this way. Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

GabrielMC Over a year ago

without more info, can't help you out.. sounds like an unrelated problem to the question you posted

COLLINSba4 · Accepted Answer · 2021-10-26 08:18:57Z

0

Try Object.values after extractiong JSON.parse()

  let json = JSON.parse(r.invoice_details)
   let inv =   Object.keys(json)
   let inv2 = Object.values(json)
   let Id = inv2[inv1.indexOf("itemName")]

edited Oct 26, 2021 at 8:18

answered Oct 25, 2021 at 13:49

COLLINSba4

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Splitting string into array then using one of the values to be displayed in JavaScript

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related