javascript - How do I make js make chips according to json

Question

The JSON is

{
  "friends": {
    "count": "9",
    "friends": [
      "Xdevil_blueX",
      "SpectakularBaby_YT",
      "kingdondon96",
      "Xxaland366xX",
      "imbadinarsenal_99",
      "EnderMox2",
      "No0dles_s",
      "cracon999",
      "ionwarrior123"
    ]
  }
}

I want it to output this Materialize Chip for every friend

<div class="chip">
  <img
    src="https://www.roblox.com/headshot-thumbnail/image?userId=1816015877&width=60&height=60&format=png"
    alt="Contact Person"
  />
  ionwarrior123
</div>

It would look like this

Answer 1

Your question is a bit too wide, but you basically need to fetch that json and then map it through as such:

let json = '{
  "friends": {
    "count": "9",
    "friends": [
      "Xdevil_blueX",
      "SpectakularBaby_YT",
      "kingdondon96",
      "Xxaland366xX",
      "imbadinarsenal_99",
      "EnderMox2",
      "No0dles_s",
      "cracon999",
      "ionwarrior123"
    ]
  }
}'
let obj = JSON.parse(json);
  
obj?.friends.friends.map((friend, index) => (
   `<div key={index} class="chip">
      <img src="https://www.roblox.com/headshot-thumbnail/image?userId=1816015877&width=60&height=60&format=png" alt="Contact Person" />
      ionwarrior123
   </div>`
))