如何从ajaxcall返回的json对象中提取值

Question

我正在进行 ajax 调用。作为回报，我得到了一些 json 数据。在我的 ajax 调用的成功函数中包含：

$.ajax({
  type: "GET",
  headers: {'X-CSRF-TOKEN': token},
  url:url,
  data: {id:id},
  datatype:'json',
  success: function(data) {
    var returndata =JSON.parse(data);
    console.log(returndata);

  }
});

所以我正在打印我在 consol 中获得的数据。我的控制台输出显示：

[Object]0: 
    Object
    barcode: "abc"
    name: "barcoded"
    sellPrice: "122"
    unit: "200"
    __proto__:Object
    length: 1
    __proto__: Array[0]

如何从 javascript 变量中的 json 对象中提取数据（名称、条形码、销售价格）。

Answer 1

在这个答案中，产品将显示在一个表格中，每个产品一行

在视图中

@section('content')
<div id="page-wrapper">
    <!-- /.row -->
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1>
                    stocks
                    <a class="btn btn-primary pull-right btn-sm" href="{{ url('stocks/create') }}">
                        Add New Product
                    </a>
                </h1>
                 <div class="input-group col-md-12">
                    <input id="search" name="search" type="text" class="form-control input-lg search" placeholder="Buscar" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div><br>
                <div class="table">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>
                                    S.No
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- */$x=0;/* --}}
            @foreach($stocks as $stock)
                {{-- */$x++;/* --}}
                            <tr>
                                <td>
                                    {{ $x }}
                                </td>
                                <td>
                                    <a href="{{ url('stocks', $stock->id) }}">
                                        {{ $stock->name }}
                                    </a>
                                </td>
                                <td>
                                    {{ $stock->description }}
                                </td>
                                <td>
                                    <a href="{{ url('stocks/' . $stock->id . '/edit') }}">
                                        <button class="btn btn-primary btn-xs" type="submit">
                                            Update
                                        </button>
                                    </a>
                                    /
                        {!! Form::open([
                            'method'=>'DELETE',
                            'url' => ['stocks', $stock->id],
                            'style' => 'display:inline'
                        ]) !!}
                            {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-xs']) !!}
                        {!! Form::close() !!}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

在同一个视图中使用这个

@section('js')
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'></script>
 <script type="text/javascript" src='{{ url("jquery.quicksearch.js") }}'></script> // download the plugin and put it inside the publicfolder


<script>
$( document ).ready(function() {
    console.log( "ready!" );
     $('input#search').quicksearch('table tbody tr');
});
</script>


@endsection

您可以从here下载插件，也可以在链接中找到有关该插件的更多信息

这段代码来自我的一个项目，它已经可以工作了（搜索任何 Field 、 name 、 price ...等的工作）

插件名称：快速搜索，由 riklomas 制作，由 DeuxHuitHuit 维护

编辑

如果你想使用ajax你可以这样做

控制器

 use Illuminate\Http\Request; // dont forget to add this at the top

 public function search(Request $request)
{
    $query = $request->input('searching');
    $stocks = Stock::where('name', 'LIKE', '%' . $query . '%')->get();
    return response()->json($stocks);
}

不要忘记 视图

中的 CSRF 令牌元

<meta name="csrf-token" content="{{ csrf_token() }}" />
 <input type="search" name="searching">

js

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$.ajax({
    url: '{{url('/sales/searchproduct')}}',
    type: 'POST',
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (data) {
        console.log(data); 
        // then use jquery to append data to html
    }
});

Answer 2

这里 Json 是一个对象数组..所以应该包括索引。下面的代码为我工作。

var returndata =JSON.parse(data);
document.getElementById("name").value = returndata[0].name;