Mapping over an array of objects that is inside a string

Question

I want to map over this array of objects below in react Js, how do I go about it?

'[{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]'

It's not really clear what you're asking or whether you've made any attempt at solving this yourself. If you have add that code to your question as a [mcve]. — Andy, Aug 03 '22 at 16:49
@MattPengelly i think i should reprhase the question, what I am getting from the backend is "[{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]" iterating over this is a problem, i have tried Array.from and yet i am getting null — Ayodele, Aug 03 '22 at 17:08
@MattPengelly it has "[]" if you notice, i cant get out of that now? — Ayodele, Aug 03 '22 at 17:14
@MattPengelly i added an image of what I am trying to achieve to my question now — Ayodele, Aug 03 '22 at 17:15
please also show a desired *output format*, you simply want to map over an array of arrays or objects, but mapping implies an output format. should it be a single array of objects? or a single array of names/props? without more details we cannot know. — Matt Pengelly, Aug 03 '22 at 17:29
@MattPengelly the mapping is not the issue now but the format in which the array is coming from the backend, I posted a picture of what I am getting from the backend now, notice the "[]", its just trying to convert that to an array now so it can be iterable that's the issue now, tried Array.from and yet, getting error — Ayodele, Aug 03 '22 at 17:41
@MattPengelly i had to parse the data coming from the backend, but I don't think that should be good enough for that. Thanks — Ayodele, Aug 03 '22 at 17:57
without an output format, this is impossible to answer. @konradLinkowski has 1 way to map over the contents, but you will lose data that way. Since you did not specify a desired *output format* its not possible to answer the question any better then he did already. — Matt Pengelly, Aug 03 '22 at 18:03
You're getting a **string**, not an array. The string contains a **serialised** (stringified) array, so you need to **deserialise** it. It looks like [serialised JSON](https://stackoverflow.com/questions/3316762/what-is-deserialize-and-serialize-in-json) so you should be able to deserialise it into an array using [`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse), like `JSON.parse(data.add_ons).map((item) => doSomething(item))` — user56reinstatemonica8, Aug 04 '22 at 08:59

score 0 · Answer 1 · answered Aug 03 '22 at 17:32

0

const data = [{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]
const List = () => {
  return (
    <>
      {data.map(datum => datum.items.map(item => 
        <div>item.name</div>
      ))}
    </>
  )
}

answered Aug 03 '22 at 17:32

Konrad

21,590
4
28
64

this discards the non-children properties such as "Means", im unsure if OP actually wants that or not based on their question – Matt Pengelly Aug 03 '22 at 17:35
Everyone's missing that `add_ons` in the example is a **string**, not an array... it needs to be deserialised first, like `JSON.parse(data).map( ...` – user56reinstatemonica8 Aug 04 '22 at 09:08

Suraj Shrestha · Accepted Answer · 2022-08-04T05:50:57.670

-1

You can simply use a map function that is provied for arrays in Javascript.

data.map((item) => console.log(item));

You can view the example I created for your data here https://stackblitz.com/edit/react-ts-zp4b2r?file=App.tsx

edited Aug 04 '22 at 05:50

answered Aug 03 '22 at 17:06

Suraj Shrestha

16
1

can i send a screenshot of what i am trying to achieve, this is what I am getting from the backend "[{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]" and i can iterate over that, what i'll attach a screenshot of what i am trying to achieve to my post – Ayodele Aug 03 '22 at 17:11
yes , please attach the screenshot of what you are getting – Suraj Shrestha Aug 03 '22 at 17:16
I added a screenshot of what i am trying to do by editing my post – Ayodele Aug 03 '22 at 17:17
@Ayodele i have attached a link in the above comment that maps the array you gave and also the array inside that array to. please watch that example if that solves your problem – Suraj Shrestha Aug 03 '22 at 17:19
yes i have seen it, but the array is not iteratable on my end, what I have now if you notice on the correction I posted, this is what I am getting from the backend"[]" notice the array is wrapped in a string like expression, how do I do that? – Ayodele Aug 03 '22 at 17:22
@Ayodele if you visit the link then I have assigned the array you are getting to a variable called data and mapped it. It cannot be that hard.Please visit the link https://stackblitz.com/edit/react-ts-zp4b2r?file=App.tsx if you have time. – Suraj Shrestha Aug 03 '22 at 17:25
i tried array.from and i still got an error, let me post you the exact data I am getting from the backend "[{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]" – Ayodele Aug 03 '22 at 17:25
@Ayodele can you show the screen shots of error you are getting? – Suraj Shrestha Aug 03 '22 at 17:30
I have added a screenshot of the data I am getting from the backend" in my questions now, kindly check it out – Ayodele Aug 03 '22 at 17:33
i had to parse the data coming from the backend, but I don't think that should be good enough for that. Thanks – Ayodele Aug 03 '22 at 17:56
I will still love to see your solution though – Ayodele Aug 03 '22 at 17:57
@Ayodele if you see carefully in my solution , that is the way and you can map the inner array as well – Suraj Shrestha Aug 04 '22 at 05:45

Mapping over an array of objects that is inside a string

2 Answers2