映射对象数组并访问 object 值

Question

I am trying to pick a value from array of object and the values can only be from first object. Firstly i have a array of objects like this:

items [
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ],
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ],
  [
    {id: 1, title: "title1", imgUrl: "https://someimage1"},
    {id: 2, title: "title2", imgUrl: "https://someimage2"}
  ]
]

I am planning to display the title and img url on the page. I am using react and this is what i have tried so far:

items.map(item => {
   //here i enter each array of the big array individually

   //here i will enter first object of the give array
   console.log('ITEM:', item[0])
})

in console.log i get this:

ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}
ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}
ITEM: {id: 1, title: "title1", imgUrl: "https://someimage1"}

but I need to get each title and imgUrl so in my .map() I do this:

    items.map(item => {
       //here i enter each array of the big array individually

       //here i will enter first object of the give array
       console.log('ITEM:', item[0].title)
    })

but I get this error:

TypeError: Cannot read property 'title' of undefined

I don't understand why I thought I would be able to use dot notation to access whatever key in the object you would like:

for more context:
            <div>
                {
                    items.map((item) => {
                        return <ul>
                            <li>
                                <div>
                                    <p>{item[0].title}</p>
                                    <img src={item[0].url}/>
                                </div>
                            </li>
                        </ul>
                    })
                }
            </div>

MY SOLUTION TO THE ABOVE PROBLEM

SO i have spend some time messing around with this issue and this works for me:

            items.map((item) => {
                return item.map ((x, index) => {
                    if (index === 0) {
                        return <ul>
                            <li>
                                <div>
                                    <p>{ x.title }</p>
                                    <img src={x.url}/>
                                </div>
                            </li>
                        </ul>
                    }
                })
            })

Still not sure why my initial idea item[0].title not work without having nested map() function

Answer 1

Try using quotes around the keys:

items [
  [
    {"id": 1, "title": "title1", "imgUrl": "https://someimage1"},
    {"id": 2, "title": "title2", "imgUrl": "https://someimage2"}
  ]
]

Answer 2

[Update Based on OP updating Post:

Since map builds a new array, using it when you aren't using the returned array is an anti-pattern; use forEach or for-of instead. Signs you shouldn't be using map:
A) You're not using the array it returns, and/or

B) You're not returning a value from the callback.

Further reading on.map() via Mozilla

Furthermore nesting 2 loops in such a way will force twice as many iterations as it will still run length times.

If you need to access a sub element and know its index or key then use that value by:

array[index] or object.key and use a single map() (example in full snippet)

If you do actually need to loop over every element (due to some condition not expressed in your question) instead use:

.find() ( single elements )

or .filter(elm => elm === 'someValue') ( multiple elements )

or .reduce() ( multiple elements ) with mutating elements as you go

or even .forEach() ( multi elements ) with performing additional functions outside of array building (you will need to push to something like let loopArray = [] )

Continue Original Answer]

Move the ul tag outside the map statement and change url to imgUrl.

Keep in mind if items is generated via async then you will also need to validate items before using map , something like:

{(items && items.length) && items.map(item=>{
    /*code*/
)}

Working Snippet (without async check):

 const SomeComponent = () => { const items = [ [ {id: 1, title: "title1.1", imgUrl: "https://p7.hiclipart.com/preview/917/362/567/halloween-trick-or-treating-double-ninth-festival-illustration-halloween-design-elements.jpg"}, {id: 2, title: "title2", imgUrl: "https://someimage2"} ], [ {id: 1, title: "title1.2", imgUrl: "https://image.shutterstock.com/image-vector/silhouette-cat-dog-on-white-600w-671156590.jpg"}, {id: 2, title: "title2", imgUrl: "https://someimage2"} ], [ {id: 1, title: "title1.3", imgUrl: "https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Transparent-OrangeWhiteCat-768x1030.png"}, {id: 2, title: "title2", imgUrl: "https://someimage2"} ] ]; return ( <div> <ul> {items.map((item,index) => { return( <li key={String(index)}> <div> <p>{item[0].title}</p> <img style={{width:'10%'}} src={item.imgUrl} alt={item.title}/> </div> </li> ) })} </ul> </div> ) } ReactDOM.render( <SomeComponent />, document.getElementById("react") );

 <div id='react'></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>