Iterate over a json and get the matching user his image

Viewed 38

I have a problem. I have a json and I iterate over all messages that are contained in the json. now I want to save the image. Say I search in the json for the users with the matching id_profile and I want to get the image from it. How do I do that exactly?

Json

   {
      "users": [
        {
          "user": {
            "id_profile": 1,
            "username": "Kü"
          },
          "image": "test.png"
        },
        {
          "user": {
            "id_profile": 2,
            "username": "zim"
          },
          "image": "flower.png"
        }
      ],
      "messages": [
        {
          "id": 62,
          "id_profile": 1,
          "id_groupchat": 3,
          "text": "a",
          "writtendate": "2021-05-19T06:56:38.569Z"
        },
        {
          "id": 63,
          "id_profile": 2, 
          "id_groupchat": 3,
          "text": "asd",
          "writtendate": "2021-05-19T06:56:38.569Z"
        },
        ...
      ]
    }

What I tried

jsons.messages.map((json, index) => {
      
      var image = jsons.users.id_profile(json.id_profile).image
      

      const incomingMessage = {
        ...json,
        id_profile: json.id_profile,
        timestamp: json.timestamp,
        image: image
      };
      //setMessages((messages) => [...messages, incomingMessage]);
    });

What I want

jsons.messages.map((json, index) => {
      // json.id is == 62
      //                                   1              test.png      
      var image = jsons.users.id_profile(json.id_profile).image
      
      // json.id is == 63
      //                                   2              flower.png      
      var image = jsons.users.id_profile(json.id_profile).image

      const incomingMessage = {
        ...json,
        id_profile: json.id_profile,
        timestamp: json.timestamp,
        image: image // test.png at json.id 62 and flower.png at json.id 63
      };
      //setMessages((messages) => [...messages, incomingMessage]);
    });
1 Answers

Try this:


let jsons =   {
    "users": [
        {
            "user": {
                "id_profile": 1,
                "username": "Kü"
            },
            "image": "test.png"
        },
        {
            "user": {
                "id_profile": 2,
                "username": "zim"
            },
            "image": "flower.png"
        }
    ],
    "messages": [
        {
            "id": 62,
            "id_profile": 1,
            "id_groupchat": 3,
            "text": "a",
            "writtendate": "2021-05-19T06:56:38.569Z"
        },
        {
            "id": 63,
            "id_profile": 2,
            "id_groupchat": 3,
            "text": "asd",
            "writtendate": "2021-05-19T06:56:38.569Z"
        },
    ]
}

let users = jsons.users.reduce(function(map, obj) {
    map[obj.user.id_profile] = obj.image;
    return map;
}, {});

console.log(JSON.stringify(users))

jsons.messages.map((json, index) => {
    let image = users[json.id_profile]

    const incomingMessage = {
        ...json,
        id_profile: json.id_profile,
        timestamp: json.timestamp,
        image: image // test.png at json.id 62 and flower.png at json.id 63
    };
    //setMessages((messages) => [...messages, incomingMessage]);

    console.log(JSON.stringify(incomingMessage))
});
Related