Question

我正在执行一个返回json对象数组的api调用。这是我可以期待返回的一个例子：

[
  {"id": 1, "name": "Pete", "age": 22},
  {"id": 2, "name": "Sarah", "age": 32},
  {"id": 3, "name": "Marshall", "age": 33}
]

我试图遍历此对象以创建表行，同时动态地将每个json对象中的每个键作为属性分配，而不必显式声明该键。例如，我想将此对象呈现为以下结构：

<tr key=1>
  <td>Pete</td>
  <td>22</td>
</tr>
<tr key=2>
  <td>Sarah</td>
  <td>32</td>
</tr>
<tr key=3>
  <td>Marshall</td>
  <td>33</td>
</tr>

我的遗留代码如下：

var MyMembers= this.props.Members.map((Member) => {
  return (
    <tr key={Member.id}>
      <td>{Member.name}</td>
      <td>{Member.age}</td>
    </tr>
  )
});

在这段遗留代码中，我明确地调用了'name'和'age'属性来创建'td'标签。有没有办法可以遍历每个对象并为所述对象中的每个键创建一个'td'值，而无需显式调用键名？

Answer 1

这应该有效：

 var MyMembers= this.props.Members.map((Member) => {
  var keys = Object.keys(Member)
  var index = keys.indexOf("id");
  if (index > -1) {
     // removes the "id" element from the keys.
     keys.splice(index, 1);
  }
  var divs = keys.map(k => <td>{Member[k]}</td>)
  return (
   <tr key={Member.id}>
   divs
   </tr>
  )
 });

Answer 2

如果你想以功能的方式做到这一点，你可以使用它：

from django.contrib.auth.decorators import login_required
from django.http import Http404
from django.shortcuts import render, redirect
from django.template.defaultfilters import slugify

from collection.forms import ThingForm
from collection.models import Thing


def index(request):
    things = Thing.objects.all()
    return render(request, 'index.html', {
        'things': things,
    })


def thing_detail(request, slug):
    # grab the object...
    thing = Thing.objects.get(slug=slug)

    # and pass to the template
    return render(request, 'things/thing_detail.html', {
        'thing': thing,
    })


@login_required
def edit_thing(request, slug):
    # grab the object...
    thing = Thing.objects.get(slug=slug)

    # grab the current logged in user and make sure they're the owner of the thing
    if thing.user != request.user:
        raise Http404

    # set the form we're using...
    form_class = ThingForm

    # if we're coming to this view from a submitted form,  
    if request.method == 'POST':
        # grab the data from the submitted form
        form = form_class(data=request.POST, instance=thing)

        if form.is_valid():
            # save the new data
            form.save()
            return redirect('thing_detail', slug=thing.slug)

    # otherwise just create the form
    else:
        form = form_class(instance=thing)

    # and render the template
    return render(request, 'things/edit_thing.html', {
        'thing': thing,
        'form': form,
    })


def create_thing(request):
    form_class = ThingForm

    # if we're coming from a submitted form, do this
    if request.method == 'POST':
        # grab the data from the submitted form and apply to the form
        form = form_class(request.POST)

        if form.is_valid():
            # create an instance but do not save yet
            thing = form.save(commit=False)

            # set the additional details
            thing.user = request.user
            thing.slug = slugify(thing.name)

            # save the object
            thing.save()

            # redirect to our newly created thing
            return redirect('thing_detail', slug=thing.slug)

    # otherwise just create the form
    else:
        form = form_class()

    return render(request, 'things/create_thing.html', {
        'form': form,
    })


def browse_by_name(request, initial=None):
    if initial:
        things = Thing.objects.filter(
             name__istartswith=initial).order_by('name')
    else:
        things = Thing.objects.all().order_by('name')

    return render(request, 'search/search.html', {
        'things': things,
        'initial': initial,
    })

或者对于阅读理解，将项目分成最终回报：

var list = this.state.data.map(p => {
    return (
    <tr key={p.id}>
      {Object.keys(p).filter(k => k !== 'id').map(k => {
        return (<td key={p.id + '' + k}>{p[k]}</td>);
      })}
    </tr>
  );
})

JSFiddle

动态迭代React中的json对象数组

2 个答案: