Получите данные AJAX JSON индивидуально

Question

У меня небольшая проблема с моим кодом, допустим, у меня есть такой json:

[{"img":"john.png","name":"John","username":"@john"},
{"img":"mark.png","name":"mark","username":"@mark"}]

Я хочу организовать данные следующим образом:

Джон @johnjohn.png

Mark @mark mark.png

Но каждый раз, когда данные появляются так:

John Mark @john @mark john.png mark.png

Это мой Php-код:

<?php
class search{
    public function gettingvalues($search_value){
        require_once('conx.php');
        $dir = "usersimage/";
        $sql = "SELECT name,img,username FROM users WHERE username like '$search_value%' || name like '$search_value%'";
        $query = mysqli_query($conx,$sql);
        if ($query) {
            if (mysqli_num_rows($query) > 0) {
                while ($row = mysqli_fetch_array($query)) {
                    $img = $row['img'];
                    $name = $row['name'];
                    $username = $row['username'];
                    $json = array('img' => $img, 'name' => $name, 'username' => $username);
                    $results[] = $json;
                }
                echo json_encode($results);
            }
        }
    }
}
?>

Это индекс:

<?php

    if (isset($_POST['data'])) {
        require('search.php');
        $search = new search;
        $search->gettingvalues($_POST['data']);
        header('Content-Type: application/json; charset=utf-8');
        die();
    }
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            var value= $('input').val();
            $.ajax({
                type: "POST",
                url: "",
                data: {data: value},
                datatype: "json",
                success: function(json_data) {
                  var img = [];
                  var username = [];
                  var name = [];
                  $.each(json_data, function(index, element) {
                    img.push(element.img);
                    username.push(element.username);
                    name.push(element.name);
                  })
                  $('#feedback').html('');
                  $('#feedback').html(name+username+img);
                }
            });
        });
    });
</script>
<input type="text" name="search" placeholder="looking for?">
<div id="feedback"></div>

На самом деле это мой первый раз сjson, я не знаю, в чем проблема, или, может быть, я что-то пропустил, надеюсь получить ответы.

Answer 1

Вам нужно построить HTML в том порядке, в котором вы хотите его отобразить.

var html = '';
$.each(json_data, function(index, element) {
    html += `${element.name} ${element.username} ${element.img}<br>`;
}
$("#feedback").html(html);