как l oop через вложенный словарь или json данные в Reactjs

Question

Использование Reactjs как создать function component, который l oop через json data ниже и отображать location содержимое.

Я хочу, чтобы функция также могла отображать что-то еще как members при необходимости.

Я новичок, чтобы реагировать, и большинство примеров онлайн показывают это, используя компонент класса (который меня не интересует)

data. json

[{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "authorization": "Black card",
      "location": [
        "Next",
        "Previous",
        "Here"
      ]
    }
  ]
}]

Answer 1

Конечно, я не могу сделать для вас полное проектное решение, но функция, которую вы хотели, должна иметь такой вид логики c.

const jsonData = [{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "authorization": "Black card",
      "location": [
        "Next",
        "Previous",
        "Here"
      ]
    }
  ]
}]

jsonData.forEach(item=>{
  
  item.members.map((member)=>{
    
    if(member.location&&member.location[0]){
  
      //Do whatever, maybe you want to use return statement in there
      console.log(member.location)
    }
    else{
    
      //do something else, or add more conditions
      console.log("There's no location in it")
    }
  })
})

вы можете поместить ее в переменную и добавить свою переменную в свой оператор возврата jsx или использовать ее непосредственно в середине оператора возврата вашей функции.

Хорошо удачи.

Answer 2

Вы можете отобразить данные в функциональном компоненте так же, как и в компоненте класса. В этом примере вы можете перечислить только вложенные данные:

const List = () => {
  return (
    <div>
      {data.map(item =>
        (item.members || []).map(member =>
          (member.location || []).map(item => (<div>{item}</div>))
        )
      )}
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

, в котором будут перечислены только вложенные данные "location" для каждого члена, если это свойство существует. Или вы можете отобразить данные и отобразить свойства верхнего уровня, а затем также отобразить их вложенные свойства:

const List = () => {
  return (
    <div>
      {data.map(item => (
        ((item.members || []).map(member => (
          <div>
            {member.name || ''}
            {member.location && member.location.map(loc => (<div>{loc}</div>))}
          </div>
        )))
      ))}
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>