Question

我是初学者并使用$ .get从其他API检索数据，例如：

 [{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"},
  {"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"}
  {"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}] }


$.get('http://xxxxxxxxxxx,
      function (data) {
      var obj = $.parseJSON(data);

因此，根据我的理解，我已从REST API中检索数据并对其进行解析，以便将其存储在名为obj的变量中。

我的问题是，如何访问和使用obj变量中的每个唯一记录？

每张唱片都有自己的照片（item1.jpg，item2.jpg等）。我的应用程序加载我希望它显示item1.jpg图像，我希望能够使用按钮（上一个/下一个）导航到其他项目图片。我还希望在一些文本输入字段下面显示描述和价格。

到目前为止我想到的是我应该：

遍历obj变量，并将每条记录存储到数组中。
在应用初始化后，我可以将图像占位符的默认值设置为数组[index0] .url，并设置描述和价格字段。
然后我可以将上一个和下一个按钮设置为array [currentIndex-1]或array [currentIndex + 1]。

这是最好的方法吗？

或者我可以在不使用数组的情况下直接操作obj.data吗？

感谢!!!

Answer 1

我可能不明白你究竟想做什么，但我认为我有这个要点。如果你只是想要显示图片那么只是图像的数组可能不是一个坏主意。然而，看起来你得到的杰森已经在阵列中。你可以使用数组索引表示法来获得你想要的东西。

ie）

var arr = //your json response ;
var current = 0; //sets currently displayed object to the first in the array
var setCurrent = function () {
  var image = arr[current]["url"];
}

然后您可以根据需要修改当前（单击箭头向上/向下迭代等），然后调用setCurrent函数将图像设置为您想要的图像。希望有所帮助！

Answer 2

您可以直接使用$.get()提供的回复它是一个对象数组。

你可以像这样使用它：

console.log(data[2].description);
// outputs: "Console"

我做了一个CodePen演示，其中第四个对象带有一个真实的图片网址，向您展示如何使用网址信息......

<小时/> 的修改

万一你不知道这个：

您可以在$.get()回调范围内使用回复...
因为$.get()是异步的，所以你不能在回调之外的$.get()之后使用straith。

您可以在接收到响应后的其他处理程序中使用它。

var getResponse;

$.get('http://xxxxxxxxxxx', function (data) {
    getResponse = data;

    console.log(data[2].description);
    // outputs: "Console"

    console.log(getResponse[2].description);
    // outputs: "Console"
});

console.log(getResponse[2].description);
// outputs: "Undefined"

// But since this handler will be triggered long after the response is obtained:
$("#somebutton").click(function(){
  console.log(getResponse[2].description);
  // outputs: "console"
});

Answer 3

为了让您的页面javascript能够访问从您的ajax请求中检索到的数据，您需要将其分配给存在于回调函数之外的某个变量。

您需要等到处理完ajax请求后才能读取数组。因此，您可能希望将实际默认图像设置为不依赖于ajax请求（本地图像）。

这是一个简单的方法

// fake testing ajax func
function fakeget (url, callback) {
  setTimeout(callback(JSON.stringify([
{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"}, {"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"},
{"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}
])), 1000);
}

// real code starts here

// global variables for ajax callback and setImg func to update
var imageData, currentImg;

// change this back to $.get for real
fakeget('http://xxxxxxxxxxx',
  function (data) {
    imageData = $.parseJSON(data);
    setImg(0);
  }
);

function setImg(index) {
  // turns negative indices into expected "wraparound" index
  currentImg = (index % imageData.length + imageData.length) % imageData.length;

  var r = imageData[currentImg];
  $("#theImg").attr('src', r.url);
  $('#theDescription').text(r.price + " " + r.description);
}

$("#prev").click(function () {
  setImg(currentImg - 1);
});

$("#next").click(function () {
  setImg(currentImg + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id='theImg' src='somedefault.jpg'>
  <div id='theDescription'></div>
</div>
<button id='prev'>Prev</button>
<button id='next'>Next</button>

Answer 4

很少有观察结果：

您的JSON Object无效JSON。
无需再次parse data已成为JSON Object。

Working fiddle

＆＃13;

var data = [{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"},{"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"},  {"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}];

for (var i in data) {
  var imgUrl = data[i].url;
  console.log(imgUrl);
}

＆＃13;

如何从json对象访问和使用多个数据？我需要制作一个阵列吗？

4 个答案: