ReactJS Array Parse inside Object

Question

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>

My Issue is its an object and collectionItemsID has items in. I need to reach collectionItemsID by one by. {collection.collectionItemsID} this is the way of directly reach to every item. but I want to reach one by one this renders as {collection.collectionItemsID} >>>> addeneme1. So basically how can I map collectionItemsID — Samet
– Samet, Commented Jun 29, 2022 at 0:59
collectionItemsID is an array, so what do you concretely want to have happen here? Two <a> elements, one for each string in collectionItemsID? A single <a> with the content of collectionItemsID joined with /? There seem to be details missing here that prevent answering this question. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 29, 2022 at 1:01
Looks like href part made more complicated. I just removed. I want to map collectionItemsID inside in object. when I mapped it I will be able to push to front each item has own links — Samet
– Samet, Commented Jun 29, 2022 at 1:03
Those words don't mean anything on their own, as arrays are objects in JS. So: please show what exact output you want to achieve. You've shown the input you're working with, now edit your post to show what output that should become, and then show the code you already wrote to try to achieve that (and talk about how that went wrong and what you already tried/looked up/searched to understand why, and how to fix that). — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 29, 2022 at 1:04

Samet · Accepted Answer · 2022-06-29 01:15:57Z

1

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>

answered Jun 29, 2022 at 1:15

Samet

777 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eagnir · Accepted Answer · 2022-06-29 01:22:06Z

0

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"]

edited Jun 29, 2022 at 1:22

answered Jun 29, 2022 at 1:10

Eagnir

4893 silver badges7 bronze badges

3 Comments

Samet Over a year ago

but the problem is its not array. its object and map function not working Cannot read properties of undefined (reading 'map')

Samet Over a year ago

I edited a little bit the code and I found the answer thanks for help

Eagnir Over a year ago

Thats great, could you also share here what your edit was that lead to your resolution, it might help the next person reading this post.

Mike 'Pomax' Kamermans · Accepted Answer · 2022-06-29 01:00:18Z

0

I think what you might be looking for is...

<a href={`/${collectionItemsID.join(' ')}`}>

edited Jun 29, 2022 at 1:00

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

answered Jun 29, 2022 at 0:58

Ian

214 bronze badges

3 Comments

Samet Over a year ago

not like that. I wanted to handle render part. {collection.collectionItemsID} >>> addeneme1 but I need to map object inside collectionItemsID

Ian Over a year ago

@Samet I guess I'm a bit confused on what you want. Can you give a more detail example in your original question? Thanks

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ReactJS Array Parse inside Object

3 Answers 3

Comments

Solution

Explanation

Suggestions

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Solution

Explanation

Suggestions

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related