如何从json对象访问和使用多个数据？ 我需要做一个数组吗？

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等）。 Whem我的应用程序加载我希望它显示item1.jpg图像，并且我希望能够使用按钮（上一个/下一个）导航到其他项目图片。 我还希望描述和价格显示在某些文本输入字段的下方。

到目前为止，我认为我应该：

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

这将是最好的方法吗？

还是可以不使用数组就直接执行obj.data来做到这一点？

谢谢！！！

Answer 1

我可能不明白您到底想做什么，但我想我有主旨。 如果您只想显示图片，则仅包含图像的数组可能不是一个坏主意。 但是，看起来您得到的Jason已经存在于数组中。 您可以只使用数组索引符号来获得所需的内容。

即）

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演示，其中有一个带有真实图像URL的第4个对象，向您展示如何使用URL信息...

---

编辑

以防万一您不知道这一点：

您可以在$.get()回调范围内使用响应...
您不能在回调之外的$.get()之后直接使用它，因为$.get()是异步的。

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

 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 。

工作提琴

 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); }