Почему json выводится таким образом?

Question

[xlo240]

Vue обращается через axios ajax к бд

<input type="button" value="OK" @click="allRecords()">
  </div>
  <div>{{ users }}</div>
  <div v-for="user in users" :key="user">
      <div>{{ user.id}}</div>
     <div>{{ user.name}}</div>
      <div>{{ user.quantity}}</div>
      <div>{{ user.price}}</div>
      <div>{{ user.logo}}</div>
      <div>{{ user.dates}}</div>
	  <div>{{ user}}</div>
      <hr>
    </div>
</div>
<div></div>
<script>
var app = new Vue({
  el: '#app',
  data() {
    return {
      users: '',
      userid: 0,
	  message: 'Привет, Vue!'
	}
  },
  methods: {
	 allRecords() {
      axios.get('ajax/ajax.php')
      .then(function(response){
        app.users = response.data
		console.log(response.data)
      })
      .catch(function(error){
        console.log('Error')
      })
    }
  }
})

php обработчик

$sql = "SELECT * FROM `parts_tbl`";
$res = mysql_query($sql);
if(!$res) {
	echo "Ошибка запроса mysql";
}
else {
	//echo "OK";
}

while(($a = mysql_fetch_assoc($res)) == true) {
		$rowArr[]=$a;
	}
echo json_encode($rowArr, JSON_UNESCAPED_UNICODE);

Возвращает
[{"id":"1","name":"деталь 1","quantity":"44","price":"444","logo":"AA4","dates":"2018-10-27 18:33:49"},{"id":"2","name":"деталь 2","quantity":"22","price":"222","logo":"BB5","dates":"2018-10-27 18:33:49"}]

v-for

<div v-for="user in users" :key="user">
      <div>{{ user.id}}</div>
     <div>{{ user.name}}</div>
      <div>{{ user.quantity}}</div>
      <div>{{ user.price}}</div>
      <div>{{ user.logo}}</div>
      <div>{{ user.dates}}</div>
	  <div>{{ user }}</div>
      <hr>
    </div>

выводит пустые строки, а
<div>{{ user }}</div>
выводит побуквенно
скрин
https://yadi.sk/i/BCXGkLX13fHclg

Comments

[Модератор]

xlo240 читаем п. 3.9 регламента работы сервиса и исправляем. Спасибо.

Answer 1

[0xD34F]

выводит побуквенно

Тот факт, что вы ожидали иного, ясно говорит следующее: вы не знаете, что такое json. Не понимаете, что это строка. Что сам json и объекты, получаемые при его парсинге - не одно и то же.

Строки v-for так и перебирает - "побуквенно". То есть, значениями user являются строки единичной длины. Ну а свойств id, name, price и т.д. у строк нет, отсюда пустота там, где вы выводите свойства элементов users.

Answer 2

[Vladislav Orlov]

Попробуйте JSON.parse заюзать

т.е эту конструкцию
app.users = response.data
console.log(response.data)

заменим на эту
app.users = JSON.parse(response.data);
console.log(app.users[0]); // get info only first user
console.log(app.users[0].id); // get id first user

Answer 3

[Сергей delphinpro]

Кусок кода из проекта:

//==
//== Axios: create instance
//== ======================================= ==//

Vue.use(VueAxiosBridge, axios.create({
    baseURL         : '/api',
    timeout         : 0,
    responseType    : 'json',
    responseEncoding: 'utf8',
    headers         : {
        'X-Requested-With': 'XMLHttpRequest',
    },

    // Reject only if the status code is greater than or equal to 500
    validateStatus: status => status < 500,
}));

Vue.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Вам следует обратить внимание на строку responseType : 'json',.
Данная настройка укажет axios, что полученный ответ нужно распарсить как json и вернуть в виде объекта.

Как в вашем случае указать конфиг, можно прочесть в документации https://github.com/axios/axios#request-method-aliases (вторым параметром axios.get())

Answer 4

[xmoonlight]

jsonObj=JSON.parse(jsonString);