How to get data with nested JSON without create a lots of map method

Question

Question 1

I'll get straight to the point, I have a JSON file like this:

{
    "activities": [
        {
            "activityId": "60f672b20f38640008a6c29b",
            "_id": "610cb887b149cb00095e1eb6",
        
            "trackingProgress": [
                {
                    "_id": "610cb8ee541fea0009189c36",
                    "dateRecorded": "2021-07-16T00:00:00.000Z",
                    "emotion":"Good",
                    "items": [
                        {
                            "_id": "610cb8ee541fea0009189c37",
                            "feelingType": "Satisfied",
                            "times": 2
                        }
                    ]
                },
                {
                    "_id": "611358300fea490008d56ea7",
                    "dateRecorded": "2021-08-10T00:00:00.000Z",
                    "emotion":"Bad",
                    "items": [
                        {
                            "_id": "6113583b0fea490008d56eae",
                            "feelingType": "Neutral",
                            "times": 1
                        }
                    ]
                },
                {
                    "_id": "611b6068fed9100009a4f689",
                    "dateRecorded": "2021-08-17T00:00:00.000Z",
                    "emotion":"Neutral",
                    "items": [
                        {
                            "_id": "611b6068fed9100009a4f68a",
                            "feelingType": "Satisfied",
                            "times": 4
                        }
                    ]
                }
            ],
            "title": "Losing & Managing Weight",
            "description": "Losing weight",
            "order": null,
            "daysOfWeek": [
                "tuesday"
            ],
            "reminderTimeAt": "09:00 am",
            "type": "Custom",
            "progressOverview": {
                "notSatisfied": 0,
                "neutral": 1,
                "satisfied": 6
            }
        }
    ]
}

Now i want to get, for example id of items, the only method i know is

const listActivity = data.activities
  .map((item1) => item1.trackingProgress
  .map((item2) => item2.items
  .map((item3)=>(item3._id))))

And it return something like this

[
    [
        [
            "610cb8ee541fea0009189c37"
        ],
        [
            "6113583b0fea490008d56eae"
        ],
        [
            "611b6068fed9100009a4f68a"
        ]
    ]
]

or

But i want an array without wrap any of this, if this happen, i will have to use a lots of map everytime i want to get data, all i want is just [id1,id2,id3] , how can i do that, thank you a lots

Question 2

How to make an json with {} and with []. I notice use {}, we cab access child data by using . , but with [], we have to use map, so what is the better way to get data, especially like above array?

Sounds like you want to use JSONPath. see https://stackoverflow.com/questions/8481380/is-there-a-json-equivalent-of-xquery-xpath — Alex Stoneham, Aug 29 '21 at 17:32
Thank for your answer, but i wonder, is there no way we can do this with pure javascript and react? — Lê Quốc Khánh, Aug 29 '21 at 17:34

score 1 · Accepted Answer · answered Aug 29 '21 at 17:37

1

Sounds like you want to use JSONPath, see the accepted answer here: Is there a JSON equivalent of XQuery/XPath?

and go over https://code.google.com/archive/p/jsonpath/ for some syntax examples.

JSONPath is to JSON what X-Path is to XML.

For your case something like:

jsonPath(yourJsonObj, $.activities.trackingProgress.items._id)

If you are using ES6, then install it from NPM and import it

https://www.npmjs.com/package/jsonpath

answered Aug 29 '21 at 17:37

Alex Stoneham

66
5

Thank you so much for your answer, but as i know until now there are no way we can't do this with `map`, is that right? – Lê Quốc Khánh Aug 29 '21 at 17:43
Oh I understand what you are asking now, hmm let me see, I think it your after map reduce. – Alex Stoneham Aug 29 '21 at 17:46
1

You may also opt to keep the maps and flatten the result with flat() – danh Aug 29 '21 at 17:55

Alex Stoneham · Answer 2 · 2021-08-29T18:06:32.780

What you are after is Map Reduce

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

and for example :

 output = foo.reduce((activitiesReducedResultArray, currentActivity) => {
  const trackingProgressResultArray = currentActivity.reduce((trackingProgressReducedResultArray, currentTrackingProgress) => {
    const itemResultsArray = currentTrackingProgress.reduce((itemsReducedResultArray, currentItem) => {
                return itemsReducedResultArray.push(currentItem['_id']) ;                   
        });
            itemsReducedResultArray.concat(idResultsArray);
    });
    return trackingProgressReducedResultArray.concat(itemResultsArray);
  });
  return activitiesReducedResultArray.concat(trackingProgressResultArray)
});

consider accumulator as your output array data structure. and instead of accumulator + currentValue; you o

Updated my answer to your use case. – Alex Stoneham Aug 29 '21 at 18:06 — Alex Stoneham, Aug 29 '21 at 18:06
Thank you, but i think i will use JSONPath – Lê Quốc Khánh Aug 29 '21 at 20:16 — Lê Quốc Khánh, Aug 29 '21 at 20:16

How to get data with nested JSON without create a lots of map method

2 Answers2