0

I'm trying to get the information that is in the url but JavaScript returns to the HTML table "undefined". Does anyone have any idea what mistake I might be making.

If anyone knows how to fix the problem, let me know.

Get data that's in the JSON but not in the table/HTML

<!DOCTYPE html>
    <html lang="en">
    
    <link rel="stylesheet" href="Request.css">
    
    <h2>Query</h2>
    
    <form id="form" method="GET">
        <label for="Year">Year:</label><br>
        <input type="text" id="year" name="year" autocomplete="off" required><br>
        <input type="submit" value="submit">
    </form>
    
    <table>
        <thead>
            <tr>
                <td>Year</td>
                <td>Data</td>
            </tr>
        </thead>
        <tbody id="movie-table-body">
    
        </tbody>
    </table>

FROM HERE Java-script

    <script>
    var form = document.getElementById("form")
    
    document.getElementById('form').addEventListener('submit', function (evt) {
    
        evt.preventDefault();
        var year = document.getElementById("year").value
    
    
        let params = {
            "year": year,
        }
    
    
    
        let query = Object.keys(params)
            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
            .join('&');
    
        let url = 'https://facebook.com=54s' + query;
    
        fetch(url)
        
            .then(data => data.text())
            .then((text) => {
                console.log('successful', text)
                let = tableHTML = ""
    
                for (let i = 0; i < text.length; i++) {
                    tableHTML += "<tr>";
                    tableHTML += "<td>" + text[i]["year"] + "</td>";
                    tableHTML += "<td>" + text[i]["data"] + "</td>";
    
                    tableHTML += "</tr>";
                };
    
                document.getElementById("movie-table-body").innerHTML = tableHTML;
            })
            .catch((error) => {
                alert(error);
            })
    
        })
    </script>

</body>
</html>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • Use `data.json()` instead of `data.text()` – Phil Feb 23 '22 at 23:03
  • Does this answer your question? [How to read JSON file with fetch() in javascript?](https://stackoverflow.com/q/51859358/283366) – Phil Feb 23 '22 at 23:05
  • Sorry @Phil as I said I'm new here, I just deleted the post. –  Feb 24 '22 at 00:13
  • 1
    @SBK: you did not "delete" the post, rather, you defaced your question, which is not allowed. – Hovercraft Full Of Eels Feb 24 '22 at 00:43
  • @HovercraftFullOfEels I think OP might be getting mixed up. They posted an answer below that should have been an edit to the question which has been deleted. Don't know why they emptied their question though – Phil Feb 24 '22 at 01:54

1 Answers1

-1

You receive a text, you must convert to JSON data.json(). Response from request is a object, so you can't iterate the object, you must iterate a array

let tableToHtml = ""
text[data].map(d => {tableToHtml += json.stringify(d)} )

If you want to add all keys in object, use for...in


for (b in data) {
tableToHtml += b;
}
S. Wasta
  • 599
  • 9
  • 35
  • I use `.map` but it's the same in you `for` loop – S. Wasta Feb 23 '22 at 23:28
  • I get an error with the code you gave me. I attached the image for you to see. https://i.stack.imgur.com/93AGi.png @S.Wasta –  Feb 23 '22 at 23:36
  • Can you edit answer and paste "new" code, from my answer? Did you paste `text['data'].map...` inside second `then`? – S. Wasta Feb 23 '22 at 23:39
  • It says "suggest edit is full" I don't know what that means. I think I can't edit your answer I think you can ask again with the correct code... @S.Wasta –  Feb 23 '22 at 23:47
  • I just attached the code below with what you told me to do. @S.Wasta –  Feb 24 '22 at 00:06