Store certain values in JSON into parameters in React-CodePudding

brand new to Javascript.

I have figured out how to get data back from a Monday.com board, and it is returned as a JSON value like this:

{
"boards": [
    {
        "items": [
            {
                "column_values": [
                    {
                        "id": "location",
                        "title": "Location",
                        "type": "location",
                        "text": "Cape Town, South Africa"
                    }
                ]
            },
            {
                "column_values": [
                    {
                        "id": "location",
                        "title": "Location",
                        "type": "location",
                        "text": "Paris, France"
                    }
                ]
            },
            {
                "column_values": [
                    {
                        "id": "location",
                        "title": "Location",
                        "type": "location",
                        "text": "New York, NY, USA"
                    }
                ]
            }
        ]
    }
]

}

There are 3 items here, but this amount can be anything.

I need to get the location text (e.g. "Cape Town, South Africa") and then I need to use this later in an API call to get the weather of this location.

I finally managed to display in the console the location, like this:

console.log(JSON.stringify(this.state.boardData.boards[0].items[0].column_values[0].text));

Obviously this then displays what I want, but only the value of the first item.

I need to do this dynamically to get all the locations, and I need to store this into variables, so that I can then make an API call to get the weather of each of the 3 (or more) locations.

I am totally lost and have been struggling for hours. Once I manage to do this, I still have no idea how I'll make the API call but one thing at a time :)

CodePudding user response：

Another approach:

const rawData = {boards:[{items:[{column_values:[{id:"location",title:"Location",type:"location",text:"Cape Town, South Africa"}]},{column_values:[{id:"location",title:"Location",type:"location",text:"Paris, France"}]},{column_values:[{id:"location",title:"Location",type:"location",text:"New York, NY, USA"}]}]}]};

const locations = [];

for (const board of rawData.boards) {
  for (const item of board.items) {
    for (const value of item.column_values) {
      locations.push(value.text);
    }
  }
}

console.log(locations);

CodePudding user response：

You can extract the text with some amount of nested .map. Map boards => map items => map column_values. You will get an array of arrays of arrays. And then you can apply .flat() to unwrap them all. (.flat(Infinity); also can be used)

const apiData={boards:[{items:[{column_values:[{id:"location",title:"Location",type:"location",text:"Cape Town, South Africa"}]},{column_values:[{id:"location",title:"Location",type:"location",text:"Paris, France"}]},{column_values:[{id:"location",title:"Location",type:"location",text:"New York, NY, USA"}]}]}]};

const locations = apiData.boards
  .map((board) => board.items.map((i) => i.column_values.map((cv) => cv.text)))
  .flat(2);
console.log(locations);

CodePudding user response：

So in javascript we have an array function map, using which we can iterate over array that can be used here. It would look something like this:

let arr = boards[0].items.map(element => element.column_values[0].text)

and this arr will contain the list of all the city names, which you can further use to send the data to api.

(Edit: considering column_values to be array with one element only and items can have multiple elements)