Laravel how to retrieve name with user_id using angular?

Question

I'm only able to fetch data with title and body attribute, but when i get data for the name it shows up empty when i refresh the page but shows when i submit automatically.

For some reason angularjs is not retrieving the name successfully.

Note: I'm using laravel.

For example here:

Here is the server side:

PostController

public function getPosts() {

  $posts = Post::with('user')->get();
  $response = new Response(json_encode($posts));
  $response->headers->set('Content-Type', 'application/json');
  return $response;
}

public function storePost(Request $request) {
  $data = request()->validate([
    'title' => 'required|max:120',
    'body' => 'required|max:1000'
  ]);

  $data['user_id'] = auth()->user()->id;
  $data['name'] = auth()->user()->name;

  $post = Post::create($data);

  $response = new Response(json_encode($data));
  $response->headers->set('Content-Type', 'application/json');


  // return redirect('/home')->withMessage('A new post was created.');

  return $response;
}

main.js

$scope.myposts = {};

$scope.addPost = function() {

  $http.post('/auth/post', {
    title: $scope.post.title,
    body: $scope.post.body

  }).then(function(data, status, headers, config) {
    console.log(data);
    $scope.myposts.push(data.data);

  });

  $scope.post.title = '';
  $scope.post.body = '';

};

$scope.deletePost = function(post) {
  var index = $scope.myposts.indexOf(post);

  if (index != -1) {
    $scope.myposts.splice(index, 1);
  }

  $http.delete('auth/post/' + post.id);
};

$scope.getPosts = function() {

  $http.get('/auth/posts').then(function(data) {
    $scope.myposts = data.data;
  }).then(function(data, status, header, config) {});
};

HTML:

<div id="mypost" class="col-md-8 panel-default" ng-repeat="post in myposts">
  <div id="eli-style-heading" class="panel-heading">
    <% post.title %>
  </div>
  <div class="panel-body panel">
    <figure>
      <p>
        <% post.body %>
      </p>
      by:
      <p>
        <% post.user.name %>
      </p>

    </figure>
    <span><button ng-click="deletePost(post)">x</button></span>
  </div>
</div>

When i first add content without refresh(asynchronously)

on page refresh

above (different log for different post)

sure, lets say i add a post it shows the posts user along with its name, when i refresh the page, the user's name disappears. it only shows the title and body attribute like the image in the thread. the first post you see in the image is the title and body content without the user name the second post you see in the image is the title and body, with the user name, but when i refresh the name disappears — BARNOWL
– BARNOWL, Commented Nov 15, 2017 at 3:29
@Beginner the name does not display on refresh, it just shows only when i just add the content(asynchronously) — BARNOWL
– BARNOWL, Commented Nov 15, 2017 at 3:30
You should change $scope.myposts = {}; to $scope.myposts = [];. You have: $scope.myposts.push(data.data);. $scope.myposts must be an array []. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Nov 15, 2017 at 3:32

Beginner · Accepted Answer · 2017-11-15 03:56:52Z

1

Your reload page is okay since

$posts = Post::with('user')->get();

returns

{
    "title": "title",
    "body": "body",
    "user":  {
        "name": "name"
    }
}

and in your angular you display it by

<% post.user.name %>

So the solution to display it when you added is to restructure your json object before pushing to array

$scope.addPost = function() {

  $http.post('/auth/post', {
    title: $scope.post.title,
    body: $scope.post.body

  }).then(function(data, status, headers, config) {
    console.log(data);

    data.data['user'] = {
        name: data.data.name
    }

    $scope.myposts.push(data.data);

  });

  $scope.post.title = '';
  $scope.post.body = '';

};

answered Nov 15, 2017 at 3:56

Beginner

4,1183 gold badges19 silver badges27 bronze badges

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

1 Comment

BARNOWL Over a year ago

you got more information on something like this, like a reference docs.

Collectives™ on Stack Overflow

Laravel how to retrieve name with user_id using angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related