Why can't I use map function on JSON?

JavaScript
1

I have a JSON type that I will put the image of below. I want to add all the movies in it to the home page one by one, but the console is always

Uncaught (in promise) TypeError: can't access property "map", film.Search is undefined
Uncaught (in promise) TypeError: can't access property 0, item.Search is undefined

I don’t know the reason for these errors. Movies are not added to the home page. Thanks in advance for your answers.

 displayResults(film) {
        let fiks = film.Search.map((item, index) => {
            return `
        <div class="film-card">
                        <div class="film-poster">
                            <img src="${item.Search[index][index].Poster == "N/A" ? "https://blog.rahulbhutani.com/wp-content/uploads/2020/05/Screenshot-2018-12-16-at-21.06.29.png" : item.Search[index].Poster}"
                                alt="${item.Search[index].Title == "N/A" ? "Name Not Found" : item.Search[index].Title}">
                        </div>
                        <div class="film-info">
                            <div class="favorite-btn hide"><i class="fas fa-star"></i></div>
                            <div class="favorite-btn"><i class="far fa-star"></i></div>
                            <div class="film-description">
                                <h3>${item.Search[index].Title == "N/A" ? "Name Not Found" : item.Search[index].Title}</h3>
                                <p class="film-story">
                                ${item.Search[index].Plot == "N/A" ? "Description Not Found" : item.Search[index].Plot}
                                </p>
                                <p class="film-artist">
                                    Actors: <span>${item.Search[index].Actors == "N/A" ? "Actors Not Found" : item.Search[index].Actors}</span>
                                </p>
                                <p class="film-director">Director: <span>${item.Search[index].Director == "N/A" ? "Direcotr Not Found" : item.Search[index].Director}</span></p>
                            </div>
                            <div class="film-property">
                                <span class="film-imdb-rates">${item.Search[index].imdbRating == "N/A" ? "NaN" : item.Search[index].imdbRating}/10 <code>&nbsp;</code> <span class="rate-data-company"><em>by</em>
                                        IMDB</span>
                                </span>
                                <span class="film-vision-date">Release Date: <span>${item.Search[index].DVD == "N/A" ? "Date Not Found" : item.Search[index].DVD}</span></span>
                            </div>
                        </div>
                    </div>
        `
        })
        fiks = fiks.join(" ")
        console.log(fiks);
        this.topParents.style.display = "none"
        this.mostPopulerHeader.style.display = "none"
        if (film.Title == undefined) {
            this.resultHeader.style.display = "block"
            this.resultHeader.textContent = "NOT FOUND"
            this.resultParent.innerHTML = `
            <i class="fas fa-sad-cry" style="font-size:450px; color:navy;"></i>
            `
        } else {
            this.resultHeader.style.display = "block"
            this.resultHeader.textContent = "RESULTS"
            // this.resultParent.innerHTML = fiks
        }
    }


1223×786

2

You’re trying to map over the array before the data is there (ie the promise is not resolved). So you’re trying to do undefined.map. The map method only works on arrays, there is no array. Would need to see the code from where the function is called

Also JSON is just a string, I assume you’re parsing it to something JS can understand (ie an array) so as to map over it?

3

So what exactly should i do?

4

If the issue is a promise being unresolved you may find this useful
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

5

We can’t see what you’re doing. So can’t really advise much more than that

6

Already I use ASYNC Functions.

7

Where the API was first invoked

async getDatas(filmName) {
        const data = await fetch(this.url + filmName)
        const response = await data.json()
        const try = Object.values(response)
        return try
    }

Then it is sent to the code I discarded from here.

function getFilms() {
let inputValue = searchInput.value.trim().split(' ').join('+')
if (inputValue === '' || !isNaN(inputValue)) {
    ui.clearInput()
    ui.returnback()
    
} else {
        filmRequest.getDatas(inputValue)
        .then(data => {
            ui.displayResults(data)
        })
    }
}
9

try is a reserved keyword. You can’t use it as a variable name.

How/where are you coding this? You should be getting a syntax error from that code.

10

The name of the variable was different I gave a name in my local language, but I wrote it as an example in English while writing here, that’s not the problem anyway.

11

Well, it would be a syntax error. Hard to help if we don’t see the actual code.

getDatas is returning Object.values(response) but you seem to be using it as if it was returning a Promise?

Edit: I would suggest you create a repo on GitHub and link to it so we can see the actual code in its entirety.

12

I wrote what I want to do to the .md file (these movies came. But still there is an error on the console.)

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.