Не работает getJSON в чем проблема??

Question

[Tizi]

нужно вывести данные из файла json данные в таблицу на сайте. вроде все делаю правильно.

js

$.getJSON('http://localhost:5000/api/users', function(data) {
	for(var i=0; i<data.users.length; i++){
		$('tbody').append(
			'<tr><td>' + data.users[i].id + 
			'</td><td>' + data.users[i].name + 
			'</td><td>' + data.users[i].username + 
			'</td><td>' + data.users[i].email + 
			'</td><td>' + data.users[i].phone + 
			'</td><td>' + data.users[i].website + '</td><tr>');
	}
});

$.getJSON('http://localhost:5000/api/users', function(data){ 
  console.log(data);
});

html

<table id="users">
   <thead>
    <tr>
     <td>id</td>
     <td>name</td> 
     <td>username</td> 
     <td>email</td> 
     <td>phone</td> 
     <td>website</td> 
   </tr> 
 </thead>
 <tbody>

 </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>

скрин консоли

сама ошибка

JSON

{
  "users": [
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "[e-mail]",
      "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
          "lat": "-37.3159",
          "lng": "81.1496"
        }
      },
      "phone": "1-770-736-8031 x56442",
      "website": "hildegard.org",
      "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
      }
    }
]
}

но почему то выдает ошибку и нечего не работает. подскажите пожалуйста что тут не так .

Comments

[Dark Hole]

Ваш API. Вот что тут не так

[Tizi]

Dark Hole, ?? не понимаю

[Dark Hole]

Tizi, а что тут не понимать? data.users - undefined

[Tizi]

Dark Hole, и как это исправить ??

[Dark Hole]

Tizi, исправить серверную часть

[Tizi]

Dark Hole, у меня это как задание и запрещено менять какие либо файлы из других деректорий в папке. + все на nodejs
вот файл server.js

const express = require('express');
const jsonServer = require('json-server');
const path = require("path");
const app = express();

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', jsonServer.router('./db/users.json'));

app.listen(5000);

а вот файл package.json

{
  "name": "task",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/nodemon server.js localhost 5000"
  },
  "author": "GEOS",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "json-server": "^0.12.1"
  },
  "devDependencies": {
    "nodemon": "^1.14.3"
  }
}

[Dark Hole]

Tizi, хм, уберите users, просто data.length и т.д.

[Tizi]

Dark Hole,

$.getJSON('http://localhost:5000/api/users', function(data) {
	for(var i=0; i<data.length; i++){
		$('tbody').append(
			'<tr><td>' + data.id + 
			'</td><td>' + data.name + 
			'</td><td>' + data.username + 
			'</td><td>' + data.email + 
			'</td><td>' + data.phone + 
			'</td><td>' + data.website + '</td><tr>');
	}
});

выводит все 10 записей

[Dark Hole]

Tizi, data[i].id, data[i].email и т.д.

Answer 1

[Иван]

Просто добавьте одну строчку:
data = JSON.parse(data);
и будет вам счастье.

Comments

[Tizi]

$.getJSON('http://localhost:5000/api/users', function(data) {
data = JSON.parse(data);
  for(var i=0; i<data.users.length; i++){
    $('tbody').append(
      '<tr><td>' + data.users[i].id + 
      '</td><td>' + data.users[i].name + 
      '</td><td>' + data.users[i].username + 
      '</td><td>' + data.users[i].email + 
      '</td><td>' + data.users[i].phone + 
      '</td><td>' + data.users[i].website + '</td><tr>');
  }
});

так??

[Иван]

Tizi, да, так

[Tizi]

Иван,

[Иван]

Tizi, Сделайте console.log(data); перед data = JSON.parse(data); и посмотрите что у вас в переменной data

[Tizi]

Иван,

[Иван]

Tizi, Понятно. Переменная data у вас - это массив а не объект. Вместо data.users[i].id и т.п. в коде указывайте просто data[i].id и т.д.
P.S. data = JSON.parse(data); уберите

[Tizi]

Иван,
Огромное тебе спасибо я делал тоже самое ток без [i] и у меня выдавало не определено ))

[Иван]

Tizi, в последней строке у вас '</td><tr>' а нужно '</td></tr>' (вместо открывающего тега закрывающий, "/" пропущен)

[Tizi]

Иван, увидел сам уже. но все равно спасибо

[Tizi]

Иван, а вот еще вопрос. в файле json есть у каждого юзера вот такие строки

клик

"address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
          "lat": "-37.3159",
          "lng": "81.1496"
        }
      },

как их вывести в модельное окно при клике на строчку с пользователем. выводить нужно соответственно те данные того пользователя по которому кликнул

[Иван]

Tizi, При получении данных с Ajax сохраняйте data в глобальную переменную (например users), а при клике определяйте в строку с каким id клик и выбирайте нужные данные из массива. Если быстро набросать весь код выглядит примерно так:

var users = [];
$.getJSON('http://localhost:5000/api/users', function(data) {
  users = data;
  for(var i=0; i<data.length; i++){
    $('tbody').append(
      '<tr data="'+i+'"><td>' + data[i].id + 
      '</td><td>' + data[i].name + 
      '</td><td>' + data[i].username + 
      '</td><td>' + data[i].email + 
      '</td><td>' + data[i].phone + 
      '</td><td>' + data[i].website + '</td><tr>');
  }
});
$('tbody>tr[data]').on('click', function(){
  var id = $(this).attr('data');
  user_data = users[id];
  // вызов модального окна
});