Reputation: 77

ReactJS Array Parse inside Object

I have a object

{
    "id": 1,
    "collectionName": "dsa",
    "collectionItemsID": [
        "ad",
        "deneme1"
    ],
    "ownerOfCollection": "117961395738439786389",
    "createdAt": "2022-06-16T12:54:52.146Z",
    "updatedAt": "2022-06-16T12:54:52.146Z"
}

When I push to front like that in ReactJS

{collection.collectionItemsID}

I am getting output with joined.

addeneme1

It needs to be seperated. I didnt wanted to use javascript for seperate. I need to learn how to do correctly. I think I needs to use Object.keys but I am failed with this way.

How can I map collectionItemsID in ReactJS?

this is the example way of I wanted to implement object outputs

          {data.map((item, i) => (
            <tr key={i}>
              <td>
                <input
                  id={item.user_id}
                  type="checkbox"
                  value={item.user_id}
                  onChange={handleChange}
                  checked={isChecked}
                />
              </td>
              <td>{item.user_id}</td>
              <td>{item.user_name}</td>
              <td className="isbanned">{item.isbanned}</td>
              <td>{item.registration_date}</td>
              <td>{item.last_login}</td>
            </tr>
          ))}

Solution

<div>

            {Object.keys(collection).length > 0 ? <div>
                <h1>{collection.name}</h1>
                <p>{collection.description}</p>
                {collection.collectionItemsID.map(function (itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })}
            </div> : <p>Loading...</p>}
        </div>

Upvotes: 1

Answers (3)

Eagnir

Reputation: 489

Solution

If you want have each entry in collectionItemsID to have it's own link, you need to use the map method of an array

collection.collectionItemsID.map(function(itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })

Explanation

From the documentation of map method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Suggestions

You should always name your list attributes in plural form so instead of collectionItemsID it should be collectionItemIDs which indicates to anyone reading that it potentially have multiple values.
You should also not add the word collection to the attribute as the object itself is a collection. for example it should be

{
    "id": 1,
    "name": "dsa",
    "itemIds": [
        "ad",
        "deneme1"
    ],
    "owner": "117961395738439786389",
    "createdAt": "2022-06-16T12:54:52.146Z",
    "updatedAt": "2022-06-16T12:54:52.146Z"
}

This way when you have a variable holding the object, the code becomes

var collection = {....}
collection.name // dsa
collection.owner // 117961395738439786389
collection.itemIds // ["ad","deneme1"]

Upvotes: 0

Samet

Reputation: 77

This is the answer of my question

        <div>

            {Object.keys(collection).length > 0 ? <div>
                <h1>{collection.name}</h1>
                <p>{collection.description}</p>
                {collection.collectionItemsID.map(function (itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })}
            </div> : <p>Loading...</p>}
        </div>