Help with javascript

JavaScript
1

Hey, im doing a course assignment for my school project and im stuck, could someone help me? :slight_smile:

2

Welcome to the community!

Please explain what the problem you are facing is with your project?

If possible, post the complete code using the </> at the top of this text box, or use the ```backticks before your codes. Somebody is the community may be able to help you if they know what you need the help to solve the problem.

Good luck with your project!

3

I get this error when i try to update a post (PUT ttps://api.noroff.dev/api/v1/social/posts/6651 403 (Forbidden)
authFetch @ authFetch.mjs:15
updatePost @ updatePost.mjs:62
form.onsubmit @ updatePost.mjs:42)

this is my authFetch.mjs code:


import { load } from "./storage/index.mjs";

export function headers() {
  const token = (localStorage.getItem("token"));

  return {
    "Content-type": "application/json",
    Authorization: `Bearer ${token}`,
  };
}

export async function authFetch(url, options = {}) {
  return fetch(url, {
    ...options,
    headers: headers(),
  });
}

and this is my updatePost.mjs code:


const form = document.querySelector("#form");
const title = document.querySelector("#titleId");
const body = document.querySelector("#bodyId");
const tags = document.querySelector("#tagsId");
const idInput = document.querySelector("#id");

const params = new URLSearchParams(document.location.search);
const id = params.get("id");
if (!id) location.href = "index.html";

const url = `https://api.noroff.dev/api/v1/social/posts/${id}`;

// Populate the form with post data
async function populateForm() {
  const method = "GET";
  try {
    const response = await authFetch(url, method); // Use authFetch to ensure authentication
    const json = await response.json();

    title.value = json.title;
    body.value = json.body;
    tags.value = json.tags;
    idInput.value = json.id;
  } catch (error) {
    console.log(error);
  }
}

// Handle form submission
form.onsubmit = async function (event) {
  event.preventDefault();

  const titleValue = title.value;
  const bodyValue = body.value;
  const tagsValue = tags.value;

  // Here, you can add input validation checks

  try {
    await updatePost(titleValue, bodyValue, tagsValue, id);
    alert("Post updated successfully!"); // Display a success message
  } catch (error) {
    console.log("Failed to update post:", error);
  }
};

// Function to update the post
async function updatePost(title, body, tags, id) {
  const url = `https://api.noroff.dev/api/v1/social/posts/${id}`;
  const method = "PUT";

  const data = {
    title: title,
    body: body,
    tags: tags.split(","), // Make sure tags is an array
  };

  const token = localStorage.getItem("token");

  const response = await authFetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(data),
  });

  if (response.status !== 200) {
    throw new Error(`Failed to update post: ${response.statusText}`);
  }
}

// Populate the form with post data when the page loads
populateForm();

i cant figure it out, could someone help? here is the github link also:

4

sorry, here is the authFetch.mjs code:


import { load } from "./storage/index.mjs";

export function headers() {
  const token = (localStorage.getItem("token"));

  return {
    "Content-type": "application/json",
    Authorization: `Bearer ${token}`,
  };
}

export async function authFetch(url, options = {}) {
  return fetch(url, {
    ...options,
    headers: headers(),
  });
}
5

Hi!

The server sends a 403 denied and the docs say you need to be authorized to use the social endpoints.

Can you check if you are logged in/ have your credentials stored in your app, password, correct username etc? (please don’t post any of that info here)

6

yes i have logged in, so i just really don undertand what the problem is…

7

The problem is the server blocking you from access with 403 according to the error message you posted.

We have to figure out why.

1 Like
8

If this really the cause and the only error message, here’s an article that might help:

1 Like
9

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